html {
  max-width: 90ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}

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

p,
ul,
ol {
  margin-bottom: 2em;
  color: #1d1d1d;
  font-family: sans-serif;
}

body {
  font-family: "EB Garamond", serif;
  background-color: azure;
  color: darkslateblue;
  text-transform: lowercase;
}

header {
  padding: 0 0 2em 0;
  margin-bottom: 2em;
  border-bottom: 1px solid slategray;
}
header h1 {
  margin: 0;
}

article {
  padding-bottom: 2em;
  margin-bottom: 2em;
  border-bottom: 1px solid slategray;
}

footer {
  padding: 2em 0;
  font-size: 0.9rem;
}

@media only screen and (max-width: 1024px) {
  html {
    padding: 1em;
    font-size: 1.5em;
  }

  header {
    padding: 0 0 1em 0;
    margin-bottom: 1em;
  }
}

@media (prefers-color-scheme: dark) {
  p,
  ul,
  ol {
    color: #e2e2e2;
  }

  body {
    background-color: darkslateblue;
  }

  header {
    border-bottom: 1px solid slategray;
  }

  article {
    border-bottom: 1px solid slategray;
  }
}