@import "/stylesheets/fonts.css";

#loaded {
    top: -50vw;
    position: fixed;
    width: 5vw;
    height: 5vw;
    background: white, black;
    background-size: 100vh, 90vh;
    animation-fill-mode: forwards;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

#loading::before {
    background: linear-gradient(310deg, rgb(88, 6, 126) 0%, rgb(163,3,240) 20%, rgba(0,150,136,1) 70%, rgb(10, 127, 86) 97%);
    content: "";
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.boxes::before {
    content: "";
    position: absolute;
    left: -5vw;
    background: black;
    height: 150vh;
    width: 150vw;
}

.boxes {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-width: 90vw;
    width: 90vw;
    background: black;
    filter: blur(10px) contrast(18);
    mix-blend-mode: multiply;
}

.box {
    transform: translate(10vw);
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: white;
}

.box:nth-child(odd) {
    animation: spinLeft 2.5s 0.2s linear both infinite;
}

.box:nth-child(even) {
    animation: spinRight 1s 0.4s linear both infinite;
}

.box:nth-child(2n) {
    animation: pulse 2s ease-in-out 0.1s infinite;
}

.box:nth-child(4n) {
    animation-direction: reverse;
}

@keyframes pulse {
    50% {
        transform: scale(1.8);
    }
    70% {
        transform: scale(0.6);
    }
}
@keyframes spinLeft {
    from {
        transform: rotate(0deg) translate(50px);
    }
    to {
        transform: rotate(360deg) translate(50px);
    }
}
@keyframes spinRight {
    from {
        transform: rotate(360deg) translate(50px);
    }
    to {
        transform: rotate(0deg) translate(50px);
    }
}