body{font-family:'Inter',sans-serif;}
.loading-btn{
    margin: 0.5em 0;
    display: flex;
    place-items: center;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.loading-btn .ball {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 0.5rem;
    margin: 0 0.4em;
    transform: scale(1.2);
    transition: transform 0.3s infinite;
}

.loading-btn .ball.one {
    animation: loadingBall 1s infinite alternate;
    background: #2F4A4E;
}

.loading-btn .ball.two {
    animation: loadingBall2 1s infinite 0.2s alternate;
    background: #2F4A4E;
}

.loading-btn .ball.three {
    animation: loadingBall3 1s infinite 0.35s alternate;
    background: #2F4A4E;
}

.loading-btn .ball.four {
    animation: loadingBall4 1s infinite 0.5s alternate;
    background: #2F4A4E;
}

@keyframes loadingBall {
    0% {
        transform: translateY(0);
    }

    0% {
        transform: translateY(-10px) scale(1.2);
        background: #2F4A4E;
        box-shadow: 0 0 2px #2F4A4E;
    }

    100% {
        transform: translateY(5px);
    }
}

@keyframes loadingBall2 {
    0% {
        transform: translateY(0);
    }

    0% {
        transform: translateY(-10px) scale(1.2);
        background: #2F4A4E;
        box-shadow: 0 0 2px #2F4A4E;
    }

    100% {
        transform: translateY(5px);
    }
}

@keyframes loadingBall3 {
    0% {
        transform: translateY(0);
    }

    0% {
        transform: translateY(-10px) scale(1.2);
        background: #2F4A4E;
        box-shadow: 0 0 2px #2F4A4E;
    }

    100% {
        transform: translateY(5px);
    }
}

@keyframes loadingBall4 {
    0% {
        transform: translateY(0);
    }

    0% {
        transform: translateY(-10px) scale(1.2);
        background: #2F4A4E;
        box-shadow: 0 0 2px #2F4A4E;
    }

    100% {
        transform: translateY(5px);
    }
}