html {
}
body { 
  display: grid;
  grid-template-areas: 
    "nav header"
    "nav ads"
    "nav main"
    "nav footer";
  grid-template-rows: 100px 70px 1fr 70px;  
  grid-template-columns: 20% 1fr;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  height: 100vh;
  margin: 0 auto;
  font-family: 'Mali', cursive;
  font-size: 100%;
  max-width: 900px;
  background-image: url('https://ch2.privatebook.com/images/uploads/bg/bg1.png');
  background-repeat: repeat;
  }

header {
  padding: 1em;
  background: #f8f8f8;
  }
  
footer, main, nav, div {
  padding: 1em;
  background: #f8f8f8;
}
  
  
#pageHeader {
  grid-area: header;
  padding-top: 2em;
}
#pageFooter {
  grid-area: footer;
  }
#mainArticle { 
  grid-area: main;      
  }
#mainNav { 
  grid-area: nav;
  padding-top: 2em;
  }
#siteAds { 
  grid-area: ads;
  padding-top: 1em;
  padding-bottom: 0;
  } 
/* Stack the layout on small devices/viewports. */
@media screen and (max-width: 575px) {
  body { 
    grid-template-areas: 
      "header"
      "ads"
      "main"
      "nav"
      "footer";
    grid-template-rows: 80px 70px 1fr 1fr 70px;  
    grid-template-columns: 1fr;
 }
}

a {
	text-decoration: none;
}

.post-title {
	margin-bottom: 0;
}
.post-title a {
	color: #111111;
}

/* Header */
header .web-header-font a:link, header .web-header-font a:visited, header .web-header-font a:active {
	font-family: Gaegu, mali, cursive;
    font-size: 3.6em;
    font-weight: 700;
    color: #40e0d0;
    line-height: 0.5em;
}

header #web-header-font-th {
	font-size: .75em;
    letter-spacing: .7em;
    color: #40e0d0;
}

header .web-header-font a:hover {
	color: #7FFFD4;
}


.header-font a:link {
	color: #111111;
}
.header-font a:visited {
	color: #111111;
}
.header-font a:hover {
	color: #444444;
}
.header-font a:active {
	color: #111111;
}

/* Nav */
nav img {
	vertical-align: bottom;
}

/* End Nav */

/* Article */
main article:first-child header h2 {
	margin-top: 0;
}

article header {
	padding: 0;
}

article header h2{
	font-size: 1.2em;
}
p {
	font-size: 16px;
    line-height: 1.7em;
}

.post-meta {
	font-size: 0.8em;
    margin-top: 0;
}
.post-meta img {
    padding-right: 5px;
    vertical-align: middle;
}
.read-more {
	text-align: right;
    padding-right: 5em;
    padding-top: 0;
    padding-bottom: 0;
}
/* End Article */

/* Quote */
.quote {
	font-family: 'Special Elite', cursive;
    color: #bfbfbf;
    background: #ffffff;
}
/* End Quote */

img {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
}