@import url('./base.css');

.loader {
    animation: spin 0.5s linear infinite;
    height: 10px;
    width: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -5px;
}

@keyframes spin {
    0% {
        box-shadow:
            0px -30px rgb(255, 255, 255),
            10px -30px rgb(255, 255, 255),
            20px -20px rgb(255, 255, 255),
            30px -10px rgb(255, 255, 255),
            30px 0px rgb(255, 255, 255),
            30px 10px rgb(255, 255, 255),
            20px 20px rgb(255, 255, 255),
            10px 30px rgb(255, 255, 255),
            0px 30px transparent,
            -10px 30px transparent,
            -20px 20px transparent,
            -30px 10px transparent,
            -30px 0px transparent,
            -30px -10px transparent,
            -20px -20px transparent,
            -10px -30px transparent;
    }

    6.25% {
        box-shadow:
            0px -30px transparent,
            10px -30px rgb(255, 255, 255),
            20px -20px rgb(255, 255, 255),
            30px -10px rgb(255, 255, 255),
            30px 0px rgb(255, 255, 255),
            30px 10px rgb(255, 255, 255),
            20px 20px rgb(255, 255, 255),
            10px 30px rgb(255, 255, 255),
            0px 30px rgb(255, 255, 255),
            -10px 30px transparent,
            -20px 20px transparent,
            -30px 10px transparent,
            -30px 0px transparent,
            -30px -10px transparent,
            -20px -20px transparent,
            -10px -30px transparent;
    }

    12.5% {
        box-shadow:
            0px -30px transparent,
            10px -30px transparent,
            20px -20px rgb(255, 255, 255),
            30px -10px rgb(255, 255, 255),
            30px 0px rgb(255, 255, 255),
            30px 10px rgb(255, 255, 255),
            20px 20px rgb(255, 255, 255),
            10px 30px rgb(255, 255, 255),
            0px 30px rgb(255, 255, 255),
            -10px 30px rgb(255, 255, 255),
            -20px 20px transparent,
            -30px 10px transparent,
            -30px 0px transparent,
            -30px -10px transparent,
            -20px -20px transparent,
            -10px -30px transparent;
    }

    18.75% {
        box-shadow:
            0px -30px transparent,
            10px -30px transparent,
            20px -20px transparent,
            30px -10px rgb(255, 255, 255),
            30px 0px rgb(255, 255, 255),
            30px 10px rgb(255, 255, 255),
            20px 20px rgb(255, 255, 255),
            10px 30px rgb(255, 255, 255),
            0px 30px rgb(255, 255, 255),
            -10px 30px rgb(255, 255, 255),
            -20px 20px rgb(255, 255, 255),
            -30px 10px transparent,
            -30px 0px transparent,
            -30px -10px transparent,
            -20px -20px transparent,
            -10px -30px transparent;
    }

    25% {
        box-shadow:
            0px -30px transparent,
            10px -30px transparent,
            20px -20px transparent,
            30px -10px transparent,
            30px 0px rgb(255, 255, 255),
            30px 10px rgb(255, 255, 255),
            20px 20px rgb(255, 255, 255),
            10px 30px rgb(255, 255, 255),
            0px 30px rgb(255, 255, 255),
            -10px 30px rgb(255, 255, 255),
            -20px 20px rgb(255, 255, 255),
            -30px 10px rgb(255, 255, 255),
            -30px 0px transparent,
            -30px -10px transparent,
            -20px -20px transparent,
            -10px -30px transparent;
    }

    31.25% {
        box-shadow:
            0px -30px transparent,
            10px -30px transparent,
            20px -20px transparent,
            30px -10px transparent,
            30px 0px transparent,
            30px 10px rgb(255, 255, 255),
            20px 20px rgb(255, 255, 255),
            10px 30px rgb(255, 255, 255),
            0px 30px rgb(255, 255, 255),
            -10px 30px rgb(255, 255, 255),
            -20px 20px rgb(255, 255, 255),
            -30px 10px rgb(255, 255, 255),
            -30px 0px rgb(255, 255, 255),
            -30px -10px transparent,
            -20px -20px transparent,
            -10px -30px transparent;
    }

    37.5% {
        box-shadow:
            0px -30px transparent,
            10px -30px transparent,
            20px -20px transparent,
            30px -10px transparent,
            30px 0px transparent,
            30px 10px transparent,
            20px 20px rgb(255, 255, 255),
            10px 30px rgb(255, 255, 255),
            0px 30px rgb(255, 255, 255),
            -10px 30px rgb(255, 255, 255),
            -20px 20px rgb(255, 255, 255),
            -30px 10px rgb(255, 255, 255),
            -30px 0px rgb(255, 255, 255),
            -30px -10px rgb(255, 255, 255),
            -20px -20px transparent,
            -10px -30px transparent;
    }

    43.75% {
        box-shadow:
            0px -30px transparent,
            10px -30px transparent,
            20px -20px transparent,
            30px -10px transparent,
            30px 0px transparent,
            30px 10px transparent,
            20px 20px transparent,
            10px 30px rgb(255, 255, 255),
            0px 30px rgb(255, 255, 255),
            -10px 30px rgb(255, 255, 255),
            -20px 20px rgb(255, 255, 255),
            -30px 10px rgb(255, 255, 255),
            -30px 0px rgb(255, 255, 255),
            -30px -10px rgb(255, 255, 255),
            -20px -20px rgb(255, 255, 255),
            -10px -30px transparent;
    }

    50% {
        box-shadow:
            0px -30px transparent,
            10px -30px transparent,
            20px -20px transparent,
            30px -10px transparent,
            30px 0px transparent,
            30px 10px transparent,
            20px 20px transparent,
            10px 30px transparent,
            0px 30px rgb(255, 255, 255),
            -10px 30px rgb(255, 255, 255),
            -20px 20px rgb(255, 255, 255),
            -30px 10px rgb(255, 255, 255),
            -30px 0px rgb(255, 255, 255),
            -30px -10px rgb(255, 255, 255),
            -20px -20px rgb(255, 255, 255),
            -10px -30px rgb(255, 255, 255);
    }

    56.25% {
        box-shadow:
            0px -30px rgb(255, 255, 255),
            10px -30px transparent,
            20px -20px transparent,
            30px -10px transparent,
            30px 0px transparent,
            30px 10px transparent,
            20px 20px transparent,
            10px 30px transparent,
            0px 30px transparent,
            -10px 30px rgb(255, 255, 255),
            -20px 20px rgb(255, 255, 255),
            -30px 10px rgb(255, 255, 255),
            -30px 0px rgb(255, 255, 255),
            -30px -10px rgb(255, 255, 255),
            -20px -20px rgb(255, 255, 255),
            -10px -30px rgb(255, 255, 255);
    }

    62.5% {
        box-shadow:
            0px -30px rgb(255, 255, 255),
            10px -30px rgb(255, 255, 255),
            20px -20px transparent,
            30px -10px transparent,
            30px 0px transparent,
            30px 10px transparent,
            20px 20px transparent,
            10px 30px transparent,
            0px 30px transparent,
            -10px 30px transparent,
            -20px 20px rgb(255, 255, 255),
            -30px 10px rgb(255, 255, 255),
            -30px 0px rgb(255, 255, 255),
            -30px -10px rgb(255, 255, 255),
            -20px -20px rgb(255, 255, 255),
            -10px -30px rgb(255, 255, 255);
    }

    68.75% {
        box-shadow:
            0px -30px rgb(255, 255, 255),
            10px -30px rgb(255, 255, 255),
            20px -20px rgb(255, 255, 255),
            30px -10px transparent,
            30px 0px transparent,
            30px 10px transparent,
            20px 20px transparent,
            10px 30px transparent,
            0px 30px transparent,
            -10px 30px transparent,
            -20px 20px transparent,
            -30px 10px rgb(255, 255, 255),
            -30px 0px rgb(255, 255, 255),
            -30px -10px rgb(255, 255, 255),
            -20px -20px rgb(255, 255, 255),
            -10px -30px rgb(255, 255, 255);
    }

    75% {
        box-shadow:
            0px -30px rgb(255, 255, 255),
            10px -30px rgb(255, 255, 255),
            20px -20px rgb(255, 255, 255),
            30px -10px rgb(255, 255, 255),
            30px 0px transparent,
            30px 10px transparent,
            20px 20px transparent,
            10px 30px transparent,
            0px 30px transparent,
            -10px 30px transparent,
            -20px 20px transparent,
            -30px 10px transparent,
            -30px 0px rgb(255, 255, 255),
            -30px -10px rgb(255, 255, 255),
            -20px -20px rgb(255, 255, 255),
            -10px -30px rgb(255, 255, 255);
    }

    81.25% {
        box-shadow:
            0px -30px rgb(255, 255, 255),
            10px -30px rgb(255, 255, 255),
            20px -20px rgb(255, 255, 255),
            30px -10px rgb(255, 255, 255),
            30px 0px rgb(255, 255, 255),
            30px 10px transparent,
            20px 20px transparent,
            10px 30px transparent,
            0px 30px transparent,
            -10px 30px transparent,
            -20px 20px transparent,
            -30px 10px transparent,
            -30px 0px transparent,
            -30px -10px rgb(255, 255, 255),
            -20px -20px rgb(255, 255, 255),
            -10px -30px rgb(255, 255, 255);
    }

    87.5% {
        box-shadow:
            0px -30px rgb(255, 255, 255),
            10px -30px rgb(255, 255, 255),
            20px -20px rgb(255, 255, 255),
            30px -10px rgb(255, 255, 255),
            30px 0px rgb(255, 255, 255),
            30px 10px rgb(255, 255, 255),
            20px 20px transparent,
            10px 30px transparent,
            0px 30px transparent,
            -10px 30px transparent,
            -20px 20px transparent,
            -30px 10px transparent,
            -30px 0px transparent,
            -30px -10px transparent,
            -20px -20px rgb(255, 255, 255),
            -10px -30px rgb(255, 255, 255);
    }

    93.75% {
        box-shadow:
            0px -30px rgb(255, 255, 255),
            10px -30px rgb(255, 255, 255),
            20px -20px rgb(255, 255, 255),
            30px -10px rgb(255, 255, 255),
            30px 0px rgb(255, 255, 255),
            30px 10px rgb(255, 255, 255),
            20px 20px rgb(255, 255, 255),
            10px 30px transparent,
            0px 30px transparent,
            -10px 30px transparent,
            -20px 20px transparent,
            -30px 10px transparent,
            -30px 0px transparent,
            -30px -10px transparent,
            -20px -20px transparent,
            -10px -30px rgb(255, 255, 255);
    }

    100% {
        box-shadow:
            0px -30px rgb(255, 255, 255),
            10px -30px rgb(255, 255, 255),
            20px -20px rgb(255, 255, 255),
            30px -10px rgb(255, 255, 255),
            30px 0px rgb(255, 255, 255),
            30px 10px rgb(255, 255, 255),
            20px 20px rgb(255, 255, 255),
            10px 30px rgb(255, 255, 255),
            0px 30px transparent,
            -10px 30px transparent,
            -20px 20px transparent,
            -30px 10px transparent,
            -30px 0px transparent,
            -30px -10px transparent,
            -20px -20px transparent,
            -10px -30px transparent;
    }
}