/* CSS Document */
body 
{ 
    font-family: Calibri;
    margin: 10px;
    background-color: white;
    margin: 10px;
      display: grid;
      grid-template-columns: repeat(4,1fr);
      grid-template-areas: "head head head head"
                           "nav main main main"
                           "aside main main main"
                           "foot foot foot foot";
}
body
{
    display: grid;
    grid-template-columns: 1 fr;
    grid-template-areas: "head"
                         "nav"
                         "main"
                         "aside"
                         "foot"; 
    }
    @media(min-width: 30em){
body
{
    grid-template-columns: repeat:(2,1fr);
    grid-template-areas: "head head"
                         "nav aside"
                         "main main"
                         "foot foot";
  }                       
}
@media(min-width: 50em){
body
{
    grid-template-columns: repeat:(4,1fr);
    grid-template-areas: "head head head head"
                         "nav main main main"
                         "aside main main main"
                         "foot foot foot foot";
  }                       
}
table{
       height: auto%;
       }
p {
     text-align: center;
     font-size: 30px;
     }
p1 {
      text-align:center;
      }
h1
{
    text-align: center;
    fonz-size: 50px;
}
img { 
     text-align:center;
     }
h2 {
     text-align:center;
     }
h5 {
     text-align: center;
     }
header, nav, main, aside, footer
{
    border-width: 5px;
    border-style: solid;
    padding: 10px;
}
header
{
    background-color: white;
    border-color: OrangeRed;
    grid-area: head;
}
nav
{
    background-color: white;
    border-color: OrangeRed;
    grid-area: nav;
}
main
{
    background-color: snow;
    border-color: OrangeRed;
    height: 750px;
    grid-area: main;
}
aside
{
    background-color: white;
    border-color: OrangeRed;
    grid-area: aside;
}
footer
{
    background-color: white;
    border-color: OrangeRed;
    grid-area: foot;
}