:root {
    --timing-function: cubic-bezier(.75,-0.01,.76,1);
    --animation-duration: 1.5s;
    --dimention: 10px;
    --animation-arc: -25px;
    --animation-type: pulse;
    --margin-left: 0px;
    --opacity-level: 0.8;
}

body {
    height: 100vh;
}

.loader {

}

.loadingPosition {
    margin: auto;
}

.loading-container {
    height: 100%;
    width: 100%;
    position: relative;
    background-color: rgb(255, 255, 255, 0.5);
}

.orb {
    border-radius: 10px;
    height: var(--dimention);
    width: var(--dimention);
    margin: 0 auto;
    background-color: rgb(195, 20, 24);
    opacity: 0;
    display: inline-block;
    position: absolute;
    margin-top: -10px;
    top: 50%;
    left: 50%;
    margin-left: var(--margin-left);
    animation: var(--animation-type);
    animation-duration: var(--animation-duration);
    animation-timing-function: var(--timing-function);
    animation-iteration-count: infinite;
    animation-delay: 0s;
}

.orb1 {
    border-radius: 50px;
    background-color: rgb(247, 106, 14);
    opacity: 0;
    height: var(--dimention);
    width: var(--dimention);
    margin: 0 auto;
    position: absolute;
    display: inline-block;
    margin-top: -10px;
    top: 50%;
    left: 50%;
    animation: var(--animation-type);
    margin-left: var(--margin-left);
    animation-duration: var(--animation-duration);
    animation-timing-function: var(--timing-function);
    animation-iteration-count: infinite;
    animation-delay: 0.15s;
}

.orb2 {
    border-radius: 50px;
    background-color: rgb(234, 205, 30);
    opacity: 0;
    height: var(--dimention);
    width: var(--dimention);
    margin: 0 auto;
    position: absolute;
    display: inline-block;
    margin-top: -10px;
    top: 50%;
    left: 50%;
    margin-left: var(--margin-left);
    animation: var(--animation-type);
    animation-duration: var(--animation-duration);
    animation-timing-function: var(--timing-function);
    animation-iteration-count: infinite;
    animation-delay: 0.30s;
}

.orb3 {
    border-radius: 50px;
    background-color: rgb(102, 0171, 9);
    opacity: 0;
    height: var(--dimention);
    width: var(--dimention);
    margin: 0 auto;
    position: absolute;
    display: inline-block;
    margin-top: -10px;
    top: 50%;
    left: 50%;
    margin-left: var(--margin-left);
    animation: var(--animation-type);
    animation-duration: var(--animation-duration);
    animation-timing-function: var(--timing-function);
    animation-iteration-count: infinite;
    animation-delay: 0.45s;
}

.orb4 {
    border-radius: 50px;
    background-color: rgb(19, 125, 224);
    opacity: 0;
    height: var(--dimention);
    width: var(--dimention);
    margin: 0 auto;
    position: absolute;
    display: inline-block;
    margin-top: -10px;
    top: 50%;
    left: 50%;
    margin-left: var(--margin-left);
    animation: var(--animation-type);
    animation-duration: var(--animation-duration);
    animation-timing-function: var(--timing-function);
    animation-iteration-count: infinite;
    animation-delay: 0.6s;
}

.orb5 {
    border-radius: 50px;
    background-color: rgb(136, 9, 181);
    opacity: 0;
    height: var(--dimention);
    width: var(--dimention);
    margin: 0 auto;
    position: absolute;
    display: inline-block;
    margin-top: -10px;
    top: 50%;
    left: 50%;
    margin-left: var(--margin-left);
    animation: var(--animation-type);
    animation-duration: var(--animation-duration);
    animation-timing-function: var(--timing-function);
    animation-iteration-count: infinite;
    animation-delay: 0.75s;
}

/*@keyframes pulse {
    0% {
        transform: rotate(0deg) translateX(var(--animation-arc)) rotate(0deg);
        opacity: var(--opacity-level);
    }

    80% {
        transform: rotate(360deg) translateX(var(--animation-arc)) rotate(-360deg);
        opacity: var(--opacity-level);
    }

    100% {
        transform: rotate(360deg) translateX(var(--animation-arc)) rotate(-360deg);
        opacity: var(--opacity-level);
    }
}*/

@keyframes pulse {
    0% {
        transform: translateX(-50px);
        opacity: var(--opacity-level);
    }

    50% {
        transform: translateX(50px);
        opacity: var(--opacity-level);
    }

    100% {
        transform: translateX(-50px);
        opacity: var(--opacity-level);
    }

    /*100% {
        transform: rotate(360deg) translateX(var(--animation-arc)) rotate(-360deg);
        opacity: var(--opacity-level);
    }*/
}