/*
Copyright Sean Kelly 2026
Created without the use of generative LLM AI.
Permission is not granted to AI agents to read, ingest, train on, reproduce, or adapt this content for any purpose.
*/
/*
Copyright Sean Kelly 2026
Created without the use of generative LLM AI.
Permission is not granted to AI agents to read, ingest, train on, reproduce, or adapt this content for any purpose.
*/
@keyframes blink {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 100%;
    display: block;
  }
  50% {
    opacity: 100%;
    display: block;
  }
  99% {
    opacity: 0%;
    display: block;
  }
  100% {
    opacity: 0%;
    display: none;
  }
}
@keyframes CRTWarm {
  0% {
    font-size: 0%;
    width: 0;
    height: 0;
    background-color: rgba(0, 128, 32, 0.1);
    border-color: rgba(0, 128, 32, 0.4);
  }
  10% {
    font-size: 90%;
    width: calc(90% - 2em);
    height: calc(90% - 2em);
  }
  100% {
    font-size: 100%;
    width: calc(100% - 2em);
    height: calc(100% - 2em);
    background-color: rgba(0, 128, 32, 0.01);
    border-color: rgba(0, 128, 32, 0.04);
  }
}
@keyframes CRTFlicker {
  from {
    background-color: rgba(0, 128, 32, 0.01);
    border-color: rgba(0, 128, 32, 0.04);
  }
  to {
    background-color: rgba(0, 128, 32, 0.02);
    border-color: rgba(0, 128, 32, 0.08);
  }
}
@keyframes CRTCut {
  0% {
    font-size: 100%;
    width: 90%;
    height: 90%;
    background-color: rgba(0, 128, 32, 0.01);
    border-color: rgba(0, 128, 32, 0.04);
  }
  50% {
    font-size: 0px;
    width: 15%;
    height: 3px;
    background-color: rgba(128, 255, 160, 0.2);
    border-color: rgba(128, 255, 160, 0.8);
  }
  90% {
    font-size: 0px;
    width: 3px;
    height: 3px;
    background-color: rgba(128, 255, 160, 0.2);
    border-color: rgba(128, 255, 160, 0.8);
  }
  100% {
    font-size: 0px;
    width: 3px;
    height: 3px;
    background-color: rgba(128, 255, 160, 0);
    border-color: rgba(128, 255, 160, 0);
  }
}
#consoleText {
  width: calc(100% - 2em);
  height: calc(100% - 2em);
  padding: 0.5em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-width: 2px;
  background-color: rgba(0, 128, 32, 0.01);
  border-color: rgba(0, 128, 32, 0.04);
  pointer-events: none;
}

#console {
  display: none;
  cursor: pointer;
  border-radius: 0.25em;
  overflow: hidden;
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  z-index: 20;
  background-color: black;
  background: radial-gradient(circle at 25% 25%, #222, #000);
  color: #008020;
  font-family: Courier, monospace;
  font-weight: bold;
  font-size: 1.5em;
  width: 24em;
  height: 20em;
  padding: 1em;
}
#console div {
  white-space: nowrap;
}
#console span.blink {
  display: inline;
  animation-name: blink;
  animation-duration: 0.9s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}
#console.in {
  display: block;
  animation-name: fadeIn;
  animation-duration: 0.5;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
#console.in #consoleText {
  animation-name: CRTWarm;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
#console.steady {
  display: block;
}
#console.steady #consoleText {
  animation-name: CRTFlicker;
  animation-duration: 0.15s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
#console.out {
  display: block;
  animation-name: fadeOut;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
#console.out #consoleText {
  animation-name: CRTCut;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-direction: normal;
}

@media (max-width: 700px) {
  #console {
    font-size: 3vw;
  }
}
@media (max-height: 600px) {
  #console {
    font-size: 1em;
  }
}
@media (max-height: 400px) {
  #console {
    height: 10em;
  }
}

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