:root {
     --dk-color:#b67549;
     --mid-color:#f2b1a4;
     --lt-color:#a3ec78;
     --dkest-color:#8e534a;
      --accent:#226023;
}

 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:100%;
     font-family:monospace;
     font-size:11px;
     background-image: url(images/veggiebg.png);
     background-repeat: repeat;
     background-size: contain;
     color:var(--dkest-color);
     padding:1px;
}

body a {
  color:var(--accent);
  font-weight:bold;
  }

 #container {
     max-width:900px;
     margin:0 auto;
     margin-top:15px;
     height:100%;
}

.container2 {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
}

 h1, h3, h5 {
     color:var(--dk-color);
     text-align: center;
}
 h2, h4, h6 {
     color:var(--accent);
     text-align: center;
  }
 #header {
     max-width:850px;
     height:105px;
     margin-left:5px;
     margin-right:5px;
     margin:0 auto;
     background-color:var(--lt-color);
     border:2px solid var(--dkest-color);
}
 .title {
     font-size:35px;
     text-align:center;
     font-style:italic;
}
 #wrapper {
     margin:0 auto;
     max-width:864px;
}
.content {
  padding:10px;
  }

   #two-boxes {
     display:flex;
     flex-wrap:wrap;
     width: fit-content;
}
 .introBox, .my-links, .veggie-info, .tubble-gif, .process-info, .tos-stuff {
     border:2px solid var(--dkest-color);
     background-color:var(--lt-color);
}

.introBox, .my-links {
     height:280px;
     width:418px;
     margin-left:5px;
}
 .introBox {
     margin-top:5px;
     margin-right:5px;
}
 .my-links {
     margin-top:5px;
     margin-right:5px;
}
 
#tubbgif1 {
    height: 190px;
}

#price-img {
    width: 851px;
    margin-left: 5px;
    margin-top: 5px;
}

 .veggie-info {
     margin-left:5px;
     margin-top:5px;
     width:625px;
     height: fit-content;
     display: flexbox;
}

 .veggie-info2 {
     border:2px solid var(--dkest-color);
     background-color:var(--lt-color);
     margin-left:5px;
     margin-top:5px;
     width: 625px;
     height: fit-content;
     display: flexbox;
}

.decor-place {
    height: fit-content;
    width: 195px;
}
 .tubble-gif {
     margin-top:5px;
     margin-left:5px;
     width:215px;
     height: fit-content;
}
 .section-title {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background-color:var(--mid-color);
     color:var(--dkest-color);
     font-size:12px;
}

.bookdisplay {
    display: grid;
    justify-content: left;
    grid-template-columns: auto auto;
}

#bookcover {
    height: 200px;
    float: right;
}

#sunnyid {
    width: 225px;
}

#ilovekirby {
    width: 125px;
}
 
#drinkwater {
    width: 197px;
    padding-top: 5px;
}

 .nav-wrapper {
     display:flex;
     flex-wrap:wrap;
     width:400px;
     height:50px;
     margin:0 auto;
     justify-content:space-evenly;
     margin-top:5px;
}

 .process-info, .tos-stuff {
     margin-left:22px;
     margin-top:5px;
     width: 849px;
     font-size: medium;
 }

 button {
     width:190px;
     height:35px;
     background-color:var(--mid-color);
     color:var(--dkest-color);
     font-weight:bold;
     border:none;
     margin-top:5px;
     margin-right:5px;
}
  button a {
    color:var(--accent);
    font-weight:bold;
  }

 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
}
 #footer p {
     background-color:white;
     display:block;
     width:160px;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
}
textarea {
  background-color:var(--dkest-color);
  color:var(--lt-color);
  font-size:10px;
  }


 @media only screen and (max-width: 860px) {
     html, body {
         overflow:visible;
    }
    #header {
      width:97.6%;
    }
     #container {
         width:100%;
    }
     .box-one, .box-two, .box-three, .box-four, .box-five, .box-six {
         width:100%;
    }
    .box-two {
      order:1;
    }
    .box-one {
      order:2;
    }
     .box-three {
         width:98%;
    }
     .three-boxes {
         width:98%;
    }
     .two-boxes {
         width:100%;
    }
     .wrapper {
         width:100%;
    }
}