body {
  background-color: linen;
  max-width: min(50em, 100vw);
  margin-left: max(0px, calc( 50vw - 24em ));
  font-size: 1.1em;
}

h1, h2 {
  color: #303;
  margin-left: 8em;
} 

@media (width <= 30em) {
  h1, h2 { margin-left: 0.5em; }
  body { padding-right: 1.25em; }
}

@media (prefers-color-scheme: dark) {
  body {
    color: linen;
    background: #203;
  }

  h1, h2 {
    color: #ECF;
  }

  .main .label {
    color: #D8C8F0;
  }

  .main .titles .label {
    color: #D8B0FF;
  }
}

h2 {
  padding-left: 2em;
}

.main {
  margin-left: 40px;
  max-width: 40em;
}

.main ul {
  padding-left: 0px;
}

.main li {
  list-style-type: none;
  padding-top: 0.35em;
}

.label {
  color: #303;
  display: inline-block;
  width: 6em;
  font-size: 1.1em;
  font-weight: 600;
}

.titles .label {
  width: auto;
}