body{
    margin: 0;
    background-color: rgb(255, 233, 225);
    min-height: 100vh;
    
  }
  

  p, h2, h1, h3{
    color: brown;
    margin-left: 10px;
    margin-right: 10px;
  }
  
  ul{
    color: brown;
    padding-left: 20px;
    border-right: 10px;
  }
  .bentocontainer{
    
    display: grid;
    min-height: 100vh;
    max-height: 100vh;
    grid-auto-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr 7fr 1fr ;
    
    gap: 3px;
    grid-template-areas: 
    "yellowstyle yellowstyle yellowstyle"
    "orangestyle brownstyle greenstyle"
    "tanstyle tanstyle darkstyle";
  }
  .bentocontainer div{
    border: 2px solid brown;
    
  }

  .yellow{
    background-color: #fcde9c;
    align-content: center;
    word-wrap: break-word;
  }
  .yellow h1{
    margin:0;
    padding:0;;
    color: brown;
    word-wrap: break-word;
    word-break: break-all;
    font-size: 5dvh;
   
  }
  .orange{
    background-color: #ffa552;
    word-wrap: break-word;
    overflow: auto;
  }
    .brown {
    background-color: #ba5624;
    word-wrap: break-word;
    overflow: auto;
  }
  .brown p{
    color: wheat;
  }
   .green{
    background-color: #c4d6b0;
    word-wrap: break-word;
    overflow: auto;
  }
   .tan{
    background-color: tan;
  }
  
  .dark{
    background-color: rgb(83, 42, 114);
    color: wheat;
  }
  .dark p{
    color: wheat;
  }

  @media only screen and (max-width: 730px) {
    .bentocontainer{
     
      grid-auto-rows: fitcontent(auto);
      grid-template-areas: 
    "yellowstyle"
    "orangestyle" 
    "brownstyle" 
    "greenstyle"
    "tanstyle"  
    "darkstyle"
    }
    .green{
      overflow: initial;
    }
    .orange{
      overflow: initial;
    }
    .brown{
      overflow: initial;
    }
     
  }