/* VARIABLES */

:root{
    --reshuffle-size: 140px;
    --reshuffle-aspect: 1.6/1;
}

/* RESHUFFLE BUTTON */

.reshuffle{
    position: relative;
    width: var(--reshuffle-size);
    aspect-ratio: var(--reshuffle-aspect);
    background: url("../assets/svg/horns.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.spinner{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    transition: 0.25s;
    cursor: pointer;
}

.spinner:hover{
    scale: 1.05;
    filter: drop-shadow(0 4px 0 black);
    transform: translateY(-4px);
}

.spinnerimg{
    aspect-ratio: 1;
    height: 100%;
}

/* SPIN ANIMATION */

@keyframes spin {
    0%{
        transform: scale(1.05) rotateZ(-720deg);
    }
    100%{
        transform: scale(1) rotateZ(0);
    }
}

.spinning{
    animation: spin 0.5s ease-out forwards;
}

/* RESPONSIVE */

@media (max-width: 1234px){
    :root{
        --reshuffle-size: 110px;
        --reshuffle-aspect: 1.45/1;
    }

    .spinner:hover{
        filter: none;
    }
}