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

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
  scrollbar-gutter: stable;
  /* filter: invert(1); */
}

body {
  background-color: var(--bg);
  margin-inline: auto;
  max-width: 100%;
  min-block-size: 100%;
  outline: 1px solid var(--border-color);
  padding: 4rem;
  width: fit-content;
  & > * {
    width: 630px;
    max-width: 100%;
  }
}

header {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
}

header,
footer {
  font-size: var(--font-size--small);
}

header,
nav {
  margin-block-end: 4rem;
}

main {
  margin-block-end: 8rem;
}

footer {
  color: var(--color--off);
  & > p {
    text-align: center;
  }
}

footer,
em {
  font-style: italic;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  word-wrap: break-word;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  margin-block-end: 1em;
  margin-block-start: 2em;
  scroll-margin-block-start: 2em;
  text-wrap: balance;
}

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

:is(h1, h2, h3, h4, h5, h6) > code {
  --font-size--monospace: 110%;
  font-weight: var(--font-weight-monospace--bolder);
  line-height: normal;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.35rem;
}

h3 {
  font-size: 1.1rem;
}

h4 {
  font-size: 0.9rem;
}

h5 {
  font-size: 0.8rem;
}

h6 {
  font-size: 0.7rem;
}

h6,
th {
  letter-spacing: 0.025em;
  text-transform: uppercase;
  & > code {
    text-transform: none;
  }
}

a {
  color: var(--color--anchor);
  text-decoration: none;
  &:where(:active, :hover, :focus) {
    text-decoration: underline 1px solid currentColor;
  }
}

p,
li {
  hyphens: auto;
  text-align: justify;
  text-wrap: pretty;
}

ol {
  counter-reset: ordered;
  & > li {
    counter-increment: ordered;
    &::before {
      content: counters(ordered, ".") ".";
      margin-inline-end: 0.5ch;
      font-feature-settings: "tnum";
    }
  }
}

ol,
ul {
  list-style: none;
  padding-inline-start: 1.5ch;
}

ol:not(li > ol),
ul:not(li > ul),
blockquote,
pre,
p:not(blockquote > p),
table {
  margin-block: 1rem;
}

ul {
  list-style-type: "- ";
}

li {
  margin-block: 0.25rem;
  & > :is(ol, ul) {
    padding-inline-start: 2ch;
  }
}

blockquote {
  margin-inline: 1ch;
  font-style: italic;
  & * {
    background-color: unset !important;
    padding-inline: unset !important;
    color: unset !important;
  }
  & em {
    font-style: normal;
  }
  & a {
    text-decoration: 1px underline currentColor;
  }
}

blockquote,
pre {
  padding: 0.5rem;
}

blockquote,
pre,
table {
  background-color: var(--bg--off);
  border-radius: var(--border-radius);
  outline: 1px solid var(--border-color--off);
}

pre,
table {
  font-size: var(--font-size--small);
}

code {
  font-family: Inconsolata, monospace;
  font-size: var(--font-size--monospace);
  font-weight: var(--font-weight-monospace);
  :not(pre) > & {
    background-color: var(--mark--monospace);
    border-radius: var(--border-radius);
    padding-inline: 0.25em;
  }
}

pre {
  overflow-x: auto;
  & > code {
    word-break: break-all;
    font-size: 94%;
  }
}

strong {
  background-color: var(--mark--strong);
}

strong,
th {
  font-weight: var(--font-weight--bolder);
}

em {
  background-color: var(--mark--emphasis);
}

hr {
  border-bottom: unset;
  border-left: unset;
  border-right: unset;
  border-top: 1px solid var(--border-color);
  margin-block: 2rem;
}

table {
  display: block;
  background-color: var(--bg--off);
  border-spacing: 0;
  overflow-x: auto;
  width: fit-content;
  max-width: 100%;
}

tbody tr:nth-of-type(2n) {
  background-color: var(--bg);
}

tr {
  & > *:first-of-type {
    padding-inline-start: 0.5rem;
  }
  & > *:last-of-type {
    padding-inline-end: 0.5rem;
  }
}

th,
td {
  padding: 0.25rem;
  vertical-align: top;
}

th code {
  text-transform: initial;
}

.theme-switch {
  & label {
    user-select: none;
    cursor: pointer;
    &::after {
      content: "🌕";
    }
    &:where(:active, :hover, :focus)::after {
      content: "🌗" !important;
    }
  }
}