#fundo-modal {
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
}

#enunciado {
    position: fixed;
    width: 350px;
    /* height: 400px; */
    top: 50%;
    left: 50%;
    background: var(--bege1);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
    border-radius: 12px;
    z-index: 100000;
}

#enunciado h2 {
    padding: 10px;
    font-size: 18px;
    text-align: center;
    width: 100vw;
    max-width: 350px;
    margin: 0 auto;
}

#tuto-ok{
    margin: 0px auto 30px auto;
    display: block;
    color: white;
}


#mini-tuto {
    position: relative;
    /* border: 1px solid red; */
    width: 100%;
    height: 213px;
}

.tuto-card {
    position: absolute;
    width: 60px;
    height: 74px;
    left: 145px;
    top: 69.5px;
    filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 0.1));
    background: white;
    font-size: 12px;
    text-align: center;
    font-weight: 800;
    border-radius: 8px;
    line-height: 74px;
}

#tuto-lado1 {
    position: absolute;
    width: 62px;
    height: 14px;
    left: 39px;
    top: 99.5px;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height */
    text-decoration-line: underline;
    color: #00A6DA;
}

#tuto-lado2 {
    position: absolute;
    width: 22px;
    height: 14px;
    left: 269px;
    top: 99.5px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height */
    text-decoration-line: underline;
    color: #00A6DA;
}

#tuto-mao {
    position: absolute;
    width: 26.49px;
    height: 32px;
    left: 161.76px;
    top: 159px;
    background-image: url(../imgs/mao.svg);
    background-size: 100% 100%;
    animation: animaMao 10s infinite 2s;
    animation-delay: 2s;
}

#tuto-clique {
    position: absolute;
    width: 17.1px;
    height: 17.1px;
    left: 271.45px;
    top: 110.62px;
    background-image: url(../imgs/clique.svg);
    background-size: 100% 100%;
    animation: animaClique 10s infinite 2s;
    animation-delay: 2s;
    opacity: 0;
}


#tuto-card2{
    animation: animaCard1 10s infinite 2s;
    animation-delay: 2s; 
}


#tuto-card1{
    animation: animaCard2 10s infinite 2s;
    animation-delay: 2s; 
}

@keyframes animaMao {
    0%{
        
    }
    10%{
        left: 161.76px;
        top: 159px;
    }
    25%{
        left: 272.55px;
        top: 111.5px;
        transform: scale(1);
    }
    30%{
        transform: scale(0.7);
    }
    35%{
        transform: scale(1);
        opacity: 1;
    }
    40%{
        opacity: 0;
        left: 272.55px;
        top: 111.5px;
    }
    49%{
        opacity: 0;
    }

    50%{
        left: 161.76px;
        top: 159px;
        opacity: 1;
    }
    60%{
        left: 161.76px;
        top: 159px;
    }
    75%{
        left: 56.41px;
        top: 111.5px;
        transform: scale(1);
    }
    80%{
        transform: scale(0.7);
    }
    85%{
        transform: scale(1);
        opacity: 1;
    }
    90%{
        opacity: 0;
        left: 56.41px;
        top: 111.5px;
    }
    100%{
        opacity: 0;
        left: 56.41px;
        top: 111.5px;
    }

    
}


@keyframes animaClique {
    29%{
        opacity: 0;
    }
    30%{
        transform: scale(1);
        opacity: 1;
    }
    40%{
        transform: scale(5);
        opacity: 0;
        left: 271.45px;
        top: 110.62px;
    }

    79%{
        opacity: 0;
        left: 57.11px;
        top: 113.5px;
    }
    80%{
        transform: scale(1);
        opacity: 1;
    }
    90%{
        transform: scale(5);
        opacity: 0;
        left: 57.11px;
        top: 113.5px;
    }
}

@keyframes animaCard1 {
    33%{
        left: 145px;
        top: 69.5px;
        transform: scale(1);
        filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 0.1));
    }
    40%{
        transform: scale(1.3) rotateZ(45deg);
        filter: drop-shadow(12px 14px 2px rgba(0, 0, 0, 0.1));
    }
    55%{
        left: 292px;
        top: 105px;
        transform: scale(0.7);
        filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 0.1));
    }
    100%{
        left: 292px;
        top: 105px;
        transform: scale(0.7);
    }
}

@keyframes animaCard2 {
    83%{
        left: 145px;
        top: 69.5px;
        transform: scale(1);
        filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 0.1));
    }
    90%{
        transform: scale(1.3) rotateZ(-45deg);
        filter: drop-shadow(12px 14px 2px rgba(0, 0, 0, 0.1));
    }
    95%{
        left: 2px;
        top: 105px;
        transform: scale(0.7);
        filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 0.1));
    }
    100%{
        left: 2px;
        top: 105px;
        transform: scale(0.7);
    }
}