body { filter: brightness(1.01) contrast(1.015) saturate(1.02); }

.crt-effect {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-crt);
  box-shadow: 0 0 0 30px #000;
  overflow: hidden;
}
.crt-effect::before {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: .7;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.15), rgba(0,0,0,.15) 1px,
    transparent 1px, transparent 2px
  );
}

.crt-scanline {
  position: fixed;
  left: 0;
  width: 100%;
  height: .6px;
  top: -20px;
  z-index: calc(var(--z-crt) + 1);
  background: linear-gradient(180deg,
    rgba(255,255,255,.01),
    rgba(255,255,255,.2) 50%,
    rgba(255,255,255,.01));
  box-shadow: 0 0 2px rgba(255,255,255,.15);
  mix-blend-mode: screen;
  opacity: .3;
  pointer-events: none;
}

.crt-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: calc(var(--z-crt) + 5);
  background: radial-gradient(ellipse at center, transparent 70%, rgba(0,0,0,.08) 100%);
  mix-blend-mode: multiply;
}

.crt-flicker {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: calc(var(--z-crt) + 3);
  animation: crtFlicker 10s infinite;
  background: transparent;
  mix-blend-mode: overlay;
}
.crt-flicker::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.01);
  animation: flicker 15s infinite;
  opacity: 0;
  mix-blend-mode: normal;
  pointer-events: none;
}

.crt-aberration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: calc(var(--z-crt) + 7);
  mix-blend-mode: screen;
  opacity: .05;
}
.crt-aberration::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,0,0,.08);
  mix-blend-mode: screen;
  transform: translateX(-1.2px);
}
.crt-aberration::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,255,.08);
  mix-blend-mode: screen;
  animation: chromShift 3s ease-in-out infinite;
}

.crt-noise {
  position: fixed;
  z-index: calc(var(--z-crt) + 6);
  pointer-events: none;
  top: -500px; left: -500px;
  width: calc(100% + 1000px);
  height: calc(100% + 1000px);
  opacity: .04;
  animation: noise .5s steps(2) infinite;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAJklEQVRo3u3BMQEAAADCoPVP7WsIoAAAAAAAAAAAAAAAAAAAeAMBxAABKkRDSQAAAABJRU5ErkJggg==");
  background-repeat: repeat;
}

.crt-persistence {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: calc(var(--z-crt) + 8);
  background: rgba(150,255,150,.01);
  mix-blend-mode: screen;
}

body.crt-off .crt-effect,
body.crt-off .crt-scanline,
body.crt-off .crt-vignette,
body.crt-off .crt-flicker,
body.crt-off .crt-aberration,
body.crt-off .crt-noise,
body.crt-off .crt-persistence { display: none; }

@keyframes crtFlicker {
  0%   { opacity: 1; }
  1%   { opacity: .985; }
  2%   { opacity: .995; }
  3%   { opacity: .99; }
  4%   { opacity: 1; }
  30%  { opacity: 1; }
  31%  { opacity: .985; }
  32%  { opacity: .99; }
  33%  { opacity: 1; }
  80%  { opacity: 1; }
  81%  { opacity: .99; }
  82%  { opacity: .98; }
  83%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes flicker {
  0%, 100% { opacity: 0; }
  5%  { opacity: .01; }
  10% { opacity: 0; }
  70% { opacity: .01; }
  80% { opacity: 0; }
  90% { opacity: .01; }
}
@keyframes chromShift {
  0%   { transform: translateX(1.2px); }
  25%  { transform: translate(1.08px, .12px); }
  50%  { transform: translateX(1.2px); }
  75%  { transform: translate(1.32px, -.12px); }
  100% { transform: translateX(1.2px); }
}
@keyframes noise {
  0%, 100% { background-position: 0 0; }
  20%  { background-position: 20% 20%; }
  40%  { background-position: -20% -30%; }
  60%  { background-position: 30% 10%; }
  80%  { background-position: -30% 30%; }
}