:root {
     --dk-color:#6821b9;
     --mid-color:#6821b9;
     --lt-color: #2f2b35;
     --dkest-color:#FFFFFF;
     --accent:#8ef73d;


     /* Night Sky - Default Colors */ 
     --n1: #d2c7ff;
     --n2: #877dce;
     --n3: #3d4169;
     --n4: #ec98c0;
     --n5: #c97dc9;
     --n6: #ffffd2;
     --n7: #fcd8c2;
     --n8: #2f2b35;
     --n9: #eeeedf;
     --n10:#604ca7e5;

     /*VHS Overlay Effect */
     --noise-texture: url(images/layout/graintexture.png);
     --gif-texture: url(images/layout/scanlines.gif);
     --main-transition:all 0.2s ease-in-out;
}
 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:100%;
     font-family: "VT-100", fixedsys, System, monospace;
	 font-size: 12px;
     background-image:url('images/layout/CityBG_Pink.png');
     background-size: cover;
     color: var(--n8);
     padding:1px;
     overflow-y:hidden;
}
body a {
  color:var(--n7);
  font-weight:bold;
}

.bgoverlay {
    opacity:0.3;
    background-image: var(--noise-texture);
    background-blend-mode: overlay;
    position: fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:10;
}

.vhseffect {
    /* content: "";
    display: flex; */
    background-image:var(--gif-texture);
    position: fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:500;
    translate:0px 0px;
    background-repeat: no-repeat;
    background-position-y:-20px;
    background-size: cover;
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 64%;

}

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

 h1, h2, h3, h4, h5, h6 {
     color:var(--n5);
}

 #header {
     max-width:875px;
     height:170px;
     margin-left:5px;
     margin-right:5px;
     margin:0 auto;
     z-index:15;
     background-image: url('images/layout/RoboGenkoArt_Pink.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     text-align: center;
     /* background-color:var(--n1);
     border:1px solid var(--n6); */
     
}
 .title {
     font-size:45px;
     text-align:center;
     font-style:italic;
     background: -webkit-linear-gradient(var(--n7), var(--n4), var(--n5), var(--n4));
     -webkit-background-clip: text;
     -webkit-text-stroke: 7px transparent;
     color: var(--n6);
     font-family: "Sixtyfour", sans-serif;
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
     font-variation-settings:
      "BLED" 10,
      "SCAN" -7;
}



 #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-top:1px solid var(--n6);
     border-left:1px solid var(--n6);
     border-right:1px solid var(--n8);
     border-bottom:1px solid var(--n8);
     background-color:var(--n3);
     border-radius: 5px; */
     background: var(--n1);
     border-radius: 5px;
     border: 1px solid var(--n2);
     box-shadow: 2px 2px var(--n3);
     z-index: 10;
}
 .box-one, .box-two {
     height:200px;
     width:418px;
     margin-left:5px;
}
 .box-one {
     margin-top:10px;
     margin-right:5px;
}
 .box-two {
     margin-top:10px;
     margin-right:5px;
}
 .box-three {
     margin-left:5px;
     margin-top:10px;
     width:260px;
     height:450px;
     overflow:auto;
}
 .box-four {
     margin-top:10px;
     margin-left:5px;
     width:581px;
     height:450px;
     overflow:auto;
}
 .section-title {
     /* text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background-color:var(--n4);
     background-image:linear-gradient(var(--n7), var(--n5), var(--n2), var(--n5));
     color: var(--n6);*/
     text-shadow: 0 0 2px var(--n3);
     font-size:12px;
     /*z-index: 20; */
     background: var(--n2);
     color: var(--n6);
     font-weight: bold;
     padding: 5px;
     padding-top: 3px;
     padding-bottom: 3px;
}

.right {
  float: right;
  margin-right: 5px;
  font-family: "Arial", sans-serif;
  line-height: 12px;
  }

 .nav-wrapper {
     display:flex;
     flex-wrap:wrap;
     width:400px;
     height:50px;
     margin:0 auto;
     justify-content:space-evenly;
     margin-top:5px;
}
 .nav-button {
     width:190px;
     height:35px;
     /* background-color:var(--mid-color); */
     background-image: linear-gradient(var(--n7), var(--n4), var(--n5), var(--n4));
     font-weight:bold;
     border:1px solid var(--n2);
     margin-top:5px;
     margin-right:5px;
     border-radius:5px;
     box-shadow: 2px 2px var(--n3);


}
  
.nav-button a {
    color:var(--n6);
    font-weight:bold;
    text-shadow: 0 0 2px var(--n3);
    text-decoration:none;
}

.nav-button:hover {
    color: var(--n7);
    background-image: linear-gradient(var(--n6), var(--n1), var(--n2), var(--n10), var(--n2));
}

p {
     padding:5px;
}

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

 .scroll::-webkit-scrollbar-track {
     background-color: var(--lt-color);
     z-index: 15;
}

 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: #f2b1a4;
     z-index: 16;
}

 .scroll::-webkit-scrollbar-thumb {
     background-color: var(--dk-color);
     z-index: 14;
}

.lilgenko {
    position: fixed;
    top: 48%;
    left: 63%;
    z-index: 300;
    animation: genkoFloat 3s ease 2s infinite alternate;
}

@keyframes genkoFloat {
  from {transform: translate(0px, 0px) scaleX(-1);}
  to {transform: translate(0px, -25px) scaleX(-1);}

  
}


 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
}
 #footer p {
     display:block;
     width:160px;
     margin:0 auto;
     margin-top:2px;
     margin-bottom:5px;
     padding: 2px;
     color: var(--n6);
}

#footer a {
    color: var(--n9);
}

#footer a:hover {
    color: var(--n5)
}

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