body {
  background-color: black;
  color: #5bb104;
  font-size: 20px;
  font-family: "Jersey 15";;
}
.jersey-15-regular {
  font-family: "Jersey 15", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.red-text{
  color: #d31717;
}
strong{
  color: #bfec0e;
  font-size:22px ;
}
a{
color: #bfec0e;
}
a:hover{
  color: #d31717
}
.border {
  border: 30px solid;
  border-image: url("https://file.garden/aIJW6kKjWXYbh8q9/Illustration.png") 50 stretch;
  max-width:60%;
  margin: auto;
}
.pwned{
  height:0px;
  width:0px;
}
.pwned img{
  max-width:150px;
  position:relative;
  top:-8vh;
  left:60vw;
}
.tanaywashere img{
  top:6vh; 
  position:relative;
}
/* grid items*/
.nav{
  padding:10px;
  border: 3px solid #217500;
  grid-column: 1;
}
.main-content{
  grid-column:2 /span 2;
  padding:0px 10px 10px 10px;
  border: 2px solid #217500;
}
.main-content-fill{
  grid-column:2 /span 3;
  padding-top:5%;
  border: 2px solid #217500;
  overflow:auto;
}
.extra{
  grid-column: 4;
  padding:0px 10px 5px 10px;
  border: 2px solid #217500;
  text-align: center;
  display:flex;
  flex-direction: column;
}
.stamp-hoard{
  grid-column: 1 /span 4;
  padding:5px;
  overflow:auto;
  display:flex;
  justify-content: space-evenly;
  border: 2px solid #217500;
}
.stamp-hoard img{
  width:120px;
}
/* grid */
.container{
  display:grid;
  grid-template-columns: 20% 30% 30% 20%;
  max-width:100%;
  border: 3px solid #217500;
  align-items:stretch;
}
/* scrollbar*/
::-webkit-scrollbar {
  width: 7px;
  height:7px
}
::-webkit-scrollbar-track {
  background: black; 
}
::-webkit-scrollbar-thumb {
  background: #bfec0e; 
}
::-webkit-scrollbar-thumb:hover {
  background: #d31717; 
}
/* dark green: #217500 lime green: #bfec0e red: #d31717 */

/*mobile support*/
@media only screen and (max-width:600px) {
  .container{
    grid-template-columns:100%;
    grid-template-rows: auto auto auto auto;
    max-height:100%;
  }
  .nav{
    grid-row: 1;
    padding-top:0;
    max-height:400px;
  }
  .tanaywashere img{
    position:relative;
    top:-10vh;
    left: 29vw;
  }
  .main-content{
    grid-row:2;
    grid-column:1;
  }
  .main-content-fill{
    grid-row:2;
    grid-column:auto;
  }
  .extra{
    grid-row:4;
    grid-column:1
  }
  .stamp-hoard{
    grid-row:3;
    grid-column:1;
  }
  .pwned img{
    left:10vw;
  }
}

#graphics{
  overflow:scroll;
  border: 2px solid #217500;
  max-height:50vh;
  
  
}
.scroll-list{
  border: 5px solid #217500;
  max-height:200px;
  max-width:900px;
  padding:0px 15px 20px 15px;
  overflow: auto;
}
#kris {
  position:relative;
  width:0px;
  height:0px;
  top:-25vh;
  left:70%;
}
#top-kris{
  position:relative;
  width:200px;
  height:200px;
  top:-25vh;
  left:70%;
  opacity:0;
  transition: all 0.7s ease;
}
#top-kris:hover{
  opacity:1;
}
/* this is for the site map */
.indented {
  text-decoration: none;
  text-indent: 20px;
}


/*separate thing for the graphics scroll thing so i can change the bg without worrying about the other scroll blocks*/
.graphics-scroll-list{
  background: black;
  border: 5px solid #217500;
  width:300px;
  height:200px;
  padding:0px 15px 20px 15px;
  overflow: auto;
  margin:auto;
}

.black{
  color:white;
  background-color:black;
  border:1px solid white;
}
.gray{
  color:white;
  background-color:gray;
  border:1px solid white;
}
.white{
  color:black;
  background-color: white;
  border:1px solid black;
}
/*art section*/
.art img{
  object-fit: contain;
  width:75%;
}
#2dart{
  display:flex;
}
.tablinks{
  background:black;
  border: 1px solid #bfec0e;
  color:#bfec0e;
  width:100%;
  font-family: "Jersey 15";;
  height:30px;
  font-size:20px;
}
.tablinks:hover{
  background:#d31717;
  color:black;
  border: 2px solid black;
}
.tablinks:active{
  background:bfec0e;
  color:black;
  border: 2px solid black;
}