@keyframes waves {
  0% {
    opacity: 0.2;
  }
  5% {
    opacity: 0.5;
  }
  15% {
    opacity: 0.3;
  }
  18% {
    opacity: 0.1;
  }
  20% {
    opacity: 0.3;
  }
  100% {
    background-position: 30% 30%;
  }
}
@-webkit-keyframes waves {
  0% {
    opacity: 0.2;
  }
  5% {
    opacity: 0.5;
  }
  15% {
    opacity: 0.3;
  }
  18% {
    opacity: 0.1;
  }
  20% {
    opacity: 0.3;
  }
  100% {
    background-position: 30% 30%;
  }
}
@keyframes flicker {
  0% {
    opacity: 0.3;
  }
  20% {
    opacity: 0.15;
  }
  40% {
    opacity: 0.4;
  }
  45% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.99;
  }
  70% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.35;
  }
  80% {
    opacity: 0.9;
  }
  85% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.7;
  }
  95% {
    opacity: 0.35;
  }
  100% {
    opacity: 0.2;
  }
}
@-webkit-keyframes flicker {
  0% {
    opacity: 0.3;
  }
  20% {
    opacity: 0.15;
  }
  40% {
    opacity: 0.4;
  }
  45% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.99;
  }
  70% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.35;
  }
  80% {
    opacity: 0.9;
  }
  85% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.7;
  }
  95% {
    opacity: 0.35;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes textShadow {
  0% {
    text-shadow: 0.4px 0 1px rgba(0, 30, 255, 0.5), -0.4px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.5px 0 1px rgba(0, 30, 255, 0.5), -3.5px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6px 0 1px rgba(0, 30, 255, 0.5), -1.6px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.2px 0 1px rgba(0, 30, 255, 0.5), -2.2px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.1px 0 1px rgba(0, 30, 255, 0.5), -0.1px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.4px 0 1px rgba(0, 30, 255, 0.5), -2.4px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.2px 0 1px rgba(0, 30, 255, 0.5), -2.2px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8px 0 1px rgba(0, 30, 255, 0.5), -2.8px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.1px 0 1px rgba(0, 30, 255, 0.5), -0.1px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.1px 0 1px rgba(0, 30, 255, 0.5), -0.1px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.5px 0 1px rgba(0, 30, 255, 0.5), -3.5px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.2px 0 1px rgba(0, 30, 255, 0.5), -2.2px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.5px 0 1px rgba(0, 30, 255, 0.5), -2.5px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
}
@-webkit-keyframes textShadow {
  0% {
    text-shadow: 0.4px 0 1px rgba(0, 30, 255, 0.5), -0.4px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.5px 0 1px rgba(0, 30, 255, 0.5), -3.5px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6px 0 1px rgba(0, 30, 255, 0.5), -1.6px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.2px 0 1px rgba(0, 30, 255, 0.5), -2.2px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.1px 0 1px rgba(0, 30, 255, 0.5), -0.1px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.4px 0 1px rgba(0, 30, 255, 0.5), -2.4px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.2px 0 1px rgba(0, 30, 255, 0.5), -2.2px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8px 0 1px rgba(0, 30, 255, 0.5), -2.8px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.1px 0 1px rgba(0, 30, 255, 0.5), -0.1px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.1px 0 1px rgba(0, 30, 255, 0.5), -0.1px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.5px 0 1px rgba(0, 30, 255, 0.5), -3.5px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.2px 0 1px rgba(0, 30, 255, 0.5), -2.2px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.5px 0 1px rgba(0, 30, 255, 0.5), -2.5px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-webkit-keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes cursor {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes cursor {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes type {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: 1em solid green;
  }
  100% {
    opacity: 1;
    border: none;
  }
}
@-webkit-keyframes type {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: 1em solid green;
  }
  100% {
    opacity: 1;
    border: none;
  }
}
@keyframes timed-disappear {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    display: none;
    opacity: 0;
  }
}
@-webkit-keyframes timed-disappear {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    display: none;
    opacity: 0;
  }
}
@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0;
  }
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
@-webkit-keyframes blinker {
  50% {
    opacity: 0;
  }
}
@font-face {
  font-family: "techo";
  src: url("/assets/fonts/Share_Tech_Mono/ShareTechMono-Regular.ttf") format("truetype");
  src: url("/assets/fonts/Share_Tech_Mono/ShareTechMono-Regular.woff") format("woff");
}
* {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-family: "Share Tech Mono", monospace;
  font-size: 1.6vh;
}

@media only screen and (max-width: 700px) {
  * {
    font-size: 1.3vw;
  }
}
@media only screen and (orientation: portrait) {
  .orientation {
    display: block !important;
  }
}
@media only screen and (orientation: landscape) {
  .orientation {
    display: none !important;
  }
}
.orientation {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: fixed;
  background: black;
  color: greenyellow;
  display: none;
}

header {
  -webkit-animation: textShadow 6s infinite;
  animation: textShadow 6s infinite;
}

body {
  background: url("../assets/images/greenscreen.png") no-repeat fixed center center;
  overflow: hidden;
  background-size: cover;
  height: 100%;
  width: 100%;
  color: greenyellow;
  z-index: 0;
}

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: textShadow 6s infinite;
}
footer a, footer a:visited {
  text-decoration: none;
  color: greenyellow;
}
footer a:hover {
  color: white;
}

