body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000000;
}
canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

@keyframes crt-flicker {
  0%, 89%, 91%, 93%, 95%, 100% { opacity: 1; }
  90%  { opacity: 0.96; }
  92%  { opacity: 0.98; }
  94%  { opacity: 0.95; }
}

.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 15;
  animation: crt-flicker 9s infinite;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent            0px,
      transparent            2px,
      rgba(0, 0, 0, 0.18)   2px,
      rgba(0, 0, 0, 0.18)   4px
    );
}

.crt-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

.crt-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(57, 255, 20, 0.025);
  mix-blend-mode: screen;
}