:root {
  color-scheme: light dark;
  --background: #f7f5f0;
  --foreground: #171717;
  --muted: #5e625b;
  --line: #c9c4b9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #11110f;
    --foreground: #ece8de;
    --muted: #9b988f;
    --line: #34322d;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--background);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--foreground);
  font-family:
    ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono",
    Menlo, monospace;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

.page {
  display: grid;
  min-height: 100vh;
  grid-template-rows: 1fr auto;
  padding: clamp(24px, 6vw, 72px);
}

.identity {
  align-self: center;
}

h1,
p {
  margin: 0;
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
}

p {
  color: var(--muted);
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}