* {
    margin: 0;
    padding: 0;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
    background-color: #19191b !important;
}

:root {
    --green: brown;
    --blue: darkblue;
    --red: darkred;
    --yellow: yellow;

    --borderWidth: 10px;
    --shadowSpread: 5px;
}

/* loader */
.loader-wrapper {
    position: relative;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    perspective: 500px;
}

.line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    animation: 0.5s alternate-reverse infinite;
}

/* every line's custom style */
.line:nth-child(1) {
    border-bottom: var(--borderWidth) solid var(--green);
    transform: rotateX(35deg) rotateY(-45deg);
    animation-name: one;
}

.line:nth-child(2) {
    border-right: var(--borderWidth) solid var(--blue);
    transform: rotateX(50deg) rotateY(10deg);
    animation-name: two;
}

.line:nth-child(3) {
    border-top: var(--borderWidth) solid var(--red);
    transform: rotateX(35deg) rotateY(55deg);
    animation-name: three;
}

.line:nth-child(4) {
    border-left: var(--borderWidth) solid var(--yellow);
    transform: rotateX(65deg) rotateY(55deg);
    animation-name: four;
}

/* animations */
@keyframes one {
    to {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes two {
    to {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes three {
    to {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}

@keyframes four {
    to {
        transform: rotateX(65deg) rotateY(55deg) rotateZ(360deg);
    }
}