html {
        box-sizing: border-box;
    }

    *, *:before, *:after {
        box-sizing: inherit;
    }

    body {
        margin: 0;
        background: #161A1D;
        background: url('loader-background.jpg');
        background-position: center;
        background-size: cover;
        overflow: hidden;
    }

    #unity-canvas {
        width: 100vw;
        height: 100vh;
    }

    canvas {
        width: 100%;
        height: 100%;
        display: block;
        min-width: 700px;
        flex: 1 1 auto;
        user-select: none;
    }

      /* try to handle mobile dialog */
    canvas + * {
        z-index: 2;
    }

    /* Main styles */
    #scene {
        background-position: 100% 50%;
        background-size: 100%;
        display: flex;
    }

    #logo {
        display: block;
        max-width: 100vw;
        max-height: 70vh;
        width: 10%;
        height: 10vw;
        background: rgba(59, 119, 236, 0.9);
        padding: 20px;
        border-radius: 50%;
    }

    #unity-loading-bar {
      margin: 1.5em;
      border: 2px solid white;
      width: 50vw;
      border-radius: 30px;
      margin-bottom: -25%;
    }

    #unity-progress-bar-full {
      margin: 2px;
      border-radius: 30px;
      background: #78c2da;
      height: 0.7em;
      transform-origin: top left;
      -webkit-background-size: 30px 30px;
      -moz-background-size: 30px 30px;
      background-size: 30px 30px;
      background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent));
      background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      -webkit-animation: animate-stripes 1s linear infinite;
      -moz-animation: animate-stripes 1s linear infinite;
    }

    @-webkit-keyframes animate-stripes { 
      0% {background-position: 0 0;} 100% {background-position: 60px 0;}
    }
    
    @-moz-keyframes animate-stripes {
      0% {background-position: 0 0;} 100% {background-position: 60px 0;}
    }

    #loader {
      position: absolute;
      left: 0;
      top: 0%;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
      
    .spinner,
    .spinner:after {
      border-radius: 50%;
      width: 5em;
      height: 5em;
    }

    .spinner {
      margin: 10px;
      font-size: 10px;
      position: relative;
      text-indent: -9999em;
      border-top: 1.1em solid rgba(255, 255, 255, 0.2);
      border-right: 1.1em solid rgba(255, 255, 255, 0.2);
      border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
      border-left: 1.1em solid #ffffff;
      transform: translateZ(0);
      animation: spinner-spin 1.1s infinite linear;
    }

    @keyframes spinner-spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }