@-moz-document url-prefix() {
  div, html{
    scrollbar-color: rgba(255, 187, 0, 0.831) rgba(91, 91, 91, 0) !important;
    scrollbar-width: thin !important;
  }

}

::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  opacity:0;
}

.pad::-webkit-scrollbar{
  width:0px;
}
::-webkit-scrollbar-thumb {
  background:rgba(255, 187, 0, 0.831);
  border-radius: 9px;
}

html::-webkit-scrollbar {
  display: none;
}


html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}



@font-face {
    font-family: "Mina";
    src: url('fonts/Mina-Regular.ttf');
  }


  p, h3{
    color:rgb(226, 226, 226);
    text-shadow:1px 1px 1px rgba(216, 216, 204, 0.58);
    font-family:"Mina", Arial, Helvetica, sans-serif;
    text-align:center;
  }

  a{
    color:rgb(200, 209, 70);
    text-shadow:1px 1px 2px rgba(216, 216, 204, 0.58);
    font-family:"Mina", Arial, Helvetica, sans-serif;
    text-decoration:none;
  }

  .seal{
    border:2px solid rgb(31, 31, 31);
    box-shadow: inset 0px 0px 2px 3px rgb(0, 0, 0),
                inset 0px 0px 4px 5px rgb(75, 75, 75),
                inset 0px 0px 1px 8px rgb(1, 1, 1),
                inset 0px 0px 2px 10px rgb(83, 83, 83),
                inset 0px 0px 1px 12px rgb(0, 0, 0);   
    ;
  }

  .thinseal{
    box-shadow: inset 0px 0px 1px 2px rgb(0, 0, 0),
                inset 0px 0px 2px 3px rgb(83, 83, 83),
                inset 0px 0px 1px 5px rgb(1, 1, 1),
                inset 0px 0px 1px 7px rgb(0, 0, 0);   
    ;
  }
  .selectseal{
    box-shadow: inset 0px 0px 3px 2px rgb(0, 0, 0)
    ;

  }



body{
  width:100vw;
  height:fit-content;
  background-image:url('vents.jpg');
  background-size:400px;
  margin:0 auto;
 
}

