:root{
  --bg:#000;
  --fg:#b8ffb8;
  --glow:rgba(120,255,120,.12);
  --flicker:.985;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  height:100%;
}

body{
  background:var(--bg);
  color:var(--fg);
  font:18px/1.55 "IBM Plex Mono","SFMono-Regular",Consolas,Menlo,monospace;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  animation:crt-flicker 6s infinite steps(1);
}

.terminal{
  width:min(760px,92vw);
  min-height:280px;
}

pre{
  margin:0;
  white-space:pre-wrap;
  text-shadow:0 0 8px var(--glow);
}

.cursor{
  display:inline-block;
  width:.65em;
  height:1.08em;
  background:var(--fg);
  vertical-align:-0.15em;
  animation:blink 1s steps(1) infinite;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.018) 0,
    rgba(255,255,255,.018) 1px,
    transparent 2px,
    transparent 4px
  );
  opacity:.08;
}

@keyframes blink{
  50%{opacity:0}
}

@keyframes crt-flicker{
  0%,100%{filter:brightness(1)}
  37%{filter:brightness(.985)}
  73%{filter:brightness(1.015)}
}

@media(max-width:700px){
  body{
    align-items:flex-start;
    padding:22px 16px;
  }

  .terminal{
    width:100%;
  }

  pre{
    font-size:15px;
  }
}