body {
  margin: 0;
  background-image: url("/main/slice.png");
  background-position: center;
  background-repeat: repeat;
  background-attachment: fixed;
  image-rendering: crisp-edges;
}
p {
  color: black;
  margin: 0;
  user-select: none;
}
img {
  user-select: none;
}
br {
  user-select: none;
}
button {
  padding: 2px;
  background-color: #C0C0C0;
  border: 2px outset;
  margin: 2px;
  cursor: pointer;
  flex-basis: 100%
}
button:hover {
  background-color: #ffffff;
  border: 2px inset;
}
#white, #title {
  color: white;
  user-select: none;
}
#space {
  display: flex;
  justify-content: space-between;
}
#purp {
  color: purple;
  text-decoration: underline;
  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: #C0C0C0;
  border: 2px outset;
  padding: 2px;
  width: min-content;
  margin: 5px;
  box-shadow: -5px 5px 0 rgba(0, 0, 0, 0.5);
  animation-duration: 1s;
  animation-name: stamp;
  cursor: pointer;
}
#window:hover {
  transform: skew(2deg);
}
#bigwindow {
  display: flex;
  flex-direction: column;
  background-color: #C0C0C0;
  border: 2px outset;
  padding: 2px;
  width: min-content;
  margin: 5px;
}
#windowtop {
  display: flex;
  align-items: center;
  background-image: linear-gradient(to right, #000080 , #2a7fff);
  padding: 1px;
  justify-content: space-between;
}
#windowinsides {
  background-color: #C0C0C0;
  border: 2px inset;
  margin: 2px;
  width: min-content;
  width: 45vw;
  height: 45vw;
  max-height: 95vh;
  max-width: 95vw;
}
#windowprev {
  background-color: #C0C0C0;
  border: 2px inset;
  margin: 2px;
  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 {
  width: 45vw;
  height: 45vw;
  max-height: 95vh;
  max-width: 95vw;
  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 {
    width: 85vw;
    height: 85vw;
    max-height: 95vh;
    max-width: 95vw;
  }
  #windowinsides {
    width: 85vw;
    height: 85vw;
    max-height: 95vh;
    max-width: 95vw;
  }
}

@keyframes fade {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes stamp {
  from {box-shadow: -5px 15px 0 rgba(0, 0, 0, 0.5); transform: translateY(-10px); opacity: 0;}
  to {box-shadow: -5px 5px 0 rgba(0, 0, 0, 0.5); transform: translateY(0px);}
}