/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

    
    :root {
     --dk-color:#bf776b;
     --mid-color:#1affff;
     --lt-color:#e6ffff;
     --dkest-color:#004d4d;
      --accent:#226051;
}
 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:100%;
     font-family:Courier New;
     font-size:12px;
     background-image:url('https://savannaganucheau.com/stripesblue.png');
     background-repeat:repeat;
     color:#004d4d;
     padding:1px;
     overflow-y:hidden;
}
body a {
  color:#226051;
  font-weight:bold;
  }
 #container {
     max-width:900px;
     margin:0 auto;
     margin-top:15px;
     height:100%;
}
h1 {
   color:#006644;
     text-shadow: 0px 2px 2px #e6ffff;
}
 h3, h5 {
     color:#006644;
}
 h2, h4, h6 {
     color:#226051;
  }
 #header {
     max-width:800px;
     height:150px;
     margin-left:5px;
     margin-right:5px;
     margin:0 auto;
     background-image:url('https://savannaganucheau.com/dithered-imagetree.png');
     border:1px dashed #004d4d;
 }
 .title {
     font-family:MS gothic;
     font-size:45px;
     text-align:center;
     font-style:bold;
}
 #wrapper {
     margin:0 auto;
     max-width:860px;
}
.content {
  padding:15px;
  }
 #two-boxes {
     display:flex;
     flex-wrap:wrap;
     max-width:900px;
}
 .box-one, .box-two, .box-three, .box-four, .box-five, .box-six {
     border:1px solid #004d4d;
     background-color:#ffffff;
     overflow:auto;
}
 .box-one, .box-two {
     height:250px;
     width:418px;
     margin-left:5px;
}
 .box-one {
     margin-top:5px;
     margin-right:5px;
}
 .box-two {
     margin-top:5px;
     margin-right:5px;
}
 .box-three {
     margin-left:5px;
     margin-top:5px;
     width:260px;
     height:326px;
}
 .box-four {
     margin-top:5px;
     margin-left:5px;
     width:581px;
     height:326px;
}
 .section-title {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background-color:#99ffdd;
     color:#004d4d;
     font-size:12px;
}
 .nav-wrapper {
     display:flex;
     flex-wrap:wrap;
     width:400px;
     height:50px;
     margin:0 auto;
     justify-content:space-evenly;
     margin-top:5px;
}
 button {
     width:190px;
     height:40px;
     background-color:#99ffdd;
     color:#004d4d;
     Font-family:Courier New;
     font-weight:bold;
     border:dashed 1px;
     margin-top:5px;
     margin-right:5px;
}
  button a {
    color:#226051;
    font-weight:bold;
  }
  p {
     padding:5px;
}
 p a {
  color:#004d4d;
  font-weight:bold;
  }
 .scroll::-webkit-scrollbar-track {
     background-color: #e6ffff;
}
 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: #1affff;
}
 .scroll::-webkit-scrollbar-thumb {
     background-color: #004d4d;
}
 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
}
 #footer p {
     background-color:white;
     display:block;
     width:500px;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
}
textarea {
  background-color:#004d4d;
  color:#e6ffff;
  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%;
    }
}