/* HTML: <div class="loader"></div> */
.loader {
    width: 75px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-color: #006020 #0000;
    animation: l16 1s infinite linear;
    margin: auto;
}

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

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

.loader::after {
    margin: 8px;
    border-color: #800000 #0000;
}

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

.loader-container {
    width: fit-content;
    top: 0;
    bottom: 0;
    z-index: 10000;
    right: 0;
    left: 0;
    color: white;
    /* z-index: 10000; */
    position: fixed;
    margin: auto;
    height: fit-content;
    pointer-events: none;
}

.logo{
    cursor: pointer;
}