.centered-h {
  width: 50%;
  text-align: center;
  margin: auto;
}

.centered-2 {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.screen {
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 4px, rgba(0, 0, 0, 0.3) 4px, rgba(0, 0, 0, 0.3) 8px);
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-size: 200% 200%;
  -webkit-animation: waves 20s linear infinite;
  -webkit-animation-direction: reverse;
  animation: waves 20s linear infinite;
  animation-direction: reverse;
}

.flicker::before {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(57, 255, 55, 0.11), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: -1;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
  -webkit-animation: flicker 2s infinite;
  animation: flicker 2s infinite;
}

.opening-text p {
  border-right: 1.6vh solid green;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  opacity: 0;
}

.gameTopText {
  width: 50%;
  margin-left: 2vw;
  margin-top: 2vw;
}
.gameTopText p {
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  opacity: 0;
}

.gameScreen {
  margin: 1em;
  height: fit-content;
  display: grid;
  text-align: justify;
  grid-template-columns: 0.3fr 2.2fr 0.1fr 0.3fr 2.2fr 0.75fr;
}
.gameScreen .gamePcBox {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.piece {
  -webkit-animation: textShadow 6s infinite;
  animation: textShadow 6s infinite;
  display: inline;
}
.piece span:hover {
  background-color: #9ffc0a;
  color: black;
}

.active {
  border-right: 1.8vw solid green;
  white-space: nowrap;
  overflow: hidden;
  width: 1em;
  opacity: 0;
  display: block;
  -webkit-animation: type 1.5s steps(100, end), blink 0.5s step-end infinite alternate, textShadow 6s infinite;
  animation: type 1.5s steps(100, end), blink 0.5s step-end infinite alternate, textShadow 6s infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.attemptBox {
  display: flex;
  opacity: 1;
}
.attemptBox p:after {
  border-right: 1.8vw solid green;
  width: 1em;
  opacity: 1;
}

.attempt {
  border-right: 1.8vw solid green;
  width: 1em;
  opacity: 1;
}

.sideTermBox {
  margin: 1em;
  position: relative;
}
.sideTermBox div {
  margin: 0;
  height: auto;
  display: flex;
}

.inputBox {
  position: absolute;
  bottom: 0;
  left: 0;
}

.outputBox {
  min-width: 100%;
  height: 90%;
  display: flex;
  flex-direction: column;
}

.afterActive p {
  border-right: rgba(148, 166, 182, 0);
}

.blinking {
  -webkit-animation: blinker 1s linear infinite, textShadow 6s infinite;
  animation: blinker 1s linear infinite, textShadow 6s infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.help {
  position: fixed;
  text-align: center;
  height: fit-content;
  width: fit-content;
  padding: 0.5em;
  background: black;
  box-shadow: 0.5em 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.7);
  border-radius: 0.33em;
  z-index: 2;
}
.help button {
  margin: 0.5em;
}

/*# sourceMappingURL=main.css.map */