
.dice-btn {
    position: fixed;   
    bottom: 100px;  
    right: 30px;     
    z-index: 1000;  
    cursor: pointer;  
    text-decoration: none;


    img {
        width: 80px;     
        height: 80px;
        object-fit: contain;
        display: block;
        transform-origin: center bottom;
    }


    &:hover img {
        animation: normalDiceShake 0.5s ease-in-out 2 forwards;
    }
}


@keyframes normalDiceShake {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(-16deg);
    }
    35% {
        transform: rotate(14deg);
    }
    55% {
        transform: rotate(-8deg);
    }
    75% {
        transform: rotate(4deg);
    }
    100% {
        transform: rotate(0deg);
    }
}


@media (max-width: 550px){
  .dice-btn{
    right: 10px;
  }
}
