*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: var(--leading-body);
}

/* Night sky: the star and nebula colors are transparent in light mode */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(1px 1px at 8% 14%, var(--star-dim), transparent),
    radial-gradient(1px 1px at 23% 62%, var(--star-dim), transparent),
    radial-gradient(1.5px 1.5px at 37% 9%, var(--star), transparent),
    radial-gradient(1px 1px at 46% 81%, var(--star-dim), transparent),
    radial-gradient(1px 1px at 58% 33%, var(--star-dim), transparent),
    radial-gradient(1.5px 1.5px at 71% 71%, var(--star), transparent),
    radial-gradient(1px 1px at 83% 22%, var(--star-dim), transparent),
    radial-gradient(1px 1px at 92% 54%, var(--star-dim), transparent),
    radial-gradient(1px 1px at 15% 92%, var(--star-dim), transparent),
    radial-gradient(60% 45% at 85% 10%, var(--nebula-violet), transparent),
    radial-gradient(50% 40% at 5% 75%, var(--nebula-rose), transparent);
}

body::after {
  background:
    radial-gradient(1.5px 1.5px at 29% 27%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 64% 12%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 88% 86%, var(--star), transparent),
    radial-gradient(1px 1px at 52% 58%, var(--star), transparent);
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

:is(a, button):focus-visible {
  outline: 3px solid var(--action-accent);
  outline-offset: 5px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
}

h1 {
  font-size: var(--text-h1);
  letter-spacing: -0.055em;
}

h2 {
  font-size: var(--text-h2);
  letter-spacing: -0.04em;
}

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

:is(h1, h2) em {
  color: var(--heading-accent);
}

.wrap {
  width: min(var(--layout-wide), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  body::after {
    animation: twinkle 7s ease-in-out infinite alternate;
  }
}

@keyframes twinkle {
  from {
    opacity: 0.3;
  }

  to {
    opacity: 1;
  }
}