body { 
	direction: rtl;
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav article article"
    "nav footer footer";
  grid-template-rows: 80px 1fr 70px;  
  grid-template-columns: 20% 1fr 15%;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: calc(100vh - 40px);
  border-radius: 10px;
   padding: 0px;
  margin:20px;
   font-size: 150%;
  }  
  p{font-size: x-small;}
a {
    color: hotpink;
}
  header, footer, article, nav, div {
	background-color: #444;
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    font-size: 150%;
  }
#pageHeader {
  grid-area: header;
  }
#pageFooter {
  grid-area: footer;
  }
#mainArticle { 
  grid-area: article;
background-color: #379;  
  }
#mainNav { 
  grid-area: nav; 
  }
 Footer { 
   padding: 10px; 
  }

  /* Stack the layout on small devices/viewports. */
@media all and (max-width: 975px) {
  body { 
    grid-template-areas: 
      "header"
      "nav"
      "article"
      "article"
      "footer";
    grid-template-rows: 80px 1fr 70px 1fr 70px;  
    grid-template-columns: 1fr;
 }
}