:root {
  color-scheme: dark;
  word-break: break-word;
  font-family: sans-serif;
}

main {
  /* Float headings to the left of the container, outside of the main column */
  max-width: 55rem;
  h1, h2 {
    font-size: 200%; /* consistant font size */
    @media (min-width: 50rem) {
      /* Don't cram them right against the edge of screens */
      margin-left: 2rem;
    }
  }
  /* Text fills a narrower column, centered inside main */
  p {
    max-width: 45rem;
    margin: auto;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }
  ol, ul {
    li {
      margin-top: 1rem;
    }
    @media (min-width: 50rem) {
      /* Let markers break the margin, but only if the screen is wide enough */
      margin-right: 5rem;
      padding-left: 4rem;
      li {
        padding-left: 1rem;
      }
    }
  }
  /* Images fill the same column as text */
  img, p img, p a img {
    max-width: 45rem;
    margin: auto;
    width: 100%;
    height: auto;
    display: block;
  }
}

/* Captions for images */
figcaption {
  opacity: 0.5;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Margin notes */
@media (min-width: 70rem) {
  /* If screen is wide enough, use margin notes */
  margin-note {
    border-top: 1px solid;
    position: absolute;
    /* Margin-note is slighly wider than the text so the border intrudes into the clolumn */
    left: 51rem;
    width: calc(100svw - 52rem);
    display: block;
    /* Prevent note from moving too far away from column on wide screens */
    max-width: 30rem;
    /* reduce contrast */
    opacity: 0.5;
    p {
      /* Keep a sensible size */
      display: block;
      max-width: 20em;
      /* Keep note away from column and edge */
      margin-top: 1rem;
      margin-left: 4rem;
      margin-right: 1rem;
      float: right;
    }
  }
}
@media not (min-width: 70rem) {
  /* Inline notes using a left border */
  margin-note {
    max-width: 50rem;
    margin: auto;
    display: block;
    border-left: 1px solid;
    padding-left: 1rem;
    padding-right: 1rem;
    p {
      opacity: 0.5;
    }
  }
}