* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container {
    width: 100vw;
    height: 100vh;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader {
    width: 4rem;
    height: 4rem;
    transform-style: preserve-3d;
    perspective: 800px;
}
.arc {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-bottom: 3px solid hsl(196, 78%, 61%);
}
.arc:nth-child(1) {
    animation: rotate1 1.15s linear infinite;
    animation-delay: -0.8s;
}
.arc:nth-child(2) {
    animation: rotate2 1.15s linear infinite;
    animation-delay: -0.4s;
}
.arc:nth-child(3) {
    animation: rotate3 1.15s linear infinite;
    animation-delay: 0s;
}
@keyframes rotate1 {
    from {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(0);
    }
    to {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(1turn);
    }
}
@keyframes rotate2 {
    from {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(0);
    }
    to {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(1turn);
    }
}
@keyframes rotate3 {
    from {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(0);
    }
    to {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(1turn);
    }
}