:root {
  --dim: 2.5vw; /* Dimensions */
  --pxt: 12; /* Pixel total each dimension */
  --stcl: #444; /* Stroke colour */
  --txcl: #222; /* Text colour */
  --bgcl: #fff; /* Background colour */
  --accl: #306dd3; /* Action colour */

  --poa: 3; /* Pixels outside angle */
  --pxs: calc(var(--dim) / var(--pxt)); /* Pixel size */
  --asos: calc(var(--pxs) * (var(--pxt) - var(--poa))); /* Angle start offset */
}
@media (prefers-color-scheme: dark) {
  :root {
    --stcl: #cfcfcf; /* Stroke colour */
    --txcl: #c2c2c2; /* Text colour */
    --bgcl: #222; /* Background colour */
    --accl: #9da2ff; /* Action colour */
  }
}
body {
  font-family: "sans", Arial, sans-serif;
  font-size: 14px;
  background-color: var(--bgcl);
  color: var(--txcl);
}
section {
  max-width: 42vw;
  margin: 0 auto 2em auto;
  overflow: hidden;
  clear: both;
  display: block;
}

h1 {
  font-size: 1.6em;
  font-weight: normal;
  line-height: 1.25em;
  margin: 3vw 0 1vw 0;
}
h2 {
  display: inline-block;
  margin: 3em 0 1em 0;
  font-size: 1.4em;
  line-height: 1.6em;
  page-break-after: avoid;
}

h3 {
  font-size: 1.2em;
  margin: 4em 0 1em 0;
  page-break-after: avoid;
}

h4 {
  font-size: 1em;
  margin: 4em 0 1em 0;
  page-break-before: avoid;
  page-break-after: avoid;
}
a {
  color: var(--accl);
}

p {
  margin: 1vw 0;
}
ul {
  margin-top: 0.6em;
  margin-bottom: 1vw;
}
li {
  margin-top: 0.4em;
}
@media print {
  p {
    break-inside: avoid;
  }
  section {
    max-width: 95%;
    width: 95%;
  }
  body {
    max-width: 95%;
    width: 95%;
    margin: 2em;
    font-size: 10px;
  }
}