html {
  width: 100%;
  background: #ff44d8;
  display: flex;
  align-content: center;
  justify-content: center;
  margin: 0;
  padding: 0;

  body {
    margin: 0;
    padding: 1em;
    background: #44ffd8;
    min-width: 600px;
    max-width: 960px;
    min-height: 100vh;
    box-shadow: 0 0 3em 0 blue;

    h1 {
      background: white;
      color: #333;
      border: 1px solid black;
      border-width: 1px 0;
      position: relative;
      left: -0.5em;
      top: -0.5em;
      width: calc(100% + 0.5em - 3px);
      padding: 0.3em;
    }

    p {
      font-size: 1.5em;
      font-family: Verdana;
    }

    canvas {
      display: block;
      width: 512px;
      height: 512px;
      margin: auto;
      background: white;
    }

    footer {
      position: fixed;
      z-index: 1;
      right: 0.5em;
      bottom: 0.5em;
      padding: 0.5em 0.5em 0.25em;

      border: 1px solid grey;
      border-radius: 0.5em;
      background: #a9f3ff;
      box-shadow: 2px 2px 0 3px black;

      &:hover {
        background: #02ffff;
      }
      a,
      a:visited {
        font-family: Arial;
        text-decoration: none;
        color: black;
      }
    }
  }
}