html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-overflow-scrolling: touch;
        background: black;
        color: white;
        font-family: monospace;
      }

      canvas {
        image-rendering: pixelated;
        max-width: 100vw;
        max-height: 100vh;
        width: calc(100vmin);
        height: calc(100vmin);
      }      

      .loaded canvas {
        opacity: 1;
      }

      .loader {
        display: block;
        position: absolute;
        color: white;
        font-family: 'Courier New', Courier, monospace;
        font-size: 12pt;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
      }

      .loader:after {
        content: attr(data-progress);
        margin-left: 1em;
      }

      .loaded canvas {
        opacity: 1;
      }
      * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
      }