p,
pre,
ul,
blockquote,
h1,
h2,
h3 {
  margin-top: 0;
  margin-bottom: 0;
  overflow-wrap: break-word;
}

p:empty {
  padding-bottom: 20px;
}

a {
  display: block;
}

pre {
  overflow-y: auto;
}

img,
audio,
video {
  display: block;
  max-width: 100%;
}

:root {
  --foreground: black;
  --background: white;

  --body-width: 48rem;
  --hyphens: manual;

  --serif: georgia, times, serif;
  --sans-serif: avenir, helvetica, arial, sans-serif;
  --mono: consolas, monaco, monospace;

  --p-family: var(--serif);
  --p-size: 1.25rem;
  --p-height: 1.5;
  --p-indent: 0rem;

  --a-family: var(--serif);
  --a-size: var(--p-size);
  --a-height: 1.5;
  --a-decoration: underline;
  --a-style: normal;

  --pre-family: var(--mono);
  --pre-size: 1rem;
  --pre-height: 1;

  --h1-family: var(--sans-serif);
  --h1-size: 3rem;
  --h1-height: 1.25;

  --h2-family: var(--sans-serif);
  --h2-size: 2.25rem;
  --h2-height: 1.25;

  --h3-family: var(--sans-serif);
  --h3-size: 1.5rem;
  --h3-height: 1.25;

  --ul-family: var(--serif);
  --ul-size: var(--p-size);
  --ul-height: 1.25;
  --ul-style: circle;

  --quote-family: var(--serif);
  --quote-size: var(--p-size);
  --quote-height: 1.25;
  --quote-style: italic;
}

body {
  margin: 0 auto;
  padding: 0.5rem;
  max-width: var(--body-width);
  hyphens: var(--hyphens);
}

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

a {
  font-size: var(--a-size);
  font-style: var(--a-style);
  font-family: var(--serif);
  line-height: var(--a-height);
  text-decoration: var(--a-decoration);
}

pre {
  padding: 1rem;
  font-family: var(--pre-family);
  font-size: var(--pre-size);
  line-height: var(--pre-height);
}

h1 {
  font-family: var(--h1-family);
  font-size: var(--h1-size);
  line-height: var(--h1-height);
}

h2 {
  font-family: var(--h2-family);
  font-size: var(--h2-size);
  line-height: var(--h2-height);
}

h3 {
  font-family: var(--h3-family);
  font-size: var(--h3-size);
  line-height: var(--h3-height);
}

ul {
  padding-left: 1rem;
  list-style-type: var(--ul-style);
  font-size: var(--ul-size);
  font-family: var(--ul-family);
  line-height: var(--ul-height);
}

blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0.5rem;
  border-left-width: 0.5rem;
  border-left-style: solid;
  font-family: var(--quote-family);
  font-size: var(--quote-size);
  font-style: var(--quote-style);
  line-height: var(--quote-height);
}

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

blockquote {
  border-color: var(--foreground);
}

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

@media (prefers-color-scheme: dark) {
  html,
  body,
  h1,
  h2,
  h3,
  p,
  a,
  ul,
  blockquote,
  pre::selection {
    color: var(--background);
    background-color: var(--foreground);
  }

  blockquote {
    border-color: var(--background);
  }

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