/* CSS */

body { 
    display: grid;
    grid-template-areas: 
      "nav header header"
      "nav article ads"
      "footer footer footer";
    grid-template-rows: 150px 1fr 100px;  
    grid-template-columns: 20% 1fr 15%;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    height: 100vh;
    margin: 0 auto;
    width: 100%;
    max-width: 900px;
    }  

  header, footer, article, nav, div {
    padding: 1.2em;
    }

  #pageHeader {
    grid-area: header;
    padding: 0px 0px 0px 10px;
    }

  #pageFooter {
    grid-area: footer;
    text-align: center;
    }

  #mainArticle { 
    grid-area: article;
    position: relative;      
    }

  #mainNav { 
    grid-area: nav; 
    }

  #siteAds { 
    grid-area: ads; 
    }
    

/* Stack the layout on small devices/viewports. */

@media all and (max-width: 575px) {
    body { 
      grid-template-areas: 
        "header"
        "nav"
        "article"
        "ads"
        "footer";
      grid-template-rows: 150px 90px 500px 1fr 100px;  
      grid-template-columns: 1fr;
   }
  
   h1 {
    text-align: center;
    margin: 0 auto;
    padding-top: 20px;;
   }
  
   #pageFooter h3 {
    text-align: left;
    padding: 0px 0px 0px 30px;
   }
  
  p {
    text-align: center;
  }
  
  #logoBox {
    position: absolute;
    left: 15%;
  
  }
  }