#spinnerContainer {
    z-index: 520;
    position: fixed;
    left: 50vw;
    top: 68vh;
    background: rgba(0, 0, 0, 0);
    background-image: none;
}

.lds-ellipsis {
    display: block;
    position: fixed;
    z-index: 509;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 120px;
    height: 80px;
    background: rgba(0, 0, 0, 0);
}

#game-logo {
    z-index: 600;
    position: fixed;
    max-width: 90%;
    max-height: 20%;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

#preloader-container {
    width: 100%;
    height: 100%;
    position: fixed;
}

#preloader {
    position: fixed;
    animation: fade-in 2s ease-out forwards;
}

#preloader-bg-book-image {
    animation: fade-in-out 3s infinite;
}

#preloader-bg-image, #preloader-bg-book-image {
    position: fixed;
    top: 20%;
    scale: 1.5;
    transform: translateX(-50%);
    left: 50%;
    transform-origin: left;
}

#preloader-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    animation: fade-in 2s ease-out forwards;
}

#loading-text {
    z-index: 530;
    max-height: 4.5em;
    max-width: 50%;
}

#progress-bg, #progress, #loading-text, #preloader-bar-bg {
    position: fixed;
    left: 50%;
    top: 70%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

#progress-bg, #progress {
    border-radius: 1.2em;
    display: grid;
    max-height: 15%;
}

#preloader-bar-bg {
    z-index: 510;
    opacity: 0;
    width: 70%;
    height: 12em;
    background: -webkit-radial-gradient(#5a8abe, #152262, #01061e, transparent);
    background: radial-gradient(closest-side, #5a8abe, #152262, #01061e, transparent);
}

#progress-bg {
    z-index: 511;
    width: 60%;
    height: 2.4em;
    border: 3px solid #3f3e3e;
    background: -webkit-radial-gradient(#062756, #0c0e18);
    background: radial-gradient(#062756, #0c0e18);
    box-shadow: 0 0 100px rgb(0, 79, 255);
}

#progress {
    z-index: 512;
    left: 20%;
    transform: translate(0, -50%);
    height: 2.3em;
    width: 59%;
    border: 2px solid #04f2fb;
    mix-blend-mode: screen;
    background: -webkit-radial-gradient(rgb(98, 255, 231), #37a8ff, #004769, #001c28);
    background: radial-gradient(closest-corner, rgb(98, 255, 231), #37a8ff, #004769, #001c28);
}

.lds-ellipsis div {
    position: fixed;
    width: 67px;
    height: 67px;
    background-image: url("tick.png");
    background-repeat: no-repeat;
    background-position: center;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 1 2px;
    animation: lds-ellipsis1 1s ease-in-out infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 48px;
    animation: lds-ellipsis4 0.5s 0.5s ease-out infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 83px;
    animation: lds-ellipsis3 1s 0.5s ease-in-out infinite;
}

@keyframes fade-in-out {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0.2;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes enter-in-small {
    0% {
        transform: translate(-50%, -20%);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes enter-in {
    0% {
        transform: translate(-50%, 0);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@keyframes lds-ellipsis1 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    100% {
        transform: translate(35px, 0);
        opacity: 1;
    }
}


@keyframes lds-ellipsis3 {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-35px, 0);
        opacity: 1;
    }
}

@keyframes lds-ellipsis4 {
    0% {
        opacity: 1;
        transform: translate(0, 0);
        scale: 1;
    }
    100% {
        opacity: 0;
        transform: translate(0, -30px);
        scale: 0.5;
    }
}

@keyframes particle {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
        scale: 0.5;
    }
    50% {
        opacity: 0.7;
        transform: translate(-50%, -50px);
        scale: 0.7;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -100px);
        scale: 1;
    }
}

@keyframes particles {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
        scale: 0.5;
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -10px);
        scale: 0.7;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -30px);
        scale: 1;
    }
}