#background{
  width:100vw;
  min-width:650px;
  height:108%;
  min-height:calc(850px + 15%);
  position:fixed;
  margin:0 auto;
  margin-top:-5%;
  padding:0px;
  background: linear-gradient(180deg, rgba(105, 105, 105, 0.822) 0%, rgb(219, 219, 219) 46%);
  opacity:0.7;
  z-index:-1;
}


  #container{
    margin: 0 auto;
    margin-top:5%;
    width:75%;
    max-width:650px;
    min-width:550px;
    height:850px;
    z-index:1;
  }

  .header{
    height: 15%;
    width:100%;
    overflow:hidden;
    background:radial-gradient(farthest-corner at 60% 60%, rgb(255, 250, 241) 30%, rgb(188, 169, 153) 100%);

  }
  .skew{
    transform: skew(-20deg);    
    width:100%;
    height:100%;
    display:flex;
    margin-left:5px;
    clip-path: polygon(0 0, 93.88% 0, 102.1% 100%, 0% 100%);
  }

  #title{
    width:30%;
    text-align:center;
    padding-top:3px;
    padding-left:40px;
  }
  h1{
    font-size:50px;
    text-shadow: 1px 2px 10px white;
    font-family:"Mina", Arial;
  }

  .stripeblock{
    width:70%;
    overflow:hidden;
    padding-top:45px;
    
  }
  .stripe{
    width: 100%;
    height:7%;
    margin-top:12px;
    margin-left:20px;
  }
  .stripe1{
    background:rgb(255, 0, 0);
    box-shadow: 0px 0px 2px 2px rgba(242, 101, 101, 0.3);
  }
  .stripe2{
    background:rgb(255, 187, 0);
    box-shadow: 0px 0px 2px 2px rgba(242, 218, 101, 0.3);
  }
  .stripe3{
    background:rgb(0, 183, 255);
    box-shadow: 0px 0px 2px 2px rgba(101, 209, 242, 0.3);
  }


  #main{
    height:84.6%;
    width:100%;
    background:rgb(11, 11, 11);
    display:flex;
  }

  #mainholder{
    width:80%;
  }



  /* --------------------- this is crazyyy --------*/
  #mainnav{
    width:19%;
    background:linear-gradient(180deg, rgba(78,100,100,0) 23%, 
                                      rgba(43, 43, 43, 0.288) 37%,
                                      rgba(47, 47, 47, 0.288) 70%,
                                      rgba(78,100,100,0) 100%);

  }
  .linkhold{
    background:linear-gradient(180deg, 
                                rgba(84, 84, 84, 0.288) 0%,
                                rgba(132, 132, 132, 0.18) 11%,
                                rgba(109, 110, 110, 0.137) 13%, 
                                rgba(109, 110, 110, 0.137) 93%, 
                                rgba(78, 100, 100, 0.059) 95%,
                                rgba(78,100,100,0) 100%);
  }

    #references{
      height:20%;
      width:91%;
      margin-left:4%;
      margin-top:45%;
    }
    .spacer{
      height:15%;
    }
    .spacer p, .spacer2 p{
      font-size: 0.7em;
      padding-top:7px;
    }

    button{
      border-radius:10px;
      border:0px;
      background:radial-gradient(farthest-corner at 70% 70%, rgb(255, 250, 241) 30%, rgb(55, 52, 48) 100%);
      box-shadow:inset -3px -3px 3px rgba(46, 46, 46, 0.5),
      inset -1px 1px 1px rgb(228, 221, 221);
      font-family:'Mina', Arial;
      text-shadow: 1px 1px 2px white;
      white-space:nowrap;
      min-height:20px;
      width:80%;
      margin-left:10%;
      margin-top:10%;
      height:10%;
    }
    button:active{
      background:radial-gradient(farthest-corner at 70% 70%, rgb(255, 250, 241) 30%, rgb(55, 52, 48) 100%);
      box-shadow:inset 3px 3px 3px rgba(46, 46, 46, 0.5),
      inset -3px 1px 1px rgb(228, 221, 221);
    }
    #sitebuttonsarchive{
      width:90%;
      margin-left:8%;
      padding-bottom:50px;
    }

    .spacer2{
      height:14%
    }
    #graphics{
      height:30%;
      width:91%;
      margin-left:4%;
      margin-top:30%;
    }
    .refbtn{
      width:80%;
      margin-left:10%;
      margin-top:10%;
      height:9%;

    }

    #vendbuttonarea{
      height:10%;
      width:91%;
      margin-left:20%;
      margin-top:22%;
    }
    .vendbutton{
      background:radial-gradient(farthest-corner at 30% 20%, rgb(172, 172, 172) 30%, rgb(53, 53, 53) 100%);
      box-shadow:inset -1px -1px 1px rgba(226, 226, 226, 0.75), inset 1px 1px 2px rgba(190, 190, 190, 0.5);
      border-radius:2px;
      width:85%;
      height:35%;
      margin: 10% 0% 0% -15%;
      padding-right:10px;
      text-align:right;
    }
    .vendbutton a{
      color:rgb(216, 102, 25);
    }
    .rss{
      background-image:url(./decorative/rsicon.png);
      background-repeat: no-repeat;
      background-position:20% 40%;
      background-size:20% 80%;
    }
    .email{
      background-image:url(./decorative/email_15.gif);
      background-repeat: no-repeat;
      background-position:7% -10%;
      background-size:40% 130%;
    }
     .neo{
      background-image:url(./decorative/greengridgif.gif);
      background-repeat: no-repeat;
      background-position:0% 100%;
      background-size:100% 300%;
      box-shadow: inset 1px 1px 2px rgba(190, 190, 190, 0.5), inset -1px -1px 1px rgba(226, 226, 226, 0.75), inset -80px 0px 15px rgba(27, 27, 27, 0.829);
    }
     .sitemap{
      background-image:url(./decorative/color_earth.gif);
      background-repeat: no-repeat;
    }
    .home {
  background-image: url(./decorative/dark2.gif);
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 400% 700%;
  box-shadow: inset 1px 1px 2px rgba(190, 190, 190, 0.5), inset -1px -1px 1px rgba(226, 226, 226, 0.75), inset -50px 0px 15px rgba(27, 27, 27, 0.75);
}

    #exit{
      background:rgba(79, 79, 60, 0.427);
      color:rgba(212, 212, 212, 0.799);
      height:4%;
      width:91%;
      margin-left:4%;
      margin-top:0%;
      text-align:center;
    }
    .spacer3{
      height:10%;
      width:100%;
    }
    #exit a{
      display:inline-block;
      color:orange;
      font-size:0.7em;
      text-decoration:none;
      display:inline;
    }
    .audiosection{
      width:95%;
      height:3%;
      margin-top:10%;
      margin-left:5%;
    }
    .audiobtn{
      background:black;
      width:55%;
      height:2.3%;
      color:red;
      text-shadow:none;
      border-radius:5px;
      box-shadow:none;
      font-size:0.7em;
    }
    .audiobtn:active{
      background:black;
      box-shadow:none;
      color:black;
    }
    #audioplay{
      color:rgb(0, 0, 0);
      width:20%;
      height:100%;
      margin-left:2%;
    }


#displayrack{
  width:96%;
  height:97%;
  margin: 2% 0% 10% 2%;
  overflow-x:hidden;
  padding:5px;
  clip-path: polygon(0 0, 100% 0, 100% 98.5%, 0 98.5%);
}

    img{
      padding:1%;
      max-width:97%;
      max-height:20%;
  }

  
.stamps{
  width:99px;
  height:56px;
}




.reflinks{
  background:linear-gradient(90deg, rgb(54, 38, 25) 0%,
                                   rgb(54, 38, 25) 60%,
                                    rgb(11,11,11) 61%,
                              rgb(11,11,11) 100%);
  overflow:hidden;
  display:inline-block;
  padding-left:10px;
  height:5.5%;
  width:95%;
  margin: 2% 2% 2% 0%;
  white-space:nowrap;

}


.reflinkspipe{
  background:rgb(11,11,11);
  display:inline-block;
  transform: skew(-20deg) scaleY(2.5);
  height:60%;

}

.one{
  width:7px;
  margin-left:3%;
}

.two{
  width:7px;
  margin-left:1.7%;
}

.three{
  width:50%;
  margin-left:0.1%;
  height:100%;
}

.desc{
  white-space:nowrap;
  padding-left:15px;
  font-size:0.8em;
  margin: 0 auto;
  
  transform:scaleY(0.4);
}
.desc p{
  text-align:left;
  margin-top:10px;
}



@media only screen and (min-width: 850px){
  body{
    overflow-x:hidden;
  }

}

@media only screen and (min-height: 1024px){
  body{
    overflow-y:hidden;
  }
}