html, body { height: 100%; margin: 0px; user-select: none; } body { display: flex; align-items: center; background-color: #121212; overflow: hidden; } .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: none; border: 0px none; } .canvas_full_screen { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #loading_text { color: #F0F0F0; font-size: 20px; font-family: monospace; width: 100%; text-align: center; } .centered { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; } .loading_ripple { } .lds-ripple { display: inline-block; position: relative; width: 80px; height: 80px; } .lds-ripple div { position: absolute; border: 4px solid #fff; opacity: 1; border-radius: 50%; animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .lds-ripple div:nth-child(2) { animation-delay: -0.5s; } @keyframes lds-ripple { 0% { top: 36px; left: 36px; width: 0; height: 0; opacity: 0; } 4.9% { top: 36px; left: 36px; width: 0; height: 0; opacity: 0; } 5% { top: 36px; left: 36px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 72px; height: 72px; opacity: 0; } }