* { 
  box-sizing: border-box; 
  }

html {
  background-color:black;
  background-color:beige;
  }
  

.page {
  display:grid;
  grid-template-columns:1fr 1fr 1fr 4fr 1fr 2fr;
  grid-template-rows: 1fr 1fr 1fr ;
  grid-template-areas:
    '. . nav header . .'
    '. . nav main . .'
    '. . nav footer . .' ;
    background-color:grey;
    background-color:beige;
  grid-gap:1rem; 
  min-height:80vh;
  margin-top:10vh; 
  width:98%;
  }

nav,
main,
header,
footer {
    background-color:beige;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;    
    border:-1px solid blue; 
  }  

nav {
  grid-area: nav; 
  }
nav li {
  list-style:none;
  padding:.5rem 0;
  }	  
nav li a {
  padding:.25rem;
  border:1px solid #abc;  
  }	

header{ 
  grid-area: header;
  justify-content:flex-end;
  border:-1px solid green;  
  }
header p {
  padding:2rem 0 0 0;
  justify-content:flex-end;
  align-items:flex-end;  
  }  
header h1 {
  font:2rem "old english text mt" , cursive;
  color:#00bb00;
  text-align:center;
  margin:0 0 0 1rem;
  border:-1px solid green;  
  }
header img {
  margin:0 0 -.55rem -3rem;
  align-self:flex-end;
  border:-1px solid red;    
  }   
    
main {
  grid-area: main;
  text-align:center; 
  }
main h2 {
  padding-bottom:2rem;
  }  
main ul {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows: auto ;
  } 
main ul li {
  justify-self:start; 
  padding:.4rem 1rem;
  }  
  
footer {
  grid-area:footer; 
  justify-content:flex-start;
  }

/*