body {
  margin: 0;
  background-color: #000000;
  background-image: url("/main/huh.png");
  background-position: center;
  background-repeat: repeat;
  background-attachment: fixed;
  image-rendering: crisp-edges;
}
p {
  color: white;
  margin: 0;
  user-select: none;
  font-family: "outfit", sans-serif;
}
img {
  user-select: none;
}
br {
  user-select: none;
}
button {
  padding: 1px;
  background-color: #7fa100;
  border: 5px solid;
  border-color: #5b7300;
  margin: 1px;
  cursor: pointer;
  flex-basis: 100%
}
button:hover {
  background-color: #5b7300;
  border: 5px solid;
  border-color: #5b7300;
}

::-webkit-scrollbar-track {
  border-left: 5px;
  background-color: #7fa100;
  border: 5px solid;
  border-color: #7fa100;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background: #5b7300;
}
::-webkit-scrollbar-thumb:hover {
  background: #5b7300;
}

#white, #title {
  color: white;
  user-select: none;
}
#space {
  display: flex;
  justify-content: space-between;
}
#purp {
  color: #000000;
  user-select: none;
}
#clump {
  display: flex;
  flex-wrap: wrap;
}
#set {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#window, #windownoanim {
  display: flex;
  flex-direction: column;
  background-color: #7fa100;
  border: 5px solid;
  border-color: #5b7300;
  padding: 2px;
  width: min-content;
  margin: 5px;
  box-shadow: 0 5px 0 #5b7300;
  animation-duration: 1s;
  animation-name: stamp;
  cursor: pointer;
}
#window:hover {
  transform: skew(2deg);
}
#bigwindow {
  display: flex;
  flex-direction: column;
  background-color: #7fa100;
  border: 5px solid;
  border-color: #5b7300;
  padding: 2px;
  width: min-content;
  margin: 5px;
  max-height: 95vh;
  max-width: 95vw;
  overflow-y: auto;
}
#windowtop {
  display: flex;
  align-items: center;
  background-color: #5b7300;
  padding: 1px;
  margin: 1px;
  justify-content: center;
}
#windowinsides {
  background-color: #5b7300;
  border: 5px solid;
  border-color: #5b7300;
  margin: 1px;
  max-height: 85vh;
  max-width: 85vw;
}
#windowprev {
  background-color: #C0C0C0;
  border: 5px solid;
  border-color: #5b7300;
  margin: 1px;
  width: min-content;
  height: 250px;
}
#smallbutton {
  width: 15px;
  height: 15px;
  margin: 1px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  background-color: #C0C0C0;
  border: 2px outset;
  user-select: none;
}
#imgprev {
  width: 250px;
}
#imgfocus {
  max-height: 85vh;
  max-width: 85vw;
  animation-duration: 0.5s;
  animation-name: fade;
}
#focus {
  position: fixed;
  top: 0;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.75);
  z-index: 100;
  width: 100vw;
  height: 100vh;
  display: none;
  animation-duration: 0.5s;
  animation-name: fade;
}

@media (max-width: 950px){
  #imgfocus {
    max-height: 85vh;
    max-width: 85vw;
  }
  #windowinsides {
    max-height: 85vh;
    max-width: 85vw;
  }
}

@keyframes fade {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes stamp {
  from {box-shadow: 0 0 0 #5b7300; transform: translateY(5px); opacity: 0;}
  to {box-shadow: 0 5px 0 #5b7300; transform: translateY(0px);}
}