:root {
  --fg1: #313131;
  --fg2: #4A4A4A;
  --bg: #FFFFFF;
}
@media screen and (prefers-color-scheme: dark) {
  :root {
    --fg1: #FFFFFF;
    --fg2: #FAFAFA;
    --bg: #313131;
  }
}
body {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 100%;
  background-color: var(--bg);
}
h1 {
  font-weight: normal;
  font-size: 8rem;
  line-height: 150%;
  color: var(--fg1);
}
h2 {
  font-weight: normal;
  font-size: 6rem;
  line-height: 150%;
  color: var(--fg1);
}
a {
  color: var(--fg1);
}
a:hover,
a:focus,
a:active {
  outline: none;
  text-decoration: dashed underline;
}
p,
li,
dt,
dd {
  font-size: 4rem;
  line-height: 150%;
  color: var(--fg2);
}
dt {
  color: var(--fg1);
  font-weight: 600;
}
dd {
  margin-bottom: 2.5rem;
}
code {
  font-family: monospace;
  font-size: 3rem;
}
hr {
  color: var(--fg2);
}
header,
main,
footer {
  width: 90vw;
  max-width: 1200px;
}
main {
  margin: 4rem auto;
}
header {
  margin: 6rem auto 0;
}
footer {
  margin: 4rem auto;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  h1 {
    font-size: 6rem;
  }
  h2 {
    font-size: 4.5rem;
  }
  p,
  li,
  dt,
  dd {
    font-size: 3rem;
  }
  code {
    font-size: 2.25rem;
  }
}
@media screen and (max-width: 600px) {
  h1 {
    font-size: 4rem;
  }
  h2 {
    font-size: 3rem;
  }
  p,
  li,
  dt,
  dd {
    font-size: 2rem;
  }
  code {
    font-size: 2rem;
  }
}