/*

@Programith

*/

:root {
    --color: #00d7fe;
    --animation-duration: 1600;
}

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

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

body::before {
    width: 1.5vh;
    height: 1.5vh;
    background: var(--color);
    border-radius: 50%;
    box-shadow: 0 0 1vh 1px var(--color);
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.75s;
}

svg {
    width: 100%;
    height: 75vh;
}

circle {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    fill: none;
    stroke: var(--color);
    stroke-width: 1;
    stroke-dasharray: 310;
    stroke-dashoffset: 310;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: calc(var(--animation-duration) * 1ms);
    transform-origin: center;
    transition: 0.75s;
}

@keyframes drawCircle {
    to {
        stroke-dashoffset: -310;
    }
}

circle:nth-child(1) {
    transform: rotateX(80deg) rotateY(20deg) rotateZ(0deg);
    animation-name: drawCircle, rotateCircle1;
}

@keyframes rotateCircle1 {
    to {
        transform: rotateX(80deg) rotateY(20deg) rotateZ(360deg);
    }
}

circle:nth-child(2) {
    transform: rotateX(75deg) rotateY(60deg) rotateZ(0deg);
    animation-name: drawCircle, rotateCircle2;
    animation-delay: 0.125s;
}

@keyframes rotateCircle2 {
    to {
        transform: rotateX(75deg) rotateY(60deg) rotateZ(360deg);
    }
}

circle:nth-child(3) {
    transform: rotateX(-75deg) rotateY(60deg) rotateZ(0deg);
    animation-name: drawCircle, rotateCircle3;
    animation-delay: 0.25s;
}

@keyframes rotateCircle3 {
    to {
        transform: rotateX(-75deg) rotateY(60deg) rotateZ(360deg);
    }
}

circle:nth-child(4) {
    transform: rotateX(-80deg) rotateY(20deg) rotateZ(0deg);
    animation-name: drawCircle, rotateCircle4;
    animation-delay: 0.375s;
}

@keyframes rotateCircle4 {
    to {
        transform: rotateX(-80deg) rotateY(20deg) rotateZ(360deg);
    }
}