:root {
    --s: 25px;
    --g: 5px;
}

#loader {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    overflow: hidden;
    transition: opacity 0.5s ease;
    background-color: var(--color-background-body);
    z-index: 999999;
}

#loader > img {
    position: fixed;
    bottom: calc(50% + 24px);
    right: calc(calc(50% - calc(calc(3 * (1.353 * var(--s) + var(--g))) / 2)) + 24px);
    width: 64px;
    filter: invert(100%);
}

#loader > p {
    position: fixed;
    bottom: calc(50% - 72px);
    right: calc(calc(50% - calc(calc(3 * (1.353 * var(--s) + var(--g))) / 2)) + 24px);
    text-align: center;
    width: 64px;
    line-height: 1.4;
}

.loader-hide {
    opacity: 0;
}

.loader {
    position: fixed;
    bottom: 50%;
    right: calc(50% - calc(calc(3 * (1.353 * var(--s) + var(--g))) / 2));
    width: calc(3 * (1.353 * var(--s) + var(--g)));
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-color: #ccc #0000;
    animation: l16 1s infinite linear;
}

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

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

.loader::after {
    margin: 8px;
}

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