html {
  background: #ff44d8;
  margin: 0;
  padding: 0;

  body {
    --x: -0.8em;
    margin: 0;
    padding: 1em;
    padding-bottom: 0;
    background: #44ffd8;
    min-height: fit-content;
    box-shadow: 0 0 3em 0 blue;

    h1,
    h2 {
      font-size: 2rem;
      background: white;
      color: #333;
      border: 1px solid black;
      border-width: 1px 0;
      position: relative;
      --x: -0.5em;
      --p: 0.3em;
      left: var(--x);
      width: calc(-2 * var(--x) + 100% - 2 * var(--p));
      top: -0.5em;
      padding: var(--p);
    }

    h2 {
      --x: -0.8em;
      font-size: 1.25rem;
      margin-top: 2rem;
    }

    graphics-element {
      background: white;
    }

    pre {
      background: white;
      padding: 1em;
    }

    footer {
      --x: -0.8em;
      position: relative;
      margin-top: 2em;
      margin-bottom: 0;
      padding:1em;
      left: var(--x);
      width: calc(-2 * var(--x) + 100%);
      background: white;
      font-size: 1.25em;
      text-align: center;
      font-family: Verdana;
      border-radius: 0 0 4px 4px;

      a {
        text-decoration: none;
        cursor: pointer;
      }
    }
  }
}