body { 
  display: grid;
  grid-template-areas: 
    "header header"
    "nav article"
    "nav ads"
    "footer footer";
  grid-template-rows: 60px 1fr 40px 40px;  
  grid-template-columns: 200px 1500px;
  grid-row-gap: 1px;
  grid-column-gap: 1px;
  height: 100vh;
  margin: 0;
  font-family: monospace;
  background-color: white;
  color: black;
  }  
footer, article, nav, div {
  padding: 1.2em;
  background: white;
  font-family: monospace;
  font-size: 24 pt;
  background-color: white;
  }
  
header {
  background: white;
  font-family: monospace;
  background-color: white;
  font-size: 48 pt;
  color: white;
  }

#pageHeader {
  grid-area: header;
  font-family: monospace,monospace;
  background-color: black;
  }
#pageFooter {
  grid-area: footer;
  font-family: monospace,monospace;
  }
#mainArticle { 
  grid-area: article;
  font-family: monospace,monospace;
  }
#mainNav { 
  grid-area: nav;
  font-family: monospace,monospace;
  }
#siteAds { 
  grid-area: ads; 
  font-family: monospace,monospace;
  } 
  
#navbar ul {
  display: flex;
  margin: 5px;
  font-family: monospace,monospace;
}

#navbar li {
  padding: 12px;
  font-family: monospace,monospace;
}

ul {
  list-style: none;    // to remove bullets
  font-family: monospace,monospace;
}  
  
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
  body { 
    grid-template-areas: 
      "header"
      "article"
      "ads"
      "nav"
      "footer";
    grid-template-rows: 40px 1fr 40px 1fr 40px;  
    grid-template-columns: 1fr;
 }
}

a:link {
  color: black; /* Custom unvisited link color */
}
a:visited {
  color: black; /* Custom visited link color */
}
a:active {
  color: black; /* Custom active link color */
}