@font-face {
  font-family: ULTRAFONT;
  src: url(../fonts/VCR_OSD_MONO.ttf);
}
@keyframes spinny {
  0% {
    transform: perspective(60px) rotateX(0deg);
  }
  25% {
    transform: perspective(60px) rotateX(90deg);
  }
  50% {
    transform: perspective(60px) rotateX(180deg);
  }
  75% {
    transform: perspective(60px) rotateX(270deg);
  }
  100% {
    transform: perspective(60px) rotateX(360deg);
  }
}

@keyframes out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  8% {
    transform: scale(0.85) rotate(5deg);
    filter: grayscale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(0.83) rotate(5.1deg);
    filter: grayscale(1);
    opacity: 0.25;
  }
  75% {
    transform: scale(1) rotate(0deg) translateY(300px);
    filter: grayscale(0);
    opacity: 0;
  }
  75.01% {
    transform: scale(1) scaleY(0) rotate(0deg) translateY(-150px);
    filter: grayscale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1) scaleY(1) rotate(0deg) translateY(0px);
    filter: grayscale(0);
    opacity: 1;
  }
}

#titlebar {
  height: 16px;
  background-image: repeating-linear-gradient(
    to bottom,
    #992222,
    #802222,
    #902222,
    #992222
  );
  border: 2px solid #511;
  border-radius: 6px 6px 0px 0px;
  color: white;
  padding: 4px;
  padding-left: 24px;
  text-shadow: 2px 2px 0px #000;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#main {
  background-color: #2a2a2a;
  border: 4px double #000;
  border-top: 1.5px solid #000;
  padding: 4px;
  color: white;
  height: 259px;
  text-align: center;
  user-select: none;
}
#completionState {
  transition-duration: 200ms;
  transition-timing-function: linear;
}
.speen {
  animation: spinny 0.6s linear infinite forwards;
}
.useless {
  display: inline-block;
  position: fixed;
  margin-right: 4px;
  font-weight: 900;
  padding: 0px;
  color: #0000;
  text-shadow: 0px -3px 0px #511;
  background-color: #922;
  border: 2px solid #511;
  border-radius: 6px;
  width: 18px;
  height: 18px;
}
.useful {
  font-family: "ULTRAFONT", "Courier New", Courier, monospace;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 7px 13px;
  color: white;
  height: 32px;
  background-image: linear-gradient(
    to bottom,
    #7b7b7b,
    #5b5b5b 3px,
    #3a3a3a,
    #1b1b1b 26px,
    #5b5b5b 48px
  );
}
.useful:hover {
  font-family: "ULTRAFONT", "Courier New", Courier, monospace;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 7px 13px;
  color: white;
  height: 32px;
  background-image: linear-gradient(
    to bottom,
    #ababab,
    #6b6b6b 3px,
    #4a4a4a,
    #1b1b1b 26px,
    #6b6b6b 48px
  );
}
.useful:disabled,
.useful:hover:active {
  font-family: "ULTRAFONT", "Courier New", Courier, monospace;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 7px 13px;
  color: #999;
  height: 32px;
  background-image: linear-gradient(
    to bottom,
    #1b1b1b,
    #3a3a3a 3px,
    #1b1b1b,
    #3a3a3a 26px,
    #7b7b7b 48px
  );
}
.reroll {
  animation: out 1s linear forwards;
}
.icon {
  display: inline-block;
  position: fixed;
  margin: none;
  left: 4px;
  top: 6px;
  font-weight: 900;
  text-shadow: none;
  color: #511;
  transform: rotate(270deg) scaleX(0.8);
}
body {
  background-color: #0000;
  color: #fff8;
  margin: 0px;
  font-family: "ULTRAFONT", "Courier New", Courier, monospace;
  text-transform: uppercase;
  overflow: hidden;
}
img {
  user-select: none;
  filter: drop-shadow(3px 3px 0px #522) drop-shadow(-3px -3px 0px #922);
}