.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -70px;
    height: 100vh;
}

.hand {
    position: relative;
    height: 100px;
}

.card {
    font-size: 22px;
    height: 100px;
    width: 70px;
    border: 3px solid #262722;
    border-radius: 3px;

    background-color: #374E4E;
    position: absolute;
    top: 0;
    transition: transform 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.card span {
    background-color: #8badc8;
    display: none;
    margin: 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 25px;
}

.card.card-1 {
    z-index: 3;
    margin-left: 20px;
    animation-duration: 6s;
    animation-name: card-1;
    animation-iteration-count: infinite;
}

.card.card-2 {
    z-index: 2;
    margin-left: 10px;
    animation-duration: 6s;
    animation-name: card-2;
    animation-iteration-count: infinite;
}

.card.card-3 {
    z-index: 1;
    animation-duration: 6s;
    animation-name: card-3;
    animation-iteration-count: infinite;
}

@keyframes card-1 {
    16.66666% {
        transform: translateX(95px) rotate(15deg);
    }

    33.33333% {
        transform: translateX(-20px);
        z-index: 1;
    }

    49.99999% {
        transform: translateX(-20px);
        z-index: 1;
    }

    66.66666% {
        transform: translateX(-10px);
        z-index: 2;
    }

    83.33333% {
        transform: translateX(-10px);
        z-index: 2;
    }
}

@keyframes card-2 {
    16.66666% {
        transform: translateX(0);
    }

    33.33333% {
        transform: translateX(10px);
        z-index: 3;
    }

    49.99999% {
        transform: translateX(105px) rotate(15deg);
    }

    66.66666% {
        transform: translateX(-10px);
        z-index: 1;
    }

    83.33333% {
        transform: translateX(-10px);
        z-index: 1;
    }
}

@keyframes card-3 {
    0% {
        z-index: 1;
    }

    16.66666% {
        transform: translateX(0);
    }

    33.33333% {
        transform: translateX(10px);
        z-index: 2;
    }

    49.99999% {
        transform: translateX(10px);
        z-index: 2;
    }

    66.66666% {
        transform: translateX(20px);
        z-index: 3;
    }

    83.33333% {
        transform: translateX(115px) rotate(15deg);
    }
}