@-webkit-keyframes rotation {
        from {
          -webkit-transform: rotate(0deg);
        }

        to {
          -webkit-transform: rotate(360deg);
        }
      }

      @-moz-keyframes rotation {
        from {
          -moz-transform: rotate(0deg);
        }

        to {
          -moz-transform: rotate(360deg);
        }
      }

      @-o-keyframes rotation {
        from {
          -o-transform: rotate(0deg);
        }

        to {
          -o-transform: rotate(360deg);
        }
      }

      @keyframes rotation {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }

      html {
        background: #060612;
      }

      body {
        font-family: arial;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        min-height: fill-available;
        min-height: 100svh; /* Otherwise contents can be covered by an address bar in Safari on iOS 15 */
        min-width: 100vw;
        background: radial-gradient(
          56.63% 56.63% at 50% 43.37%,
          #1c1726 0%,
          #060612 100%
        );
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        place-items: center;
      }

      body.scrollingDisabled {
        overflow: hidden;
      }

      .emscripten {
        padding-right: 0;
        display: block;
      }

      div.emscripten {
        text-align: center;
      }

      /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
      canvas.emscripten {
        display: none;
        border: 0px none;
        background-color: black;
        position: relative;
        transition: opacity 5s ease-in;
        -webkit-transition: opacity 5s ease-in;
        opacity: 0;
        filter: blur(0) grayscale(0);
        margin-top: auto;
        margin-bottom: auto;
        image-rendering: optimizeSpeed;             /* Older versions of FF          */
        image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
        image-rendering: -webkit-optimize-contrast; /* Safari                        */
        image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
        image-rendering: pixelated;                 /* Awesome future-browsers       */
        -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
      }

      canvas.active {
        animation-name: fadeIn;
        animation-duration: 2s;
        opacity: 1;
      }

      canvas.paused {
        animation-name: blur;
        animation-duration: 0.5s;
        filter: blur(2px) grayscale(1);
      }

      canvas.unpaused {
        animation-name: none;
      }

      canvas.animatedSizeTransitions {
        transition: width 0.3s ease, height 0.3s ease;
      }

      @keyframes fadeIn {
        0% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
      }

      @keyframes blur {
        0% {
          filter: blur(0) grayscale(0);
        }

        100% {
          filter: blur(2px) grayscale(1);
        }
      }

      .spinner {
        height: 30px;
        width: 30px;

        -webkit-animation: rotation 0.8s linear infinite;
        -moz-animation: rotation 0.8s linear infinite;
        -o-animation: rotation 0.8s linear infinite;
        animation: rotation 0.8s linear infinite;

        border: 5px solid #bdff00;
        border-top: 5px solid #719900;
        border-radius: 100%;
      }

      .floating-control {
        position: absolute;
        display: none;
        border: none;

        left: 0px;
        top: 0px;
        width: 400px;
        height: 100%;
        padding: 10px;

        font-family: monospace;
        font-size: 8;
        color: white;
        background: rgba(53, 18, 84, 0.8);
        box-shadow: rgb(9 8 13 / 20%) -2px 2px 4px, rgb(9 8 13 / 40%) -4px 4px 16px;
      }

      #status {
        display: inline-block;
        vertical-align: top;
        font-weight: bold;
        color: white;
      }

      #progress {
        width: 250px;
        height: 10px;
        -webkit-appearance: none;
        appearance: none;
        padding: 5px;
      }

      /* Determines the style of the background of the progress bar */
      progress[value]::-webkit-progress-bar {
        background-color: #8492a6;
        height: 10px;
        border-radius: 15px;
      }
      /* Determines the style of the completed part of the progress bar */
      progress[value]::-webkit-progress-value {
        background-image: -webkit-linear-gradient(left, #719900, #bdff00);
        height: 10px;
        border-radius: 15px;
      }

      div.loading {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        pointer-events: none;
      }
      div.loading > * {
        padding: 10px;
        margin: 10px;
      }

      .output-container {
        text-align: center;
        margin-top: auto;
      }
      .output-button {
        border: none;
        width: 200px;
        height: 25px;
        margin: 5px;
        border-radius: 5px;
        cursor: pointer;
        background-color: black;
        color: #20c20e;
        font-family: "Lucida Console", Monaco, monospace;
      }

      #output {
        display: none;
        height: 200px;
        background-color: black;
        color: white;
        font-family: "Lucida Console", Monaco, monospace;
        outline: none;
        border: none;
        padding: 0;
        width: 100%;
      }

      #message-container {
        display: none;
        min-height: 50px;
        background-color: rgba(20, 20, 20, 0.5);
        outline: none;
        border: none;
        padding: 0;
        width: 100%;
        position: absolute;
        top: 0;
      }

      #messages {
        margin-left: 50px;
        color: white;
        font-family: "Lucida Console", Monaco, monospace;
        outline: none;
        border: none;
        padding: 0;
      }

      img.qrCode {
         opacity: 1.0;
         width: 50%;
         height: 50%;
      }

      #pauseMenuContainer {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #pauseMenuContainer[hidden] {
        display: none !important;
        opacity: 0;
      }

      #pauseMenuBorder {
        background: linear-gradient(135deg, #FA1E4E, transparent 40%);
        padding: 1px;
        border-radius: 4px;
        clip-path: polygon(10.5px 0, 100% 0, 100% 100%, 0 100%, 0 10.5px);
        width: 70vw;
        max-width: 400px;
      }

      #pauseMenu {
        display: flex;
        flex-direction: column;
        padding: 60px 30px 60px 30px;
        background: linear-gradient(180deg, #2E273F 16.15%, rgba(46, 39, 63, 0.79) 56.25%, #2E273F 91.15%);
        border-radius: 4px;
        clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
        animation-name: fadeIn;
        animation-duration: 0.5s;
        opacity: 1;
      }

      #pauseMenu button {
        font-weight: 500;
        font-size: 17px;
        color: white;
        background: #FA1E4E;
        border: 1px solid #FA1E4E;
        border-radius: 6px;
        padding: 12px 24px;
        margin: 5px 0;
        -webkit-user-select: none;
        user-select: none;
      }

      #pauseMenu button#quitButton {
        background: #FA1E4E40;
      }

      #pauseMenu button:hover {
        filter: brightness(1.15);
      }

      #pauseMenu button:active {
        filter: brightness(0.85);
      }

      #pauseMenu button[hidden] {
        display: none;
      }

      .graph .labels.x-labels {
        background-color: white;
        text-anchor: middle;
      }

      .graph .labels.y-labels {
        text-anchor: end;
      }

      .graph {
        font-family: Averta, -apple-system, "Segoe UI", system-ui, sans-serif;
        font-feature-settings: "tnum", "lnum";
        font-style: normal;
        font-size: 14px;
        font-weight: 600;
        line-height: 21px;
        text-decoration-line: none;
        letter-spacing: 0.25px;
        background-color: transparent;
        fill: #ccc;
      }

      .graph .grid {
        stroke: #ccc;
        stroke-dasharray: 0;
        stroke-width: 1;
      }

      .labels {
        font-size: 4px;
      }

      .label-title {
        font-weight: bold;
        text-transform: uppercase;
        font-size: 4px;
      }

      .peer0 {
        fill: #fa1f4e;
        stroke: #fa1f4e;
      }
      .peer1 {
        fill: #a970ff;
        stroke: #a970ff;
      }
      .peer2 {
        fill: #4574ee;
        stroke: #4574ee;
      }
      .peer3 {
        fill: #c3ff6f;
        stroke: #c3ff6f;
      }

      .peer {
        stroke-width: 0;
      }

      .peer-frame-delay {
        fill: none;
        stroke-width: 1;
      }

      .acceptable-rollback-button {
        border: none;
        width: 50px;
        height: 25px;
        margin: 5px;
        border-radius: 5px;
        cursor: pointer;
        background-color: black;
        color: #20c20e;
        font-family: "Lucida Console", Monaco, monospace;
      }

      .peer-acceptable-rollback {
        fill: none;
        stroke-width: 1;
        opacity: 0.3;
      }

      .relay-rtt {
        stroke-width: 2;
      }