:root {
  --bg: #1c1c1c;
  --text-primary: rgba(255, 255, 255, 0.9);
  --text-secondary: rgba(255, 255, 255, 0.4);
  --border: rgba(255, 255, 255, 0.1);

  --font-size-xs: clamp(0.7813rem, 0.7813rem + 0vw, 0.7813rem);
  --font-size-m: 1.125rem;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --space-s: clamp(1.125rem, 1.0292rem + 0.4773vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.5439rem + 0.716vw, 1.875rem);
  --space-xl: clamp(3.375rem, 3.0877rem + 1.432vw, 3.75rem);
}

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text-primary);
}

body {
  font-family: var(--sans);
}

.intro {
  margin-top: 25vh;
  display: grid;
  place-items: center;
  padding: var(--space-m);
}

.intro-card {
  width: min(100%, 40rem);
}

.intro-card h1 {
  margin: 0 0 0.35rem 0;
  font-size: var(--font-size-m);
  font-weight: 400;
}

.intro-card p {
  margin: 0 0 var(--space-m) 0;
  font-size: var(--font-size-m);
  color: var(--text-secondary);
}

.intro-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.intro-links a {
  color: var(--text-secondary);
  text-underline-offset: 4px;
  transition: color .2s ease, opacity .2s ease;
}

.intro-links a:hover,
.intro-links a:focus-visible {
  color: var(--text-primary);
}