@font-face {
    font-family: "Sniglet";
    src: url("fonts/Sniglet/Sniglet-Regular.ttf");
}

@font-face {
  font-family: "Sniglet";
  src: url("fonts/Sniglet/Sniglet-ExtraBold.ttf");
  font-weight: bold;
}

html {
  font-family: sans-serif;
  width: 100%;
  height: 100%;
}

body {
margin: 0;
padding: 0;
background-color: #c1dcc6;
background-image:url("images/tomokuramr-busstop-3.png");
background-position:top center;
background-size: auto 350px;
background-repeat:no-repeat;
font-family: Sniglet, monospace, sans-serif;
font-size: 1.2em;
color: #735852;
}

#header{
min-height:350px;
background-image:url("images/oyari-ashito-angel-small.png");
background-position: top right;
background-repeat: no-repeat;
}

#header h1{
margin: 0;
padding-top: 300px;
text-align: center;
font-family: Sniglet, sans-serif;
color: #735852;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
font-size: 3em;
}

nav{
font-family: Sniglet, sans-serif;
font-weight: normal;
font-size: 1.2em;
text-transform: lowercase;
margin: 0 auto;
}

nav ul{
list-style-type: none;
margin: 0;
padding: 1em;;
text-align: center;
border: double 4px #c1938a;
}

nav ul li{
display: inline;
}

nav ul li a{
text-decoration: none;
padding: 0.5em;
}

nav ul li::after{
content: "・❥・";
color: #c1938a;
}

nav ul li:last-child::after{
visibility: hidden;
}

nav ul li a:hover{
color: #f2a6ab;
}

#article{
background-color: #fbfae4;
width: 75%;
margin: 0 auto;
}

#text{
padding: 2em;
}

a{
color: #c1938a;
}

a:hover{
color: #f2a6ab;
}

img{
display: block;
max-width: 100%;
height: auto;
margin: auto;
}

.vignette-image{
clip-path: ellipse(40% 50%);
}

h1{
font-family: Sniglet, sans-serif;
text-align: center;
font-size: 2.5em;
color: #9ab09f;
}

h2{
font-family: Sniglet, sans-serif;
text-align: center;
font-size: 2.2em;
color: #9ab09f;
}

h3{
font-family: Sniglet, sans-serif;
text-align: center;
font-size: 2em;
color: #9ab09f;
}

h4{
font-family: Sniglet, sans-serif;
font-size: 1.5em;
color: #9ab09f;
}

.date{
font-weight: bold;
}

.date::after{
content: " "
}