:root {
  --ink: #1a2a3a;
  --white: #ffffff;
  --gray: #f2f2f2;
  --faded-navy: #7d90aa;
  --text: var(--ink);
  --background: var(--white);
  --surface: var(--white);
  --muted: rgba(26, 42, 58, 0.64);
  --muted-soft: rgba(26, 42, 58, 0.42);
  --line: rgba(26, 42, 58, 0.13);
  --max-width: 1440px;
  --page-padding: clamp(48px, 4.5vw, 64px);
  --font-mono: "Space Mono", "IBM Plex Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --transition: 160ms ease;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-mono);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--background);
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

button {
  color: inherit;
}

h1,
h2,
p {
  margin-top: 0;
}

::selection {
  background: rgba(125, 144, 170, 0.3);
}

:focus-visible {
  outline: 2px solid var(--faded-navy);
  outline-offset: 4px;
}

@media (min-width: 720px) and (max-width: 1099px) {
  :root {
    --page-padding: clamp(34px, 5vw, 48px);
  }
}

@media (max-width: 719px) {
  :root {
    --page-padding: clamp(20px, 5.8vw, 24px);
  }
}