:root {
  color-scheme: light dark;

  /* https://tailwindcss.com/docs/colors */
  --color-blue-400: oklch(70.7% 0.165 254.624);
  --color-blue-800: oklch(42.4% 0.199 265.638);
  --color-purple-400: oklch(71.4% 0.203 305.504);
  --color-purple-900: oklch(38.1% 0.176 304.987);

  --color-stone-50: oklch(98.5% 0.001 106.423);
  --color-stone-100: oklch(97% 0.001 106.424);
  --color-stone-300: oklch(86.9% 0.005 56.366);
  --color-stone-600: oklch(37.4% 0.01 67.558);
  --color-stone-800: oklch(26.8% 0.007 34.298);
  --color-stone-900: oklch(21.6% 0.006 56.043);
  --color-stone-950: oklch(14.7% 0.004 49.25);

  --color-slate-50: oklch(98.4% 0.003 247.858);
  --color-slate-100: oklch(96.8% 0.007 247.896);
  --color-slate-300: oklch(86.9% 0.022 252.894);
  --color-slate-600: oklch(44.6% 0.043 257.281);
  --color-slate-800: oklch(27.9% 0.041 260.031);
  --color-slate-900: oklch(20.8% 0.042 265.755);
  --color-slate-950: oklch(12.9% 0.042 264.695);

  --color-gray-50: oklch(98.5% 0.002 247.839);
  --color-gray-100: oklch(96.7% 0.003 264.542);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-600: oklch(44.6% 0.03 256.802);
  --color-gray-800: oklch(27.8% 0.033 256.848);
  --color-gray-900: oklch(21% 0.034 264.665);
  --color-gray-950: oklch(13% 0.028 261.692);

  --background: light-dark(white, var(--color-stone-950));
  --text: light-dark(var(--color-stone-950), var(--color-stone-300));
  --text-heading: light-dark(var(--color-stone-950), var(--color-stone-50));
  --text-links: light-dark(var(--color-blue-800), var(--color-blue-400));
  --text-links-visted: light-dark(var(--color-purple-900), var(--color-purple-400));
  --block-background: light-dark(var(--color-stone-100), var(--color-stone-900));
  --code-border: light-dark(var(--color-stone-300), var(--color-stone-600));
}

img {
  height: 100%;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
}

a {
  color: var(--text-links);
}

a:visited {
  color: var(--text-links-visted);
}

body {
  font-family: system-ui, -apple-system, Roboto, "Segoe UI", sans-serif;
  background-color: var(--background);
  color: var(--text);
  display: flex;
  flex-direction: column;
  scrollbar-gutter: stable;
  overflow-y: auto;
}

nav {
  padding-top: 1rem;
  #title {
    font-size: 1.2rem;
    font-weight: bold;
    padding-bottom: 0.5rem;
  }

  img {
    border-radius: 50%;
    max-width: 4rem;
    max-height: 4rem;
    min-width: 4rem;
    min-height: 4rem;
    margin-right: 1em;
  }

  a {
    font-weight: bold;
  }
}

footer {
  display: flex;
  flex-direction: column;
  width: 100%;

  #footer {
    align-self: center;
    justify-items: center;
  }
}

hr {
  margin-top: 1em;
  width: 100%;
}

#content {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: min(800px, 95vw);
}

code {
  background-color: var(--block-background);
  overflow-x: auto;
  display: inline;
  width: 100%;
}

p + pre code,
pre + pre code {
  display: block;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}


pre {
  display: block;
  border: 1px solid var(--code-border);
  background-color: var(--block-background);
  padding: 0.5rem;
  line-height: 1.4rem;
  border-radius: 6px;
}

blockquote {
  overflow-x: auto;
  background-color: var(--block-background);
  border: 1px solid var(--code-border);
  margin: 1em 1em;
  padding: 0em 0.5em;
  border-radius: 6px;
}