.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 1;
}

.crt-off {
  display: none;
}

.crt-rgb,
.crt-scan,
.crt-bloom {
  position: absolute;
  inset: 0;
}

.crt-rgb {
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255, 60, 60, 0.12), transparent 54%),
    radial-gradient(circle at 50% 50%, rgba(60, 255, 60, 0.12), transparent 54%),
    radial-gradient(circle at 80% 50%, rgba(80, 80, 255, 0.12), transparent 54%);
  background-size: 8px 8px;
  mix-blend-mode: overlay;
}

.crt-scan {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 5px,
    rgba(0, 0, 0, 0.16) 6px,
    rgba(0, 0, 0, 0.16) 7px
  );
  mix-blend-mode: multiply;
}

.crt-bloom {
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.52);
}

.crt-light {
  opacity: 0.18;
}

.crt-medium {
  opacity: 0.26;
}

.crt-heavy {
  opacity: 0.42;
}
