html {
  max-width: 58ch;
  margin: auto;
  font-size: 21px; /* 16pt */
  font-family: "FiraCode Mono", "PT Mono", "Source Code Pro", Menlo, monospace;
  line-height: 1.75;
  text-wrap: balance;
}

body {
  margin-top: 27.5vh;
  background-color: inherit;
}

h1 {
  font-style: italic;
  font-size: 2em;
  font-weight: normal;
  margin-left: clamp(-1lh, -6vw, 0lh);
  margin-block-end: 1em;
}

small {
  font-size: x-small;
}

hr {
  margin-block: 5rem;
  border-style: dashed;
}

li {
  margin-block: 1em;
  list-style-type: "– ";
}

a {
  text-decoration: none;
}

a:before {
  content: "[";
}

a:after {
  content: "]";
}

a:before,
a:after {
  font-size: 140%;
  margin-inline: -0.3ch;
}

nav {
  font-size: 80%;
}

header {
  text-align: right;
  background-color: inherit;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-inline: 1lh;
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  html {
    color: rgb(218, 218, 218);
    background-color: rgb(21, 21, 21);
  }
  h1 {
    color: hotpink;
  }
  a {
    color: skyblue;
  }
  a:before,
  a:after {
    color: #424242;
  }
}

@media (prefers-color-scheme: light) {
  html {
    color: #424242;
    background-color: rgb(250, 250, 250);
  }
  h1 {
    color: deeppink;
  }
  a {
    color: deepskyblue;
  }
  a:before,
  a:after {
    color: orange;
  }
}

@media (max-width: 800px) {
  html {
    box-sizing: border-box;
    padding: 1ch;
    font-size: 0.9rem;
    width: 100%;
  }
  h1 {
    margin-left: initial;
  }
}