body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  display: flex;
  justify-content: center;
}

footer {
  margin-bottom: 12px;
}

.container {
  width: 720px;
  max-width: 90vw;
}

a:hover {
  text-underline-offset: 4px;
}

a,
a:active {
  text-underline-offset: 3px;
}

time {
  font-style: italic;
}

/*
* COLORS!
*
* These are somewhat inspired by catppuccin, mostly chosen so that the
* transition between my editor and the page is easy on my eyes.
*/

:root {
  --bg: #eff1f5;
  --fg: #4c4f69;
  --link: #df8e1d;
}

/* Dark theme colors using prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1e2e;
    --fg: #cdd6f4;
    --link: #f9e2af;
  }
}

body {
  background-color: var(--bg);
  color: var(--fg);
}

a,
a:active {
  color: var(--link);
}