:root {

   --dk-color: #003800;
   --mid-color: #3bae73;
   --lt-color: #c2ffd3;
   --dkest-color: #000d00;
   --accent: #65c392;
 }

 @font-face {
   font-family: awemono;
   src: url('/Awe Mono Gold.woff')format("truetype");
 }

 @font-face {
   font-family: rulergold;
   src: url('/RulerGold.woff')format("truetype");
 }

 html,
 body {
   margin: 5px;
   padding-top: 25px;
   padding: 0;
   height: 100%;
   font-family: 'MS PGothic';
   font-size: 12px;
   background-color: var(--lt-color);
   color: var(--dkest-color);
   padding: 1px;
   overflow-y: hidden;
 }

 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: 110px;
   margin-left: 5px;
   margin-right: 5px;
   margin: 0 auto;
   background-color: var(--lt-color);
   border: 1px solid var(--dkest-color);
   border-radius: 2px;
 }

 .title {
   font-size: 30px;
   text-align: center;
   font-family: 'rulergold';
   padding: 10px 0;
 }

 #wrapper {
   margin: 0 auto;
   max-width: 860px;
 }

 .content {
   padding: 10px;
 }

 .content a:hover {
   color: var(--mid-color);
 }

 #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 var(--dkest-color);
   background-color: var(--lt-color);
   overflow: auto;
 }

 .box-one,
 .box-two {
   height: 200px;
   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;
   padding-top: 5px;
   padding-bottom: 5px;
   font-family: 'rulergold';
   background-color: var(--mid-color);
   color: var(--dkest-color);
   font-size: 1.5em;

 }

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

 button {
   width: 190px;
   height: 35px;
   background-color: var(--mid-color);
   color: var(--dkest-color);
   border: none;
   margin-top: 5px;
   margin-right: 5px;
   font-family: 'MS PGothic';
 }

 button a {
   color: var(--dkest-color);
   font-family: 'MS PGothic';
 }

 button:hover {
   background-color: var(--lt-color);
 }

 p {
   padding: 5px;
 }

 p a {
   color: var(--dkest-color);
   font-weight: bold;
 }

 p a:hover {
   color: var(--mid-color);
 }

 .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;
 }

 #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%;
   }
 }

 /* for having multiple columns in one box */
 .row {
   display: flex;
 }

 .column {
   flex: 50%;
   border: 1px solid var(--dkest-color);
   background-color: var(--lt-color);
   overflow: auto;
   margin-left: 5px;
   margin-right: 5px;
   padding-left: 15px;
   padding-bottom: 15px;
 }

 /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
 @media screen and (max-width: 600px) {
   .column {
     width: 100%;
   }
 }

 /* pagedoll */
 @media screen and (max-width: 1100px) {
   .pagedoll {
     display: none;
   }
 }

 .pagedoll:hover {
   transform: rotate(-1deg) scale(1.01);
 }

 /* list style*/
 .ls {
   list-style-type: "->";
   list-style-position: inside;
 }

 /* disabled buttons */
 .disabled {
   opacity: 60%;
   cursor: not-allowed;
 }

 .disabled a {
   text-decoration: none;
 }

 /* animations */
 @-webkit-keyframes floating {
   from {
     transform: translateY(5px);
   }

   to {
     transform: translateY(-5px);
   }
 }
 @keyframes floating {
   from {
     transform: translateY(5px);
   }

   to {
     transform: translateY(-5px);
   }
 }

 .floating {
   -webkit-animation-name: floating;
           animation-name: floating;
   -webkit-animation-duration: 4s;
           animation-duration: 4s;
   -webkit-animation-direction: alternate;
           animation-direction: alternate;
   -webkit-animation-iteration-count: infinite;
           animation-iteration-count: infinite;
 }

 /* for pixel art */
 .pixel {
   image-rendering: crisp-edges;
   -ms-interpolation-mode: nearest-neighbor;
       image-rendering: -moz-crisp-edges;
       image-rendering: pixelated;
 }

 /* iframe boxes */
 .borderbox {
   max-width: 400px;
   text-align: left;
   border-style: double;
   padding: 4px;
   border-color: var(--accent);
 }

 /* h4 */
 .h4 {
   text-align: center;
   font-weight: bold;
 }

 /* wavingtext */

 .waviy {
   position: relative;
 }

 .waviy span {
   position: relative;
   display: inline-block;
   font-weight: bold;
   -webkit-animation: waviy 1s infinite;
           animation: waviy 1s infinite;
   -webkit-animation-delay: calc(.1s * var(--i));
           animation-delay: calc(.1s * var(--i));

 }

 @-webkit-keyframes waviy {

   0%,
   40%,
   100% {
     transform: translateY(0)
   }

   20% {
     transform: translateY(-5px)
   }
 }

 @keyframes waviy {

   0%,
   40%,
   100% {
     transform: translateY(0)
   }

   20% {
     transform: translateY(-5px)
   }
 }

 .image {
  box-sizing: border-box;
  flex-shrink: 3;
  height: 300px;
  margin:5px;
  width:min-content;
  background-color:black;
  border-radius:6px;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  -ms-border-radius:6px;
  -o-border-radius:6px;
}
.image img{
  z-index: 0;
  position: relative;
  height:100%;
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -ms-border-radius:5px;
  -o-border-radius:5px;
}
.imagegallery {
  width: 98%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.desc {
  background-color:rgba(255, 255, 255, 0.9);
  z-index: 5;
  display: none;
  border-radius: 5px;
  padding: 5px;
  padding-bottom: 20px;
  position: relative;
  margin: 5px;
  margin-top:-295px;
  opacity:0;
}
.imagegallery .image:hover .desc{
  display: block;
  position: relative;
  z-index: 5;
  opacity:1;
  transition-duration: 250ms;
}
.imagegallery .image:hover img{
  opacity:.5;
  transition-duration:250ms;
}
.image a {
  color:var(--dk-color);
}