/* Synthwave theme on top of Pico CSS (https://picocss.com).
   Tweak the variables below to restyle the whole site. */

:root {
  --sw-bg-top: #0d0221;
  --sw-bg-bottom: #2b0b3f;
  --sw-pink: #ff2a6d;
  --sw-cyan: #05d9e8;
  --sw-purple: #d300c5;
  --sw-text: #f5e6ff;

  --pico-font-family-sans-serif: "Orbitron", system-ui, sans-serif;
}

[data-theme="dark"] {
  --pico-background-color: var(--sw-bg-top);
  --pico-color: var(--sw-text);
  --pico-h1-color: var(--sw-text);

  --pico-primary: var(--sw-pink);
  --pico-primary-background: var(--sw-pink);
  --pico-primary-border: var(--sw-pink);
  --pico-primary-hover: #ff5c8f;
  --pico-primary-hover-border: #ff5c8f;
  --pico-primary-focus: rgba(255, 42, 109, 0.4);

  --pico-secondary: var(--sw-cyan);
  --pico-secondary-border: var(--sw-cyan);
  --pico-secondary-hover: #5ef0fa;
  --pico-secondary-hover-border: #5ef0fa;
  --pico-secondary-focus: rgba(5, 217, 232, 0.4);
}

html, body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--sw-bg-top) 0%, var(--sw-bg-bottom) 60%, #4a0d4f 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

main.container {
  position: relative;
  z-index: 1;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

h1 {
  font-size: clamp(2.5rem, 10vw, 5rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--sw-cyan) 0%, var(--sw-purple) 55%, var(--sw-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(255, 42, 109, 0.55));
  margin-bottom: 2rem;
}

/* Stacked link buttons. Colors alternate pink/cyan automatically,
   so adding a link is just another <li><a></a></li>. */
.links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
  padding: 0;
}

.links li {
  --link-color: var(--sw-pink);
  --link-glow: rgba(255, 42, 109, 0.35);
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.links li:nth-child(even) {
  --link-color: var(--sw-cyan);
  --link-glow: rgba(5, 217, 232, 0.35);
}

.links a {
  display: block;
  padding: 0.9rem 1.25rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--link-color);
  background: rgba(13, 2, 33, 0.65);
  border: 1px solid var(--link-color);
  border-radius: 0.5rem;
  box-shadow: 0 0 12px var(--link-glow), inset 0 0 12px var(--link-glow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.links a:hover,
.links a:focus-visible {
  color: #fff;
  text-decoration: none;
  background: var(--link-glow);
  box-shadow: 0 0 24px var(--link-color), inset 0 0 12px var(--link-glow);
  transform: translateY(-2px);
}

/* Retro perspective grid along the bottom of the page */
.grid-floor {
  position: fixed;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 60vh;
  background-image:
    linear-gradient(var(--sw-pink) 2px, transparent 2px),
    linear-gradient(90deg, var(--sw-pink) 2px, transparent 2px);
  background-size: 60px 60px;
  background-repeat: repeat; /* Pico resets this to no-repeat */
  transform: perspective(400px) rotateX(55deg);
  transform-origin: bottom;
  opacity: 0.55;
  mask-image: linear-gradient(to top, black 30%, transparent 90%);
  -webkit-mask-image: linear-gradient(to top, black 30%, transparent 90%);
  pointer-events: none;
  z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .grid-floor {
    animation: grid-scroll 4s linear infinite;
  }
}

@keyframes grid-scroll {
  from { background-position: 0 0; }
  to { background-position: 0 60px; }
}