@font-face {
    font-family:"Space Mono";
    src:url("fonts/SpaceMono-Bold.woff2") format("woff2"),url("fonts/SpaceMono-Bold.woff") format("woff"),url("fonts/SpaceMono-Bold.otf") format("opentype");
    font-style:normal;font-weight:bold;
}
@font-face {
    font-family:"Space Mono";
    src:url("fonts/SpaceMono-Regular.woff2") format("woff2"),url("fonts/SpaceMono-Regular.woff") format("woff"),url("fonts/SpaceMono-Regular.otf") format("opentype");
    font-style:normal;font-weight:normal;
}

html{
  margin: 0;
  padding: 0;
}
html, body{min-height:100%;}
body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: #FFFFFF;
  font-family: "Space Mono", monospace;
  font-size: 14px;
  box-sizing: border-box;
  background: #111111;
  overflow: hidden;
  touch-action: pan-x pan-y;
}
#app{
  padding: 24px;
  height: 100dvh;
  box-sizing: border-box;
  overflow: hidden;
}
main{
  border: 1px solid #FFFFFF;
  border-radius: 4px;
  height: 100%;
  box-sizing: border-box;
  padding: 24px;
  overflow: auto;
  background-image: radial-gradient(hsl(0, 0%, 15%), hsl(0, 0%, 8%));
  background-repeat: no-repeat;
  background-size: cover;
  animation: revealApp 750ms ease forwards;
}
@keyframes revealApp {
  0% {
    transform: scale(0,0);
    border-radius: 100%;
  }
  25% {
    transform: scale(.25,0);
  }
  50% {
    transform: scale(.75,.75);
    border-radius: 8px;
  }
  75% {
    transform: scale(1,.85);
  }
  100% {
    transform: scale(1,1);
    border-radius: 4px;
  }
}
@media screen and (max-width: 640px){
  #app,
  main{
    padding: 12px;
  }
}
a {
  color: #FFFFFF;
}
#logo {
  padding-bottom: 24px;
  overflow: hidden;
  cursor: pointer;
}
/*#logo pre {
  font-size: 10px;
  text-shadow: rgba(255,255,255,.75) 0 0 6px;
  margin: 0;
}*/
#logo img{
  width: min(65vw, 200px);
  clip-path: inset(0 0 100% 0);
  animation: crtFlicker 150ms infinite, revealLogo 500ms ease-out forwards 750ms;
}
/*@media screen and (max-width: 640px){
  #logo pre{
    font-size: 8px;
  }
}
@media screen and (max-width: 320px){
  #logo pre{
    font-size: 6px;
  }
}*/
@keyframes revealLogo {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
#noise,
#overlay{
  pointer-events: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#noise {
  z-index: 10;
  opacity: .5;
  mix-blend-mode: overlay;
  filter: contrast(1.15) brightness(2.5);
  transform: translate3d(0, 0, 0);
  background: url(images/noise-small.gif);
  background-size: 400px;
}

#overlay {
  background:
  repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0) 100%);
  background-size: auto 3px;
  z-index: 1;
  animation: crtFlicker 150ms infinite;
  mix-blend-mode: darken;
}
#overlay::before {
  content: "";
  pointer-events: none;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0.66;
  background-repeat: no-repeat;
  background-image: linear-gradient(
    0deg,
    transparent 0%,
    rgba(32, 32, 32, 0.2) 2%,
    rgba(64, 64, 64, 0.8) 5%,
    rgba(32, 32, 32, 0.2) 6%,
    transparent 100%
  );
  background-position-y: var(--scan-pos, 0vh);
}
#terminal {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  white-space: pre;
  /*FireFox*/
  scrollbar-width: none;
  /*IE10+*/
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-x: hidden;
}
#terminal::-webkit-scrollbar {
  /*Chrome, Safari, Edge*/
  display: none;
}
.page-title{
  font-size: 15px;
  white-space: break-spaces;
  font-weight: bold;
}
.line.asciiImage{
  font-size: 8px;
  line-height: 8px !important;
  white-space: break-spaces;
}
@media screen and (max-width: 640px){
  .line.asciiImage{
    font-size: 6px;
    line-height: 6px !important;
  }
}
@media screen and (max-width: 360px){
  .line.asciiImage{
    font-size: 5px;
    line-height: 5px !important;
  }
}
.line {
  margin: 0;
  line-height: 1.5em;
  color: #FFFFFF;
  text-shadow: rgba(255,255,255,.75) 0 0 6px;
  transition: color 100ms ease, transform 100ms ease;
  white-space: pre-line;
}
.asciiImage + .line:not(.asciiImage){
    margin-top: 1em;
    margin-bottom: 2em;
}
.line.error {
  color: #ff4c3d;
  text-shadow: rgba(255,0,0,.75) 0 0 6px;
}
.option {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.option:hover,
.option:focus {
  text-decoration: underline;
  outline: none;
}
#cursor {
  display: inline-block;
  width: 1ch;
  background: #FFFFFF;
  animation: blink 1s step-end infinite;
  vertical-align: middle;
  height: 1em;
  line-height: 1.5em;
}
@keyframes blink {
  0%, 100% { background: #FFFFFF; }
  50% { background: transparent; }
}
.line,
.page-title,
#logo pre{
  animation: crtFlicker 150ms infinite;
}
@keyframes crtFlicker {
  0%   { opacity: 1; filter: brightness(1); }
  25%  { opacity: 0.94; filter: brightness(1.02); }
  50%  { opacity: 1; filter: brightness(1); }
  75%  { opacity: 0.98; filter: brightness(1.01); }
  100% { opacity: 1; filter: brightness(1); }
}
/* Hide the native input appearance */
#userInput {
  border: none;
  outline: none;
  background: none;
  font: inherit;
  color: inherit;
  caret-color: transparent;
}
.line:has(input) div:last-of-type{
  display: inline-block;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
/* Hide scanline and reduce noise opacity for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  #overlay::before {
    display: none;
    width: 0;
    height: 0;
  }
  #noise{
    opacity: .25;
  }
}