:root {
  --bg: #1d2021;
  --line: #2c3234;
  --body: #7d8183;
  --title: #9a9ea0;
  --muted: #6b7173;
  --accent: #8a4a50;
  --accent-strong: #b01c20;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
  /* both themes are dark: stops browsers' auto dark mode from re-darkening the page */
  color-scheme: dark;
}

[data-theme="dark"] {
  --bg: #121516;
  --line: #202527;
  --body: #8e9395;
  --title: #aeb3b5;
  --muted: #5f6567;
}

html {
  background-color: var(--bg);
}

/* html paints the background; body is transparent so there is one uniform surface */
body {
  background-color: transparent;
  font-family: var(--sans);
  letter-spacing: -0.02em;
  /* let the window scroll, not the body (html already clips horizontal overflow) */
  overflow-x: visible;
}

.theme-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10000;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--body);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--title);
}

.Navbar {
  transition: transform 0.25s ease;
}

.Navbar.nav-hidden {
  transform: translateY(-100%);
}