html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Courier New", Courier, monospace;
}

body {
  background-image: url("../assets/backgrounds/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  z-index: 10;
}

.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,0.05) 0%,
      rgba(0,0,0,0.15) 70%,
      rgba(0,0,0,0.55) 100%
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 1px,
      rgba(0,0,0,0.12) 2px,
      rgba(0,0,0,0.12) 4px
    );
  mix-blend-mode: screen;
  opacity: 0.35;
  animation: crtFlicker 0.18s infinite;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  box-shadow:
    inset 0 0 80px rgba(0,255,0,0.18),
    inset 0 0 180px rgba(0,0,0,0.75);
}

@keyframes crtFlicker {
  0%   { opacity: 0.30; }
  50%  { opacity: 0.38; }
  100% { opacity: 0.32; }
}