:root {
    --dark-bg: 15, 30, 53; /* #0F1E35 */
    --light-bright-green: 137, 233, 244, 1; /* #89E9F4 */
    --outer-glow-green-xs: 93, 163, 175, 0.1; /* #5DA3AF */
    --filter-light-green: brightness(0) saturate(100%) invert(78%) sepia(51%) saturate(363%) hue-rotate(149deg) brightness(103%) contrast(91%) drop-shadow(4px 4px 12px rgba(var(--outer-glow-xs))); /* use generator https://angel-rs.github.io/css-color-filter-generator */

    --light-bright-yellow: 255, 250, 35, 1; /* #E4E06B */
    --outer-glow-yellow-xs: 255, 250, 35, 0.2; /* #FFF922 */
    --filter-light-yellow: brightness(0) saturate(100%) invert(100%) sepia(40%) saturate(5070%) hue-rotate(332deg) brightness(109%) contrast(108%) drop-shadow(4px 4px 12px rgba(var(--outer-glow-yellow))); /* use generator https://angel-rs.github.io/css-color-filter-generator */
}

::-webkit-scrollbar {
    width: 0;
}

.horizontal_line {
    margin: 0;
    border: 0;
    height: 1px;
    width: 100%;
    opacity: 1;
}

.cursor-pointer {
    cursor: pointer;
}

.background {
    /*width: 50vw;
    height: 95vh;*/
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.656);
    position:center;
    z-index: 10;
}

.spinner {
    position: relative;
    z-index: 50;
}

.word {
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    transform: translate(-50%,-50%);
    animation: text-color 2s ease-in-out infinite;
}

.spinnerSector {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 10px solid transparent;
    mix-blend-mode: overlay;
    animation: rotate var(--duration) var(--timing) infinite;
}

.spinnerRed {
    border-top-color: lightcoral;
    --duration: 1.8s;
    --timing: ease-in-out;
}

.spinnerGreen {
    border-left-color: lightblue;
    --duration: 2s;
    --timing: ease-in;
}

.spinnerBlue {
    border-bottom-color: lightgreen;
    --duration: 2.5s;
    --timing: ease-out;
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes text-color {
    0% {
        color: rgba(0,0,0,1)
    }

    25% {
        color: rgba(0,0,0,.65)
    }

    50% {
        color: rgba(0,0,0,.3)
    }
}

.test123 {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.656);
    position: fixed;
}