.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 50;
}
.loading-screen.hidden {
    display: none;
}
.loading-screen .row {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loading-screen h2 {
    color: white;
    margin: 0;
    letter-spacing: 5px;
    font-size: 48px;
}

.loading-screen .loading {
    width: 38px;
    height: 38px;
    position: relative;
}

.loading-screen .loading--dot {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
}
.loading-screen .loading--dot::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.loading-screen .loading--dot1 {
    transform: rotate(225deg);
    animation: loading-orbit1 5s infinite;
    animation-delay: 0ms;
}
.loading-screen .loading--dot1::after {
    background: white;
}

.loading-screen .loading--dot2 {
    transform: rotate(215deg);
    animation: loading-orbit2 5s infinite;
    animation-delay: 125ms;
}
.loading-screen .loading--dot2::after {
    background: #DDDDDD;
}

.loading-screen .loading--dot3 {
    transform: rotate(205deg);
    animation: loading-orbit3 5s infinite;
    animation-delay: 250ms;
}
.loading-screen .loading--dot3::after {
    background: #B2B2B2;
}

.loading-screen .loading--dot4 {
    transform: rotate(195deg);
    animation: loading-orbit4 5s infinite;
    animation-delay: 375ms;
}
.loading-screen .loading--dot4::after {
    background: #B2B2B2;
}

.loading-screen .loading--dot5 {
    transform: rotate(185deg);
    animation: loading-orbit5 5s infinite;
    animation-delay: 500ms;
}
.loading-screen .loading--dot5::after {
    background: #888888;
}

@media screen and (max-width:575px) {
    .loading-screen h2 {
        font-size: 32px;
    }
}

@media screen and (max-width:425px) {
    .loading-screen h2 {
        font-size: 28px;
    }
    .loading-screen .row {
        flex-direction: column;
    }
}

/* Keyframes animations */

@keyframes loading-orbit1 {
    0% { transform: rotate(225deg); animation-timing-function: ease-out; opacity: 1; }
    6% { transform: rotate(350deg); animation-timing-function: linear; }
    29% { transform: rotate(495deg); animation-timing-function: ease-in-out; }
    39% { transform: rotate(710deg); animation-timing-function: linear; }
    62% { transform: rotate(855deg); animation-timing-function: ease-in; }
    66% { transform: rotate(945deg); animation-timing-function: ease-in; opacity: 1; }
    67% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes loading-orbit2 {
    0% { transform: rotate(215deg); animation-timing-function: ease-out; opacity: 1; }
    6% { transform: rotate(340deg); animation-timing-function: linear; }
    29% { transform: rotate(485deg); animation-timing-function: ease-in-out; }
    39% { transform: rotate(700deg); animation-timing-function: linear; }
    62% { transform: rotate(845deg); animation-timing-function: ease-in; }
    66% { transform: rotate(935deg); animation-timing-function: ease-in; opacity: 1; }
    67% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes loading-orbit3 {
    0% { transform: rotate(205deg); animation-timing-function: ease-out; opacity: 1; }
    6% { transform: rotate(330deg); animation-timing-function: linear; }
    29% { transform: rotate(475deg); animation-timing-function: ease-in-out; }
    39% { transform: rotate(690deg); animation-timing-function: linear; }
    62% { transform: rotate(835deg); animation-timing-function: ease-in; }
    66% { transform: rotate(925deg); animation-timing-function: ease-in; opacity: 1; }
    67% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes loading-orbit4 {
    0% { transform: rotate(195deg); animation-timing-function: ease-out; opacity: 1; }
    6% { transform: rotate(320deg); animation-timing-function: linear; }
    29% { transform: rotate(465deg); animation-timing-function: ease-in-out; }
    39% { transform: rotate(680deg); animation-timing-function: linear; }
    62% { transform: rotate(825deg); animation-timing-function: ease-in; }
    66% { transform: rotate(915deg); animation-timing-function: ease-in; opacity: 1; }
    67% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes loading-orbit5 {
    0% { transform: rotate(185deg); animation-timing-function: ease-out; opacity: 1; }
    6% { transform: rotate(310deg); animation-timing-function: linear; }
    29% { transform: rotate(455deg); animation-timing-function: ease-in-out; }
    39% { transform: rotate(670deg); animation-timing-function: linear; }
    62% { transform: rotate(815deg); animation-timing-function: ease-in; }
    66% { transform: rotate(905deg); animation-timing-function: ease-in; opacity: 1; }
    67% { opacity: 0; }
    100% { opacity: 0; }
}