*{
    margin: 0;
    padding: 0;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: black;
    min-height: 100vh;
}

.container{
    position: relative;
    width: 7em;
    height: 7em;
}

.loading{
    position: absolute;
    bottom: -4.5em;
    left: 50%;
    font-weight: bold;
    font-size: 1.2em;
    transform: translateX(-50%);
}

.ring{
    position: absolute;
    width: 8em;
    height: 8em;
    border: 4px solid;
    border-radius: 50%;
}

.ring:nth-child(1){
    top: -4em;
    left: calc(50% - (8em / 2));
    border-color:  rgb(250, 31, 250) transparent transparent transparent;
    animation: rotate 3.5s linear infinite;
}

.ring:nth-child(2){
    left: -4em;
    top: calc(50% - (8em / 2));
    border-color: rgb(87, 243, 87) transparent transparent transparent;
    animation: rotate2 3.5s linear infinite;
}

.ring:nth-child(3){
    right: -4em;
    top: calc(50% - (8em / 2));
    border-color: transparent transparent cyan transparent;
    animation: rotate 3.5s linear infinite;
}

.ring::before{
    content: '';
    position: absolute;
    width: .8em;
    height: .8em;
    border-radius: 50%;
}

.ring:nth-child(1)::before{
    right: .4em;
    top: 1em;
    background-color: rgb(250, 31, 250);
    box-shadow: 0 0 20px 10px rgba(250, 31, 250, .5);
}

.ring:nth-child(2)::before{
    left: .4em;
    top: 1em;
    background-color: rgb(87, 243, 87);
    box-shadow: 0 0 20px 10px  rgba(87, 243, 87, .5);
}

.ring:nth-child(3)::before{
    left: .5em;
    bottom: 1em;
    background-color: cyan;
    box-shadow: 0 0 20px 10px rgba(0, 255, 255, .5);
}

@keyframes rotate {
    to{
        transform: rotate(360deg);
    }
}

@keyframes rotate2 {
    to{
        transform: rotate(-360deg);
    }
}