/* HTML: <div class="loader"></div> */

#contentPage {
    display: none;
}


/* #loadingPage {
    margin: 205px 0px;
    width: 35px;
    aspect-ratio: 1;
    --_g: no-repeat radial-gradient(farthest-side, #ffffff 94%, #ffffff00);
    --_f: no-repeat radial-gradient(farthest-side, #6a0000 94%, #ffffff00);
    background: var(--_f) 0 0, var(--_g) 100% 0, var(--_f) 100% 100%, var(--_g) 0 100%;
    background-size: 40% 40%;
    animation: l38 .6s infinite;
} */

@keyframes l38 {
    100% {
        background-position: 100% 0, 100% 100%, 0 100%, 0 0
    }
}

#loadingPage {
    margin: 205px 0px;
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    animation: l14 4s infinite;
}

#loadingPage::before,
#loadingPage::after {
    content: "";
    grid-area: 1/1;
    border: 8px solid;
    border-radius: 50%;
    border-color: rgb(112, 0, 0) rgb(112, 0, 0) #0000 #0000;
    mix-blend-mode: darken;
    animation: l14 1s infinite linear;
}

#loadingPage::after {
    border-color: #0000 #0000 rgb(50, 0, 100) rgb(50, 0, 101);
    animation-direction: reverse;
}

@keyframes l14 {
    100% {
        transform: rotate(1turn)
    }
}


/* for site*/


/* HTML: <div class="loaderSite"></div> */

.loaderSite {
    width: 28px;
    aspect-ratio: 1;
    display: grid;
    border: 2px solid #0000;
    border-radius: 50%;
    border-color: #c5c5c5 #0000;
    animation: l16 1s infinite linear;
}

.loaderSite::before,
.loaderSite::after {
    content: "";
    grid-area: 1/1;
    margin: 1px;
    border: inherit;
    border-radius: 50%;
}

.loaderSite::before {
    border-color: #f03355 #0000;
    animation: inherit;
    animation-duration: .5s;
    animation-direction: reverse;
}

.loaderSite::after {
    margin: 4px;
}

@keyframes l16 {
    100% {
        transform: rotate(1turn)
    }
}