@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;700;900&display=swap");

/* Add this animation definition */
@keyframes spin {
    from {
        transform: rotateX(0deg);
    }
    to {
        transform: rotateX(1440deg); /* Adjust the rotation amount for a full spin */
    }
}

/* Add this style for the spinning animation */
.reel.spin img {
    animation: spin 3s ease-out forwards; /* Adjust the animation duration */
}

/* Existing styles */

body {
    font-family: "Exo 2", sans-serif;
    text-align: center;
    background: linear-gradient( -90deg, rgba(63, 161, 251, 1) 0%, rgba(252, 70, 168, 1) 100% );
}

.slot-machine {
    margin-top: 50px;
}

.reels {
    display: flex;
    justify-content: center;
    margin: 20px;
}

.reel {
    width: 128px;
    height: 128px;
    margin: 0 10px;
    overflow: hidden; /* Hide overflow to clip the image during animation */
}

#result {
    font-size: 36px;
    margin: 20px;
}

#coins {
    font-size: 24px;
}

#spin-btn {
    padding: 10px 20px;
    font-size: 18px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

#spin-btn:hover {
    background-color: #45a049;
}