:root {
  --body-sans-font:monospace;
  --body-preformatted-font:monospace;
  --body-title-font:monospace;
  --background:#1d2021;
  --text:#f9f5d7;
  --text-selection:#d3869b;
  --preformatted-background:#3c3836;
  --link-foreground:#b16286;
  --link-background:#282828;
  --blockquote-border-left:1px solid #bdae93;
  --progress-bar-outline:#b16286 solid 4px;
  --progress-bar-fill:#b16286
}
@media (prefers-color-scheme:light) {
  :root {
    --background:#fff;
    --text:#1d2021;
    --text-selection:#d3869b;
    --preformatted-background:#fff;
    --link-foreground:#b16286;
    --link-background:#fff;
    --blockquote-border-left:1px solid #655c54
  }
}
main {
  font-family:var(--body-sans-font);
  margin:auto;
  max-width:50rem;
  padding:2rem
}
::selection {
  background:var(--text-selection)
}
body {
  background:var(--background);
  color:var(--text)
}
body,
html {
  align-items:center;
  display:flex;
  height:100%;
  justify-content:center;
  margin-left:auto;
  margin-right:auto
}
.centered-div {
  text-align:center
}
#status {
font-variant-numeric:tabular-nums
}
#progress {
border-radius:1rem;
display:none;
height:2rem;
margin:1rem 0 2rem;
outline:var(--progress-bar-outline);
outline-offset:2px;
overflow:hidden;
width:min(20rem,90%)
}
.bar-inner {
  background-color:var(--progress-bar-fill);
  height:100%;
  transition:width .25s ease-in;
  width:0
}
@media (prefers-reduced-motion:no-preference) {
  .bar-inner {
    transition:width .25s ease-in
  }
}
pre {
  background-color:var(--preformatted-background);
  border:0;
  font-family:var(--body-preformatted-font);
  padding:1em
}
a,
a:active,
a:visited {
  background-color:var(--link-background);
  color:var(--link-foreground)
}
h1,
h2,
h3,
h4,
h5 {
  font-family:var(--body-title-font);
  margin-bottom:.1rem
}
blockquote {
  border-left:var(--blockquote-border-left);
  margin:.5em 10px;
  padding:.5em 10px
}
footer {
  text-align:center
}