:root {
  --shadow-elev: 0 12px 32px rgba(31, 41, 55, 0.15);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0b1220;
    --foreground: #e6edf3;
    --card: rgba(17, 24, 39, 0.75);
    --shadow-elev: 0 14px 44px rgba(0, 0, 0, 0.35);
    --text-muted: rgba(230, 237, 243, 0.8);
  }
}

main {
  box-shadow: var(--shadow-elev);
}

.button-grid {
  gap: 1.25rem;
}

@media (min-width: 600px) {
  .button-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .button-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

a.button {
  box-shadow: 0 8px 22px rgba(0, 121, 107, 0.18);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

a.button:hover {
  background: var(--accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 121, 107, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  a.button {
    transition: none;
  }

  a.button:hover {
    transform: none;
  }
}

footer {
  color: color-mix(in oklab, var(--foreground) 65%, transparent);
}