game.css

body {
    font-family: sans-serif;
}

.hidden {
    display: none;
}

.main-container-game {
    margin: auto;
    max-width: 500px;
    background-color: whitesmoke;
    padding: 50px;
    border-radius: 10px;
}

.status {
    color: blue;
    padding: 20px;
    text-align: center;
}

.main-container-game button {
    border: none;
    color: white;
    background-color: #007dff;
    padding: 20px;
    border-radius: 5px;
    cursor: pointer;
}

.main-container-game button:hover {
    opacity: 0.8;
}

.main-container-game button:active {
    opacity: 0.6;
}

.main-container-game button:disabled {
    opacity: 0.5;
    background-color: grey;
    cursor: auto;
}

.main-container-game input {
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid lightgrey;
}

.dice-image {
    width: calc(100% / 6.3);
    cursor: pointer;
}

.dice-image:hover {
    opacity: 0.8;
}

.dice-active {
    opacity: 0.7;
    transition: 1s all;
    transform: translateY(-20px);
}