body{
      background-color: #ffd590;
      max-width: 1000px;
      margin: auto;
      padding: 1em;
    }
    
   #navbar a{
      color: white;
      display: block;
      text-decoration: none;

    }
    
    #navbar{
      grid-area: navbar;
      background-color:#7b2e26;
      text-align: left;
      text-decoration: none;
      border: 0.25em solid #4c0909;
      border-radius: 0.25em;
      margin: 0.5em;
      padding: 1em 2em 1em 2em;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      min-height: 175px
  
    }
    
    #mainbar{
      grid-area: mainbar;
      background-color:  #faecde;
      text-align: center;
      border: 0em solid #02090E;
      border-radius: 0.25em;
      margin: 0.5em;
      padding: 1em;
    }
    
    #sidepanel{
      grid-area: sidepanel;
      background-color:  #faecde;
      text-align: center;
      border: 0em solid #02090E;
      border-radius: 0.25em;
      margin: 0.5em;
      padding: 1em;
    }

    #botleft{
      grid-area: botleft;
      background-color:  #faecde;
      text-align: center;
      border: 0em solid #02090E;
      border-radius: 0.25em;
      margin: 0.5em;
      padding: 1.5em;
    }

    #botright{
      grid-area: botright;
      background-color:  #faecde;
      text-align: center;
      border: 0em solid #02090E;
      border-radius: 0.25em;
      margin: 0.5em;
      padding: 1.5em;
    }

    #container{
      display:grid; 
      grid-template-columns:1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      
      grid-template-areas:
       "navbar mainbar mainbar mainbar"
        "sidepanel mainbar mainbar mainbar"
        "botleft botleft botright botright";
    }

@media screen and (max-width: 700px){
  #container{
    display:block;
  }
  
    #navbar a{
    display: inline;
    margin:0.25em
    
  }
  
  #navbar {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    min-height: 0px;
    padding: 1em;
  }
}