body {
  font-family: Inter, sans-serif;
  margin: 20px auto;
  max-width: 650px;
  line-height: 1.6;
  font-size: 18px;
  padding: 0 10px
}
img {
  max-width: 650px;
}
header>h1 {
  font-size: 3.75em;
  margin: 0px auto;
  line-height: 1.0;
}
h1 {
  font-size: 1.5em;
}
h2 {
  font-size: 2em;
}
h3 {
  font-size: 1.5em;
}
h1, h2, h3 {
  line-height: 1.2;
  font-family: Faustina, serif;
  margin-block: 0.6em;
}
code {
  font-family: JetBrainsMono, sans-serif;
}
.timestamp {
  font-size: 0.8em;
}
@font-face {
  font-family: "Faustina";
  src: url("/fonts/Faustina-Light-subset.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter_18pt-Regular-subset.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "JetBrainsMono";
  src: url("/fonts/JetBrainsMono-Regular-subset.woff2") format("woff2");
  font-display: swap;
}

/* Colors */
body {
  background-color: #E9EEF0;
  color: #040400;
}
pre {
  background-color: #F8FDFF;
}
a:link {
  color: #0F64C0;
}
a:visited {
  color: #042360;
}
a:hover {
  color: #1a7ce6;
}
a:active {
  color: #042360;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: #101517;
    color: #f2f2ee;
  }
  pre {
    background-color: #243034;
  }
  a:link {
    color: #3e93f0;
  }
  a:visited {
    color: #2b6aae;
  }
  a:hover {
    color: #77b2ff;
  }
  a:active {
    color: #337dcd;
  }
}