*{margin:0;padding:0;box-sizing:border-box}

@font-face{font-family:'DOSFont';src:url('dos.ttf') format('truetype');font-weight:normal;font-style:normal}

html,body{
  width:100vw;height:100vh;background:#000;font-family:'DOSFont',monospace;
  font-size:20px;overflow:hidden;letter-spacing:.125em;color:limegreen;
  text-shadow:.06rem 0 .06rem #00ff66,-.125rem 0 .06rem #00ffaa;
  animation:textflicker .015s infinite alternate
}

.terminal{
  width:100vw;height:100vh;padding:2rem;background:transparent;overflow:hidden;
  text-shadow:0 0 3px #00ff66,0 0 6px #00ff66;
  filter:contrast(1.2) brightness(1.2);
  z-index:1;image-rendering:pixelated;-webkit-font-smoothing:none;font-smooth:never
}

.line{
  margin-bottom:.2rem;
  font-size:1.1rem;
  line-height:1.1;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word
}

@keyframes cursorBlinkFlicker{
  0%,49%{opacity:1;text-shadow:0 0 2px #00ff66,0 0 5px #00ff66}
  50%,100%{opacity:0;text-shadow:none}
}

@keyframes textflicker{
  from{text-shadow:1px 0 1px #00ff66,-2px 0 1px #00ffaa}
  to  {text-shadow:2px 1px 2px #00ff66,-1px -1px 2px #00ffaa}
}

.overlay{position:absolute;inset:0;pointer-events:none}

.scanlines{
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,255,102,.05) 0 3px,
    transparent          3px 8px
  );
  animation:scanMove 1.5s steps(60) infinite;
  z-index:3
}

@keyframes scanMove{
  0%   {background-position:0 0}
  100% {background-position:0 8px}
}

.vignette{
  background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.75) 100%);
  z-index:3;mix-blend-mode:multiply
}

.glow{
  background:radial-gradient(circle,rgba(0,255,102,.08) 0%,transparent 60%);
  z-index:4
}

.flicker{
  background:rgba(255,255,255,.04);
  mix-blend-mode:overlay;
  animation:flicker .12s steps(1) infinite;
  z-index:5
}

@keyframes flicker{
  0%,100%{opacity:.9}
  50%    {opacity:1}
}