:root {
     --dk-color: #9E4FB1;
     --mid-color:#C590DF;
     --lt-color:#FCF4E8;
     --dkest-color:#9f4fb1;
      --accent:#9f4fb1;
}
 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:100%;
     font-family: monospace;
     font-size:11px;
     background-image:url('https://file.garden/aYuz5krKuBsYiKIU/Plushy%20site/IMG_0823.png');
     background-repeat:repeat;
     color:var(--dkest-color);
     padding:1px;
     overflow-y:scroll;
}
body a {
  color:var(--accent);
  font-weight:bold;
  }
 #container {
     max-width:900px;
     margin:0 auto;
     margin-top:15px;
     height:100%;
}
 h1, h3, h5 {
     color:var(--dk-color);
}
 h2, h4, h6 {
     color:var(--accent);
  }
 #header {
     max-width:850px;
     height:200px;
     margin-left:5px;
     margin-right:5px;
     margin:0 auto;
     background-color: var(--lt-color);
     border:1px none var(--dkest-color);
     box-shadow: #DFBFF5 8px 8px 20px;
  background-image: url('https://file.garden/aYuz5krKuBsYiKIU/Plushy%20site/IMG_0827.gif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
     border-top-left-radius: 50px;
     border-top-right-radius: 50px
}
nav {
    /*padding: 1em;*/
    margin-top: 2em;
    font-weight: bold;
}

nav > ul {
    max-width: 960px;
    margin: auto;
    line-height: 3rem;
/* this stuff makes it wrap around on mobile */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
/* this line takes away the dot in front of the list items */
    list-style-type: none;
/* list items have default padding but we don't need it for these */
    padding-left: 0;
/* and this spaces out the buttons so they're not touching */
    justify-content: space-evenly;
}
nav li a{
    text-decoration: none; text-align: center; text-decoration: none; border-radius: 10px; background: #DFBFF5;padding: 0.8em 2.5em; text-shadow: var(--lt-color) 0 0 6px; box-decoration-break: clone; width: 18%;margin: 3px 0;

}


 .title {
     font-size:35px;
     text-align:center;
     font-style:italic;
}
 #wrapper {
     margin:0 auto;
     max-width:860px;
}
.content {
  padding:10px;
  }
 #two-boxes {
     display:flex;
     flex-wrap:wrap;
     max-width:900px;
    
}
 .box-one, .box-two, .box-three, .box-four, .box-five, .box-six {
     border:2px none var(--dkest-color);
     background-color:var(--lt-color);
     overflow:auto;
}
 .box-one, .box-two {
   border: 2px dotted var(--dkest-color);
     height:150px;
     width:415px;
     margin-left:5px;
     box-shadow: #DFBFF5 8px 8px 20px;
    
  
}
 .box-one {
     margin-top:5px;
     margin-right:5px;
     border-bottom-left-radius:50px;
     
}
 .box-two {
     margin-top:5px;
     margin-right:5px;
     border-bottom-right-radius: 50px
}
 .box-three {
     margin-left:5px;
     margin-top:5px;
     width:551px;
     height:350px;
     border-top-left-radius: 20px;
     border-bottom-left-radius: 20px
   
}
 .box-four {
     margin-top:5px;
     margin-left:5px;
     width:290px;
     height:350px;
     border-top-right-radius: 20px;
     border-bottom-right-radius: 20px
}
 .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;
}
 .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: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;
  }
  p {
     padding:5px;
}
 p a {
  color:var(--dkest-color);
  font-weight:bold;
  }
 .scroll::-webkit-scrollbar-track {
     background-color: var(--lt-color);
}
 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: #f2b1a4;
}
 .scroll::-webkit-scrollbar-thumb {
     background-color: var(--dk-color);
}
 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom: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%;
    }
}