:root {
  --section-space: clamp(5rem, 4rem + 2vw, 8rem);

  --space-xs: 0.5rem;

  --content-gap-xs: 1rem;
  --content-gap: 1.5rem;
  --content-gap-3x: 3rem;
  --content-gap-4x: 3rem;
  --content-gap-6x: 6rem;

  --br-xs: 0.5rem;

  --bg-body: #020817;
  --bg-card: #0b1020;
  --text-body: #cbd5e1;
  --text-title: #ffffff;

  --text-xs: 0.875rem;
  --text-m: 1rem;
  --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-3xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-4xl: clamp(3rem, 2rem + 4vw, 5rem);
}

body {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: var(--text-m);
  background-color: var(--bg-body);
  color: var(--text-body);
}

h1,
h2,
h3 {
  color: var(--text-title);
  font-weight: 700;
}

h1 {
  font-size: var(--text-4xl);
  line-height: 1.25;
}

h2 {
  font-size: var(--text-3xl);
}

h3 {
  font-size: var(--text-2xl);
}

li {
  font-size: var(--text-xs);
}

section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}