.loadscreen-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.loadscreen-loading-text {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loadscreen-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -50%;
    margin-top: 32px;
    margin-bottom: 88px;
}

.loadscreen-spinner-part {
    width: 20px;
    height: 20px;
    border: 1px solid black;
    border-radius: 50%;
    position: absolute;
    offset-path: path("M40,0 A40,40 0 1,1 40,80 A40,40 0 1,1 40,0");
    offset-distance: 0%;
}

.loadscreen-first-ball {
    animation: first-ball 3s linear infinite;
    background-color: white;
}

.loadscreen-second-ball {
    animation: second-ball 3s linear infinite;
    background-color: #fcd0a3;
}

.loadscreen-third-ball {
    animation: third-ball 3s linear infinite;
    background-color: black;
}

.loadscreen-fourth-ball {
    animation: fourth-ball 3s linear infinite;
    background-color: #ce8e4e;
}

@keyframes first-ball {
    from {
        offset-distance: 0%;
    }

    to {
        offset-distance: 100%;
    }
}

@keyframes second-ball {
    from {
        offset-distance: 25%;
    }

    75% {
        offset-distance: 100%;
    }

    75.00001% {
        offset-distance: 0%;
    }

    to {
        offset-distance: 25%;
    }
}

@keyframes third-ball {
    from {
        offset-distance: 50%;
    }

    50% {
        offset-distance: 100%;
    }

    50.00001% {
        offset-distance: 0%;
    }

    to {
        offset-distance: 50%;
    }
}

@keyframes fourth-ball {
    from {
        offset-distance: 75%;
    }

    25% {
        offset-distance: 100%;
    }

    25.00001% {
        offset-distance: 0%;
    }

    to {
        offset-distance: 75%;
    }
}

.loadscreen-first-dot {
    animation: first-dot 3s linear infinite;
}

@keyframes first-dot {
    from {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    25.00001% {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

.loadscreen-second-dot {
    animation: second-dot 3s linear infinite;
}

@keyframes second-dot {
    from {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    50.00001% {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

.loadscreen-third-dot {
    animation: third-dot 3s linear infinite;
}

@keyframes third-dot {
    from {
        opacity: 0;
    }

    75% {
        opacity: 0;
    }

    75.00001% {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}