body{
  top:0;
  left:0;
  margin:0;
  padding:0;
  width:100vw;
  height:100%;
  overflow-x:hidden;
  font-family: 'Gentium Book Basic',"Noto Sans CJK SC", serif;
  color:{color:Text};
  background-color:{BackgroundColor};
}

.modal, .modal-content, .modal-content h4{
  color:{color:Text};
  background-color:{BackgroundColor};
  font-family:'Karla',sans-serif;
}

.modal-content{
  font-family: 'Gentium Book Basic',"Noto Sans CJK SC", serif;
}
.modal-content h4{
  text-transform:uppercase;
  text-align:center;
}
.post a, header a, footer a, .pagination a{
  color:{AccentColor};
}

.post a:hover, .pagination a:hover{
  text-decoration:underline;
}
header{
  top:0;
  left:0;
  margin:0;
  width:100vw;
  height:100vh;
  {block:ShowHeaderImage}
  background: url("{image:Header}");
  background-size: cover;
  background-repeat: no-repeat;
  background-color:{color:Navbar};
  {/block:ShowHeaderImage}
  position:relative;
  color:{BackgroundColor};
}

h1 a{
color:{BackgroundColor};
}
#hdr-grd{
  position:absolute;
  top:0;
  left:0;
  margin:0;
  height:100%;
  width:100%;
  background: -webkit-linear-gradient(top,rgba(0,0,0,0),{color:Navbar}); /*Safari 5.1-6*/
  background: -o-linear-gradient(bottom,rgba(0,0,0,0),{color:Navbar}); /*Opera 11.1-12*/
  background: -moz-linear-gradient(bottom,rgba(0,0,0,0),{color:Navbar}); /*Fx 3.6-15*/
  background: linear-gradient( bottom, rgba(255,0,0,0), {color:Navbar}); /*Standard*/
  z-index:1;
}
h1, h2, h3{
  font-family: 'Karla', "Noto Sans", "Noto Sans CJK SC", sans-serif;
}

h2{
 font-size:1.5em;
 margin-bottom:2%;
}
.header-group{
  position:absolute;
  text-align:center;
  width:100%;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
}

.header-group h1{
    margin:auto;
width:70%;
margin-bottom:3%;
text-transform:uppercase;
}
.header-description{
  width:75%;
  margin:auto;
  font-family:'Karla',sans-serif;
  font-style:italic;
}

nav{
  margin-top:0;
  background-color:{color:Navbar};
  position:relative;
  font-family:'Karla',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.1em;
  height:80px;
  padding-top:1%;
  z-index:10;
  opacity:1;
  transition:0.7s;
}

#menudrop a{
  font-size:0.9em;
  letter-spacing:0;
  color:{BackgroundColor};
  text-transform:uppercase;
}

#menudrop li:hover{
background-color:{AccentColor};
}
#menudrop{
  background-color:black;
}
nav .navlog{
  position:absolute;
  left:15%;
  width:50px;
  height:50px;
  border-radius:50%;
  bottom:10px;
}

blockquote{
  font-family: 'Karla', sans-serif;
  border-color:{color:AccentColor};
  font-size:0.98em;
}

blockquote blockquote{
  font-style:italic;
  font-size:0.92em;
}
#mainnav li{
  padding-left:5%;
  padding-right:5%;
}

.post{
  margin-top:10%;
  position:relative;
}

.img-post{
  position:relative;
  width:100%;
}

.img-post img{
  width:100%;
  margin-bottom:2%;
}

h4{
  font-family:'Karla',sans-serif;
}

.post ul li{
  list-style:disc;
}

.post ol li{
  list-style:decimal;
}

#mainnav{
  width:70%;
  float:right;
  margin-right:5%;
}

@media (max-width:599px){
  nav{
    height:60px;
    padding-top:0;
  }
  #mainnav{
    width:50%;
    margin-right:0;
  }
  .navlog{
    margin-left:0;
    left:0;
  }
  #mainnav li{
    width:30%;
    text-align:center;
}
  .navlog{
    font-size:1.5em;
    padding-bottom:5%;
    top:0px;
    left:0px;
  }
}
@media (min-width:600px){
  .post-cont{
    width:{text:Container width}%;
  }
  #mainnav{
    width:40%;
    float:right;
    right:10%;
  }

}
.post-meta-list, .tags{
  text-align:center;
}
.post-meta-list li{
  list-style:none;
  display:inline;
  font-family:'Karla',sans-serif;
  font-size:0.85em;
  padding-left:2%;
  padding-right:2%;
}
.tags{
  margin-top:-2%;
  font-size:0.83em;
}
.tags li{
  list-style:none;
  display:inline;
  font-family:'Karla',sans-serif;
  font-size:0.85em;
  padding-left:2%;
  padding-right:2%;
}

.tags li:before{
  content:'#';
  color:{AccentColor};
}

.footer-text{
  margin-top:5%;
}

.input-field label {
  color: {BackgroundColor};
}
.input-field input[type=text]:focus + label {
  color: {AccentColor};
}

.input-field input[type=text]:focus {
  border-bottom: 1px solid {AccentColor};
  box-shadow: 0 1px 0 0 {AccentColor};
}
footer{
  margin-top:15%;
  text-align:center;
  top:0;
  left:0;
  bottom:0;
  background-color:{color:Navbar};
  color:{BackgroundColor};
  font-size:0.7em;
  padding-top:2%;
  right:0;
  width:100vw;
  height:100%;
  font-family:'Karla',sans-serif;
}

#askav img{
  border-radius:50%;
  margin-top:15%;
  max-width:50px;
  max-height:50px;
  overflow:hidden;
}

#askerid{
  font-family:'Karla',sans-serif;
  text-transform:uppercase;
  font-size:0.85em;
  font-weight:700;
  width:80%;
}

.pagination{
  text-align:center;
  text-indent:none;
  list-style:none;
  margin:auto;
  margin-top:15%;
  font-family:'Karla',sans-serif;
}
.pagination li{
  list-style:none;
  display:inline;
  font-size:0.9em;
  text-align:center;
  width:25%;
}

#chatter{
  font-family:'Karla',sans-serif;
  font-weight:700;
  font-size:0.9em;
  text-transform:uppercase;
  text-align:right;
  padding-right:5%;
}

#quoted{
  width:80%;
  margin:auto;
  font-size:1.2em;
  font-style:italic;
  text-align:center;
}

#quoter{
  margin-top:5%;
  font-family:'Karla',sans-serif;
  text-align:right;
  text-transform:uppercase;
  font-weight:700;
  font-size:0.9em;
}

.text-post img{
width:100%;
}

h5{
font-family:'Karla',sans-serif;;
font-size:1.2em;
font-weight:700;
}
ol.notes li.note{
list-style:none;
}

ol.notes {
    margin-top:5%;
}
{block:PermalinkPage}
.post-cont{
    margin-top:10%;
    min-height:80vh;
}
{/block:PermalinkPage}

.permmeta{
font-family:'Karla',sans-serif;;
font-size:0.85em;
text-align:center;
width:80%;
margin:auto;
margin-top:3%;
margin-bottom:3%;
}