:root {
  --foreground: black;
  --background: white;
  --p-size: 1.25rem;
  --p-indent: 0rem;
  --a-size: var(--p-size);
  --pre-size: 1rem;
  --h1-size: 3rem;
  --h2-size: 2.25rem;
  --h3-size: 1.5rem;
  --ul-size: var(--p-size);
  --blockquote-size: var(--p-size);
  --mono: Consolas, monaco, monospace;
  --serif: georgia, times, serif;
  --sans-serif: -apple-system, BlinkMacSystemFont, "avenir next", avenir,
    helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial,
    sans-serif;
}

body {
  max-width: 48rem;
  padding: 0.5rem;
  margin: 0 auto;
}

p,
a,
pre,
h1,
h2,
h3,
ul,
blockquote,
img,
audio,
video {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  font-family: var(--sans-serif);
  line-height: 1.25;
}

p {
  font-size: var(--p-size);
  font-family: var(--serif);
  text-indent: var(--p-indent);
  line-height: 1.5;
}

a::before {
  font-size: var(--p-size);
  font-family: var(--mono);
  content: "⇒";
  padding-right: 0.25rem;
  vertical-align: middle;
}

a {
  font-size: var(--p-size);
  font-family: var(--serif);
  text-decoration: none;
}

pre {
  font-size: var(--pre-size);
  font-family: var(--mono);
  line-height: 1;
  padding: 1.25rem;
  overflow-y: auto;
}

h1 {
  font-size: var(--h1-size);
}

h2 {
  font-size: var(--h2-size);
}

h3 {
  font-size: var(--h3-size);
}

ul {
  font-size: var(--p-size);
  font-family: var(--serif);
  line-height: 1.25;
  list-style-type: none;
}

li::before {
  font-size: var(--p-size);
  font-family: var(--mono);
  content: "*";
  vertical-align: middle;
  padding-right: 0.5rem;
}

blockquote {
  font-size: var(--p-size);
  font-family: var(--serif);
  line-height: 1.5;
  padding-left: 0.75rem;
}

pre + blockquote {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* foreground and background colors */
html,
body,
h1,
h2,
h3,
p,
a,
ul,
blockquote,
pre::selection,
pre::-moz-selection {
  color: var(--foreground);
  background-color: var(--background);
}

blockquote {
  border-left: 0.5rem solid var(--foreground);
}

pre,
::selection,
::-moz-selection,
a:hover {
  color: var(--background);
  background-color: var(--foreground);
}

/* when system preference is "dark" invert foreground and background colors */
@media (prefers-color-scheme: dark) {
  html,
  body,
  h1,
  h2,
  h3,
  p,
  a,
  ul,
  blockquote,
  pre::selection,
  pre::-moz-selection {
    color: var(--background);
    background-color: var(--foreground);
  }

  blockquote {
    border-left: 0.5rem solid var(--background);
  }

  pre,
  ::selection,
  ::-moz-selection,
  a:hover {
    color: var(--foreground);
    background-color: var(--background);
  }
}