:root {
    --ff-sans: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --clr-text: #f8f9fa;
    --anim-loading-s: 2s;
}

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

.loader-sdp {
    color: var(--clr-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    fill: none;
    stroke: var(--clr-text);
    & #Layer_1 {
        opacity: 0;
        animation: Layer_1 var(--anim-loading-s) ease infinite;
    }
    & #Layer_2 {
        opacity: 0;
        animation: Layer_2 var(--anim-loading-s) ease infinite;
    }
    & #Layer_3 {
        opacity: 0;
        animation: Layer_3 var(--anim-loading-s) ease infinite;
    }
}

@keyframes Layer_1 {
    5% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    95% {
        opacity: 0;
    }
}

@keyframes Layer_2 {
    15% {
        opacity: 0;
    }
    35% {
        opacity: 1;
    }
    65% {
        opacity: 1;
    }
    85% {
        opacity: 0;
    }
}

@keyframes Layer_3 {
    25% {
        opacity: 0;
    }
    45% {
        opacity: 1;
    }
    55% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
}