html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; font-family: "Sulphur Point", serif; font-weight: 400; font-style: normal; overflow: hidden; } #gameContainer { width: 100vw; height: 100vh; } canvas { width: 100%; height: 100%; display: block; } .canvas + * { z-index: 2; } .container { max-width: 1600px; position: relative; } .posImg, .logo, .pos_progress, .pos_spinner { position: absolute; } .posImg { top: 0; width: 100%; height: 100%; } .logo { display: block; max-width: 100vw; max-height: 70vh; top: 300px; } .pos_progress { bottom: 15%; width: 100%; } .progress { margin: 1.5em auto; max-width: 436px; height: auto; display: none; position: relative; } .full { width: 97%; transform-origin: top left; } .progress .posfull { top: 8px; z-index: 1; } .progress .posbox { top: 0; z-index: 2; } #loader { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 102, 255)); } .spinner { display: none; border-radius: 50%; width: 5em; height: 5em; 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); } }