*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

:root {
    --main-color-bg: linear-gradient( to bottom,#2F6F66 0%,#1F4F52 50%, #0B1F3A 100%);
    --main-color-bg: red;
    --ring-color: #F0E68C;
    --ring-color2: #98FB98;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content:center;
}


#loader {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column; /* IMPORTANT */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    background: var(--main-color-bg);
}

.ring{
    width: 250px;
    height: 250px;
    border: 0px solid #0b1501;
    border-radius: 50%;
    position: absolute;
}

.ring:nth-child(1){
    border-bottom-width:12px; 
    border-color: rgb(255, 0, 255);
    animation: rotate 2s linear infinite;
} 

.ring:nth-child(2){
    border-right-width:12px; 
    border-color: rgb(0, 132, 255);
    animation: rotate2 2s linear infinite;
} 

.ring:nth-child(3){
    border-top-width:12px; 
    border-color: rgb(102, 255, 0);
    animation: rotate3 2s linear infinite;
}

.loading {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
}


.dots::after {
    content: '';
    animation: dots 1.5s steps(3, end) infinite;
}

@keyframes dots {
    0% {
        content: '';
    }

    33% {
        content: '.';
    }

    66% {
        content: '..';
    }

    100% {
        content: '...';
    }
}


@keyframes rotate{
    0%{
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100%{
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate2{
    0%{
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100%{
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}


@keyframes rotate3{
    0%{
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100%{
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}