:root {
  --show-dropdown: 0;
  --unit: 2.5vmin;
}

@keyframes hue-rotate {
  100% {
    filter: hue-rotate(2turn);
  }
}

.spotlight, .scene {
  --rainbow-reverse: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    oklch(76% 0.12 0) calc(var(--unit) * 1), 
    oklch(76% 0.12 30) calc(var(--unit) * 2), 
    oklch(76% 0.12 60) calc(var(--unit) * 3), 
    oklch(76% 0.12 90) calc(var(--unit) * 4), 
    oklch(76% 0.12 120) calc(var(--unit) * 5), 
    oklch(76% 0.12 180) calc(var(--unit) * 6), 
    oklch(76% 0.12 240) calc(var(--unit) * 7), 
    oklch(76% 0.12 300) calc(var(--unit) * 8), 
    oklch(76% 0.12 360) calc(var(--unit) * 9), 
    hsl(0 0% 0%) calc(var(--unit) * 18)); 

  --rainbow: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%), 
    hsl(0 0% 0%) calc(var(--unit) * 5),
    oklch(76% 0.12 0) calc(var(--unit) * 12), 
    oklch(76% 0.12 30) calc(var(--unit) * 13), 
    oklch(76% 0.12 60) calc(var(--unit) * 14), 
    oklch(76% 0.12 90) calc(var(--unit) * 15), 
    oklch(76% 0.12 120) calc(var(--unit) * 16), 
    oklch(76% 0.12 180) calc(var(--unit) * 17), 
    oklch(76% 0.12 240) calc(var(--unit) * 18), 
    oklch(76% 0.12 300) calc(var(--unit) * 19), 
    oklch(76% 0.12 360) calc(var(--unit) * 20));
  
  --rainbow-linear: linear-gradient(
    45deg,
    oklch(76% 0.12 0), 
    oklch(76% 0.12 30), 
    oklch(76% 0.12 60), 
    oklch(76% 0.12 90),
    oklch(76% 0.12 120),
    oklch(76% 0.12 150),
    oklch(76% 0.12 180),
    oklch(76% 0.12 210),
    oklch(76% 0.12 240),
    oklch(76% 0.12 270),
    oklch(76% 0.12 300),
    oklch(76% 0.12 330),
    oklch(76% 0.12 360) ,
    oklch(76% 0.12 30), 
    oklch(76% 0.12 60), 
    oklch(76% 0.12 90),
    oklch(76% 0.12 120),
    oklch(76% 0.12 150),
    oklch(76% 0.12 180),
    oklch(76% 0.12 210),
    oklch(76% 0.12 240),
    oklch(76% 0.12 270),
    oklch(76% 0.12 300),
    oklch(76% 0.12 330),
    oklch(76% 0.12 360));
}

.spotlight {
  --unit: 2.5vmin;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--rainbow);
  mix-blend-mode: var(--blend, overlay);
  
  animation: hue-rotate 8000ms infinite linear;
}

.scene, .scene > div {
  --unit: 5vmin;
  position: absolute;
  inset: 0;
}
.scene > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2em, 1fr));
  background: black;
  color: white;
  place-items: center;
  grid-auto-rows: 1.75em;
  font-family: system-ui, monospace;
  font-size: 8vmin;
  font-weight: 500;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--rainbow-linear);
    mix-blend-mode: multiply;
  }
}
form {
  position: absolute;
  top: 0.5rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  
  opacity: var(--show-dropdown);
}

html {
  overflow: clip;
}