.pl {
    width: 8em;
    height: 8em;
}

.pl circle {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.pl__ring1 {
    animation: ring1_ 4s 0s ease-in-out infinite;
}

.pl__ring2 {
    animation: ring2_ 4s 0.04s ease-in-out infinite;
}

.pl__ring3 {
    animation: ring3_ 4s 0.08s ease-in-out infinite;
}

.pl__ring4 {
    animation: ring4_ 4s 0.12s ease-in-out infinite;
}

.pl__ring5 {
    animation: ring5_ 4s 0.16s ease-in-out infinite;
}

.pl__ring6 {
    animation: ring6_ 4s 0.2s ease-in-out infinite;
}

/* Animations */

@keyframes ring1_ {
    from {
        stroke-dashoffset: -376.237129776;
        transform: rotate(-0.25turn);
        animation-timing-function: ease-in;
    }

    23% {
        stroke-dashoffset: -94.247778;
        transform: rotate(1turn);
        animation-timing-function: ease-out;
    }

    46%, 50% {
        stroke-dashoffset: -376.237129776;
        transform: rotate(2.25turn);
        animation-timing-function: ease-in;
    }

    73% {
        stroke-dashoffset: -94.247778;
        transform: rotate(3.5turn);
        animation-timing-function: ease-out;
    }

    96%, to {
        stroke-dashoffset: -376.237129776;
        transform: rotate(4.75turn);
    }

}


@keyframes ring2_ {
    from {
        stroke-dashoffset: -329.207488554;
        transform: rotate(-0.25turn);
        animation-timing-function: ease-in;
    }

    23% {
        stroke-dashoffset: -82.46680575;
        transform: rotate(1turn);
        animation-timing-function: ease-out;
    }

    46%, 50% {
        stroke-dashoffset: -329.207488554;
        transform: rotate(2.25turn);
        animation-timing-function: ease-in;
    }

    73% {
        stroke-dashoffset: -82.46680575;
        transform: rotate(3.5turn);
        animation-timing-function: ease-out;
    }

    96%, to {
        stroke-dashoffset: -329.207488554;
        transform: rotate(4.75turn);
    }

}


@keyframes ring3_ {
    from {
        stroke-dashoffset: -288.4484661616;
        transform: rotate(-0.25turn);
        animation-timing-function: ease-in;
    }

    23% {
        stroke-dashoffset: -72.2566298;
        transform: rotate(1turn);
        animation-timing-function: ease-out;
    }

    46%, 50% {
        stroke-dashoffset: -288.4484661616;
        transform: rotate(2.25turn);
        animation-timing-function: ease-in;
    }

    73% {
        stroke-dashoffset: -72.2566298;
        transform: rotate(3.5turn);
        animation-timing-function: ease-out;
    }

    96%, to {
        stroke-dashoffset: -288.4484661616;
        transform: rotate(4.75turn);
    }

}


@keyframes ring4_ {
    from {
        stroke-dashoffset: -253.9600625988;
        transform: rotate(-0.25turn);
        animation-timing-function: ease-in;
    }

    23% {
        stroke-dashoffset: -63.61725015;
        transform: rotate(1turn);
        animation-timing-function: ease-out;
    }

    46%, 50% {
        stroke-dashoffset: -253.9600625988;
        transform: rotate(2.25turn);
        animation-timing-function: ease-in;
    }

    73% {
        stroke-dashoffset: -63.61725015;
        transform: rotate(3.5turn);
        animation-timing-function: ease-out;
    }

    96%, to {
        stroke-dashoffset: -253.9600625988;
        transform: rotate(4.75turn);
    }

}

@keyframes ring5_ {
    from {
        stroke-dashoffset: -225.7422778656;
        transform: rotate(-0.25turn);
        animation-timing-function: ease-in;
    }

    23% {
        stroke-dashoffset: -56.5486668;
        transform: rotate(1turn);
        animation-timing-function: ease-out;
    }

    46%, 50% {
        stroke-dashoffset: -225.7422778656;
        transform: rotate(2.25turn);
        animation-timing-function: ease-in;
    }

    73% {
        stroke-dashoffset: -56.5486668;
        transform: rotate(3.5turn);
        animation-timing-function: ease-out;
    }

    96%, to {
        stroke-dashoffset: -225.7422778656;
        transform: rotate(4.75turn);
    }

}

@keyframes ring6_ {
    from {
        stroke-dashoffset: -203.795111962;
        transform: rotate(-0.25turn);
        animation-timing-function: ease-in;
    }

    23% {
        stroke-dashoffset: -51.05087975;
        transform: rotate(1turn);
        animation-timing-function: ease-out;
    }

    46%, 50% {
        stroke-dashoffset: -203.795111962;
        transform: rotate(2.25turn);
        animation-timing-function: ease-in;
    }

    73% {
        stroke-dashoffset: -51.05087975;
        transform: rotate(3.5turn);
        animation-timing-function: ease-out;
    }

    96%, to {
        stroke-dashoffset: -203.795111962;
        transform: rotate(4.75turn);
    }

}

.card {
    --bg-color: #212121;
    border: none;
    text-align: center;
}

.loader {
    color: rgba(0, 0, 0, 0.7); /*  rgb(124, 124, 124); */
    font-family: "Jakarta Sans", sans-serif;
    font-weight: 500;
    font-size: 25px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 40px;
    /* padding: 10px 10px; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* border-radius: 8px; */
}

.words {
    overflow: hidden;
    position: relative;
}

.words::after {
    content: "";
    position: absolute;
    inset: 0;
    /* background: linear-gradient(
      var(--bg-color) 10%,
      transparent 30%,
      transparent 70%,
      var(--bg-color) 90%
    ); */
    z-index: 20;
}

.word {
    display: block;
    height: 100%;
    padding-left: 6px;
    color: #70C787;
    animation: spin_4991 4s infinite;
}


@keyframes spin_4991 {
    10% {
        -webkit-transform: translateY(-102%);
        transform: translateY(-102%);
    }

    25% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    35% {
        -webkit-transform: translateY(-202%);
        transform: translateY(-202%);
    }

    50% {
        -webkit-transform: translateY(-200%);
        transform: translateY(-200%);
    }

    60% {
        -webkit-transform: translateY(-302%);
        transform: translateY(-302%);
    }

    75% {
        -webkit-transform: translateY(-300%);
        transform: translateY(-300%);
    }

    85% {
        -webkit-transform: translateY(-402%);
        transform: translateY(-402%);
    }

    100% {
        -webkit-transform: translateY(-400%);
        transform: translateY(-400%);
    }
}