a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:after, blockquote:before, q:after, q:before {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

:root {
  --text-color: #222;
  --light-text-color: #ccc;
  --link-color: #0c60ff;
  --mark-foreground: #000;
  --mark-background: #fffeca;
  --bold-font-weight: 600;
  --text-color: #111
    --background-color: #eee
; }

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #eee;
    --background-color: #111
    ; } }

html {
  -webkit-font-smoothing: antialiased; }

body {
  background: var(--background-color);
  color: var(--text-color);
  font-size: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Lucida Grande", sans-serif;
  font-weight: 400;
  line-height: 1.5em;
  padding: 0 10px 0 64px; }
  @media all and (max-width: 660px) {
    body {
      line-height: 1.6em;
      padding: 0 16px; } }

a {
  color: var(--link-color);
  text-decoration: none;
  border-bottom: 2px solid transparent; }
  a:hover {
    transition-property: border;
    transition-duration: 0.2s;
    border-bottom: 2px solid; }

p {
  margin-bottom: 2rem; }

h2 {
  font-size: 1.3em;
  font-weight: normal;
  margin-bottom: 0.5em; }

h3 {
  font-size: 1em;
  font-weight: var(--bold-font-weight); }

mark {
  color: var(--mark-foreground);
  background-color: var(--mark-background);
  padding: 0.05em 0.1em;
  box-shadow: var(--mark-background) 0 0 5px; }
  @media (prefers-color-scheme: dark) {
    mark {
      box-shadow: none; } }

header {
  display: block;
  max-width: 640px;
  margin: 5rem 0 3rem; }
  @media all and (min-width: 660px) {
    header {
      margin: 8rem 0 2rem; } }
  header h1 {
    font-size: 2em;
    line-height: 1em;
    font-weight: bold; }

main {
  display: block;
  max-width: 640px; }

footer {
  margin: 2rem 0;
  color: var(--light-text-color);
  font-size: 14px;
  font-weight: 500; }
  footer a {
    color: var(--light-text-color); }
    footer a:hover {
      color: var(--link-color); }