:root {
  --margin: 2rem;
}
body {
  color-scheme: light dark;
  background-color: Canvas;
  color: CanvasText;
  margin: 0 auto;
  max-width: 100ch;
  margin-bottom: 70vh;
}
h1, h2, h3, h4, h5, h6 {
  text-align: center;
  text-wrap: balance;
  small {
    display: block;
    margin-block: 0.2em;
  }
  a {
    text-decoration: none;
  }
}
a {
  color: inherit;
}
h1 {
  text-transform: uppercase;
  small {
    text-transform: none;
  }
}
h2 {
  margin-top: 48vh;
  padding-top: 2em;
  small {
    font-size: larger;
    text-transform: uppercase;
  }
}
h3 { padding-top: 5rem; }
h4 { padding-top: 3rem; }
h5 { padding-top: 2rem; }
h6 { padding-top: 2rem; }
p, h1, h2, h3, h4, h5, h6, ul, ol, div {
  --n: 2rem;
  margin-inline: var(--n);
  &.bookmark {
    margin-right: calc(var(--n) / 2);
    padding-right: calc(var(--n) / 2);
    box-shadow: 2px 0px 0px 0px CanvasText;
  }
}
blockquote {
  margin: 0;
  padding-left: 2rem;
}
p {
  text-align: justify;
  hyphens: auto;
  hanging-punctuation: first allow-end last;
}
p, li, a {
  line-height: 1.3;
}
page-num {
  display: none;
}
done {
  /*opacity: 0.5;*/
  display: block;
}
ul.links {
  max-width: 100%;
  padding-left: 1em;
  li {
    list-style-type: none;
  }
  a {
    color: inherit;
    display: block;
    text-indent: 0.75em hanging;
    text-wrap: pretty;
    &[data-level="1"] {
      padding-top: 2em;
      margin-block: 1em;
      font-weight: bold;
      text-transform: uppercase;
    }
    &[data-level="2"] { margin-left: 1em; }
    &[data-level="3"] { margin-left: 2em; }
    &[data-level="4"] { margin-left: 3em; }
    &[data-level="5"] { margin-left: 4em; }
    &[data-level="6"] { margin-left: 5em; }
  }
}
figure {
  margin-block: 4em;
  margin-inline: auto;
  width: fit-content;
  img {
    max-width: 100%;
  }
  figcaption {
    font-style: italic;
    padding: 0.2em;
    text-wrap: balance;
    text-align: center;
    font-size: small;
  }
}
f-n {
  font-size: 0.5em;
  opacity: 0.5;
  vertical-align: top;
  margin-inline: 0.5em;
  height: 1rem;
  display: inline-block;
  user-select: none;
  &::before {
    content: attr(data-n);
  }
}


body {
  opacity: 0;
  &.fade-in { opacity: 1; transition: opacity 1s; }
}