img{
  max-width:100%;
}
:root {
 --lime: #bfec0e;
 --green: #5bb104;
 --red: #d31717;
 --darkgreen: #217500;
}
body {
  background-color: black;
  color: #5bb104;
  font-size: 18px;
  font-family: "Jersey 15";;
  text-align: left;
}
.jersey-15-regular {
  font-family: "Jersey 15", sans-serif;
  font-weight: 400;
  font-style: normal;
}
strong{
  color: var(--lime);
  font-size:20px ;
}
a{
color: var(--lime);
}
a:hover{
  color: var(--red);
}
.container{
  display:grid;
  grid-template-columns: 20% 60% 20%;
  max-width:55%;
  margin:auto;
  border: 30px solid;
  border-image: url("https://file.garden/aIJW6kKjWXYbh8q9/Illustration.png") 50 stretch;
  margin: auto;
}
.main-content{
  border:2px solid var(--darkgreen);
  padding:10px;
  max-height:65vh;
  overflow:auto;
}
.nav{
   border: 2px solid var(--darkgreen);
   padding: 5px;
}
.extra{
  border:2px solid var(--darkgreen);
  padding:5px;
  display:flex;
  flex-direction:column;
  text-align:center;
}
.extra img{
  width: 100px;
}
.stamp-hoard{
  display:flex;
  justify-content: center;
  grid-row: 2;
  grid-column: 1 /span 4;
  overflow-x:auto;
  padding:5px;
  border:2px solid var(--darkgreen);
}
.stamp-hoard img{
  width:100px;
  margin:auto;
}

.box{
  border: 2px solid var(--green); 
  padding:10px;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
  height:5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: black;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--lime);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--red);
}

/*mobile support*/
@media only screen and (max-width: 600px){
 .nav{ grid-area: 1 /span 4;}
 .main-content{ grid-area:2 /span 4;}
 .extra{grid-area:3 /span 4;}
 .container{max-width:90%;}
}
@media only screen and (min-width: 600px) and (max-width:1000px) {
  .container{max-width:90%;}
}