* {
  box-sizing: border-box;

  font-size: 16px;
  font-family: "Courier New", Courier, monospace;
  line-height: 1.5;
}

:root {
  color-scheme: light dark;

  --c-bg: light-dark(#fff, #111);
  --c-fg: light-dark(#111, #fff);
  --c-muted: light-dark(#888, #ccc);
  --c-code-bg: light-dark(#eee, #222);
  --c-accent: light-dark(#f2690d, #f79f64);
}

html,
body {
  padding: 0;
  margin: 0;
}

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

  padding: 0 1rem;

  margin: 1rem auto;
  max-width: 45rem;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

nav > ul,
footer > ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;

  padding: 0;
  margin: 0;

  > li::before {
    content: initial;
  }
}

@media (width >= 360px) {
  nav > ul {
    flex-direction: row;
    justify-content: center;
    gap: 0;

    > li {
      list-style: none;
    }

    > li:not(:first-child)::before {
      content: "|";
      padding: 0 0.5rem;
      color: var(--c-muted);
    }
  }
}

@media (width >= 480px) {
  footer > ul {
    flex-direction: row;
    justify-content: center;
    gap: 0;

    > li {
      list-style: none;
    }

    > li:not(:first-child)::before {
      content: "|";
      padding: 0 0.5rem;
      color: var(--c-muted);
    }
  }
}

.sitename {
  color: var(--c-muted);
}

h1:before {
  content: "# ";
  color: var(--c-muted);
}
h2:before {
  content: "## ";
  color: var(--c-muted);
}
h3:before {
  content: "### ";
  color: var(--c-muted);
}
h4:before {
  content: "#### ";
  color: var(--c-muted);
}
h5:before {
  content: "##### ";
  color: var(--c-muted);
}
h6:before {
  content: "###### ";
  color: var(--c-muted);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1rem 0;
}

ul {
  padding: 0;

  > li {
    list-style: none;

    &::before {
      content: "- ";
      color: var(--c-muted);
    }
  }
}

ol {
  padding: 0;
  counter-reset: ol-count;

  > li {
    list-style: none;
    counter-increment: ol-count;

    &::before {
      content: counter(ol-count) ") ";
      color: var(--c-muted);
    }
  }
}

li > ul,
li > ol {
  padding-inline-start: 2ch;
}

code {
  padding: 0.1rem 0.2rem;
  border-radius: 0.25rem;
  background-color: var(--c-code-bg);
}

pre {
  padding: 1rem;
  border-radius: 0.25rem;
  background-color: var(--c-code-bg);
  overflow-x: scroll;

  code {
    padding: 0;
    background-color: initial;
  }
}

img {
  max-width: 100%;
  border-radius: 0.25rem;
  margin: 0 auto;
  display: block;
}

a {
  color: var(--c-accent);
}