body {
    background-color: #050505;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.loader {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    animation: pulse 2s infinite ease-in-out;
}

.ring {
    position: absolute;
    width: 190px;
    height: 190px;
    border: 0px solid transparent;
    border-radius: 50%;
    --color: #fe53bb;
    border-bottom: 8px solid var(--color);
    animation: rotate1 2s ease-in-out infinite;
    box-shadow: 0 0 4px #8e8e8e;
    --rotation: rotateX(35deg)
    rotateY(-45deg);
}

.ring:nth-child(2) {
    --rotation: rotateX(70deg)
    rotateY(20deg);
    --color: #0400ff;
    animation-delay: -0.4s;
}

.ring:nth-child(3) {
    --rotation: rotateX(70deg)
    rotateY(-20deg);
    --color: #9d00ff;
    animation-delay: -0.6s;
}

.ring:nth-child(4) {
    --rotation: rotateX(110deg)
    rotateY(40deg);
    --color: #0400ff;
    animation-delay: -0.8s;
}

.ring:nth-child(5) {
    --rotation: rotateX(110deg)
    rotateY(-40deg);
    --color: #9d00ff;
    animation-delay: -0.10s;
}

.nucleus {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #bb09c4;
    border-radius: 50%;
    box-shadow: 0 0 20px #bb09c4, 0 0 50px #fe53bb;
}

@keyframes rotate1 {
    0% {
        transform: var(--rotation)
        rotateZ(0deg)
    }
    100% {
        transform: var(--rotation)
        rotateZ(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}