:root {
      --color-background: #000;
      --color-text: #ccc;
      --color-headings: #fff;
      --color-lila-low: #b19cd9;
      --color-lila-high: #6a0dad;
      --color-highlight: #6a0dad;
      --transition: 0.25s ease;
      --max-body-width: 80vw;
      --max-line-length: 40rem;
    }

    html {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: calc(1em / 16 * 18);
      line-height: 1.6;
    }

    body {
      color: var(--color-text);
      background-color: var(--color-background);
      width: min(var(--max-body-width), var(--max-line-length));
      margin: 0 auto;
      padding: 4rem 0;
      text-align: justify;
      hyphens: auto;
    }

    h1, h2, h3 {
      color: var(--color-headings);
      text-align: center;
    }

    h1 {
      font-size: 2.5rem;
      font-weight: 900;
      margin-bottom: 3rem;
      border-bottom: 1px solid var(--color-lila-high);
      padding-bottom: 0.5rem;
      display: inline-block;
    }

    h2 {
      font-size: 1.8rem;
      font-weight: 700;
      margin: 3rem 0 1.5rem;
      position: relative;
    }

    h2::after {
      content: "";
      display: block;
      width: 50px;
      height: 3px;
      background: var(--color-lila-high);
      margin: 0.5rem auto 0;
    }

    h3 {
      font-size: 1.4rem;
      font-weight: 600;
      margin: 2rem 0 1rem;
      color: var(--color-lila-low);
    }

    a:not(.no-deco) {
      color: var(--color-lila-low);
      text-decoration: none;
      font-weight: 600;
      transition: all var(--transition);
    }

    a:not(.no-deco):hover {
      color: var(--color-lila-high);
      text-decoration: underline;
      text-decoration-color: var(--color-lila-high);
      text-decoration-thickness: 2px;
    }

    strong {
      font-weight: 700;
      color: white;
      background-color: var(--color-highlight);
      padding: 0.15em 0.35em;
      border-radius: 3px;
      box-shadow: 0 0 0 1px rgba(106, 13, 173, 0.7);
      box-decoration-break: clone;
      transition: all var(--transition);
    }

    blockquote {
      border-left: 3px solid var(--color-lila-high);
      margin: 2rem 0;
      padding: 0 1rem;
      font-style: italic;
      text-align: center;
      font-size: 1.2rem;
      color: var(--color-lila-low);
    }

    p {
      margin: 1.5rem 0;
      text-indent: 1em;
    }

    .signature {
      text-align: center;
      margin-top: 4rem;
      font-family: 'Georgia', serif;
      font-size: 1.5rem;
      font-style: italic;
      color: var(--color-headings);
    }

    .footnote {
      font-size: 0.8rem;
      color: #888;
      text-align: center;
      margin-top: 2rem;
      border-top: 1px dashed #444;
      padding-top: 1rem;
    }

    .open-source {
      background-color: rgba(106, 13, 173, 0.2);
      padding: 0.1em 0.2em;
      border-radius: 3px;
    }

    @media screen and (max-width: 768px) {
      body { width: 90vw; padding: 2rem 0; }
      h1 { font-size: 2rem; }
      h2 { font-size: 1.5rem; }
    }