:root {
  --color-screen: #000000;
  --color-panel: rgba(0, 0, 128, 0.94);
  --color-border: #ffffff;
  --color-text: #ffffff;
  --color-accent: #ffff00;
  --color-selected-bg: #ff0000;
  --color-selected-text: #000000;
  --panel-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.12);
}

@keyframes rolling-scanlines {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 200%;
  }
}

body {
  background-color: var(--color-screen);
  background-image: url("/assets/images/header.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-text);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: hidden;
  transform: perspective(1000px) scale(1.02);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(0, 0, 0, 0.8) 3px,
    rgba(0, 0, 0, 0) 6px
  );
  background-size: 100% 6px;
  opacity: 0.3;
  z-index: 9998;
  transition: opacity 180ms ease, background-image 180ms ease;
  animation: rolling-scanlines 60s linear infinite;
}

body[data-scanline-enabled="false"]::before {
  opacity: 0;
  animation: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, transparent 40%, rgba(0, 0, 0, 0.5) 100%);
  z-index: 9999;
  transition: opacity 180ms ease, background 180ms ease;
}

body.secret-revealed {
  background-image: none;
}

body.secret-revealed::before,
body.secret-revealed::after {
  opacity: 0;
}

@media (max-width: 900px) and (orientation: portrait), (max-width: 720px) {
  body {
    display: block;
    overflow-y: auto;
    transform: none;
  }
}