:root {
  --crt-scan-opacity: .08;
  --crt-scan-pitch: 4px;
  --crt-mask-opacity: .055;
  --crt-mask-pitch: 3px;
  --crt-vignette: .15;
  --crt-glass: .08;
  --crt-bleed: .6px;
  --crt-fringe: .08px;
  --crt-flicker: .05;
}

#crt {
  position: fixed;
  inset: 0;
  z-index: 2000000;
  pointer-events: none;
  overflow: hidden;
  --crt-scan-flicker-multiplier: 1;
  background-image:
    radial-gradient(130% 80% at 50% -12%, rgba(255, 255, 255, var(--crt-glass)) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(104deg, rgba(255, 255, 255, calc(var(--crt-glass) * .75)) 0%, rgba(255, 255, 255, 0) 30%),
    repeating-linear-gradient(
      to right,
      rgba(255, 0, 0, var(--crt-mask-opacity)) 0,
      rgba(255, 0, 0, var(--crt-mask-opacity)) 1px,
      rgba(0, 255, 0, var(--crt-mask-opacity)) 1px,
      rgba(0, 255, 0, var(--crt-mask-opacity)) 2px,
      rgba(0, 96, 255, var(--crt-mask-opacity)) 2px,
      rgba(0, 96, 255, var(--crt-mask-opacity)) var(--crt-mask-pitch)
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, calc(var(--crt-scan-opacity) * var(--crt-scan-flicker-multiplier))) 0,
      rgba(0, 0, 0, calc(var(--crt-scan-opacity) * var(--crt-scan-flicker-multiplier))) 1px,
      rgba(0, 0, 0, 0) 1px,
      rgba(0, 0, 0, 0) var(--crt-scan-pitch)
    );
  box-shadow:
    inset 0 0 140px rgba(0, 0, 0, var(--crt-vignette)),
    inset 0 0 46px rgba(0, 0, 0, calc(var(--crt-vignette) * .45));
  animation: crt-flicker .14s steps(2, end) infinite;
}

@keyframes crt-flicker {
  0% { --crt-scan-flicker-multiplier: 1; }
  50% { --crt-scan-flicker-multiplier: calc(1 - var(--crt-flicker)); }
  100% { --crt-scan-flicker-multiplier: 1; }
}

html:not(.crt-off) body {
  text-shadow:
    var(--crt-fringe) 0 0 rgba(255, 64, 64, .26),
    calc(var(--crt-fringe) * -1) 0 0 rgba(64, 216, 255, .26),
    0 0 var(--crt-bleed) currentColor;
}

html:not(.crt-off) .icon img,
html:not(.crt-off) .titlebar img,
html:not(.crt-off) .taskbtn img,
html:not(.crt-off) .mitem img,
html:not(.crt-off) #startbtn img {
  filter: drop-shadow(0 0 var(--crt-bleed) rgba(255, 255, 255, .5));
}

html.crt-off #crt {
  display: none;
}

@media (max-width: 560px) {
  :root {
    --crt-scan-opacity: .13;
    --crt-scan-pitch: 4px;
    --crt-mask-opacity: .03;
    --crt-vignette: .3;
  }
}

@media (prefers-reduced-motion: reduce) {
  #crt { animation: none; }
}