html {
   box-sizing: border-box;
}

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

html,
body {
   height: 100%;
}

canvas {
   display: block;
}

body {
   margin: 0;
}

#unity-container {
   width: 100%;
   height: 100%;
   position: relative;
}

#unity-canvas {
   width: 100%;
   height: 100%;

   background: {
         {
            {
            BACKGROUND_COLOR
         }
      }
   }

   ;
}

#loading-cover {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

#unity-loading-bar {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

#unity-logo {
   text-align: center;
}

#unity-logo img {
   max-width: 80%;
   max-height: 80%;
}

#unity-progress-bar-empty {
   width: 40%;
   height: 24px;
   margin: 10px 20px 20px 10px;
   text-align: left;
   border: 1px solid rgb(103, 103, 103);
   padding: 2px;
}

#unity-progress-bar-full {
   width: 0%;
   height: 100%;
   background: rgb(30, 30, 30);
}

.light #unity-progress-bar-empty {
   border-color: black;
}

.light #unity-progress-bar-full {
   background: black;
}

.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 #131313;
   transform: translateZ(0);
   animation: spinner-spin 1.1s infinite linear;
}

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

   100% {
      transform: rotate(360deg);
   }
}