html {

background-color: $background-color;
color: $text-color;

@media (prefers-color-scheme: dark) {
  background-color: $background-color-dark;
  color: $text-color-dark;
}

font-family: "Inter", -apple-system, sans-serif;
font-size: 100%;
line-height: 1.42;

@media (min-width: 1024px) {
  font-size: 137.5%; // 22 px
}

}

main {

max-width: 42em;
hyphens: auto;

.post-header {
  margin-bottom: 2rem;
}

.post-meta {
  color: $text-color-subdued;
  @media (prefers-color-scheme: dark) {
    color: $text-color-subdued-dark;
  }
}

p {
  margin: 0 auto;
}

.post-content {
  p + p {
    text-indent: 1em;
  }

  blockquote {
    margin: 0;
    padding: 0 1em;
    border-left: 4px solid $accent-color;

    p:last-child {
      text-indent: 0;
    }
  }
}

p ~ div,
img,
video {
  padding: 1em 0;
}

blockquote p {
  hanging-punctuation: first;
}

li > ul {
  padding-left: 2rem;
}

@media (min-width: 1024px) {
  ul,
  ol {
    padding-left: 0;
    list-style-position: outside;
  }
}

}

h1, h2, h3, .post-list-item > .post-link {

font-weight: 700;
letter-spacing: -0.02em;

}

h1 {

font-size: 1.8rem;
margin-top: 0;
margin-bottom: 0;
// No margin-top since this is the top of the page and we want only 1 per page.
// No margin-bottom as metadata should follow.

}

h2 {

font-size: 150%;
margin-top: 1em;
margin-bottom: 0.5em;

}

h3, .post-list-item > .post-link {

font-size: 125%;

}

h3 {

margin-top: 1em;
margin-bottom: 0.5em;

}

footer {

font-size: 68.75%;

}