.dice-container {
    position: fixed;
    bottom: 50px;
    left: 30px;
    z-index: 100;
}

/* Make the dice smaller */
.dice-wrapper {
    width: 60px; /* Reduced from 100px */
    height: 60px;
    perspective: 1000px;
}

.dice {
    width: 60px; /* Adjusted */
    height: 60px;
    position: absolute;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
    transition: transform 1s ease-in-out;
}

/* Dice faces */
.side {
    color: #ffffff;
    width: 60px; /* Adjusted */
    height: 60px;
    background: #f93e3e;
    border: 2px solid black;
    border-radius: 8px; /* Slightly smaller corners */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* Adjusted for size */
    font-weight: bold;
    position: absolute;
}

/* Position each side of the dice */
.one { transform: translateZ(30px); }
.six { transform: translateZ(-30px) rotateY(180deg); }
.two { transform: rotateY(90deg) translateZ(30px); }
.five { transform: rotateY(-90deg) translateZ(30px); }
.three { transform: rotateX(90deg) translateZ(30px); }
.four { transform: rotateX(-90deg) translateZ(30px); }