html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
}


button {
    padding: .5rem 1rem;
    color: #fff;
    background-color: #000;
    border: none;
    font-size: 20px;
    border-radius: 10px;
    box-shadow: 1px 3px #aaa;
    outline: none;
    transition: .3s;
}

button:hover {
    background: #50514F;
    cursor: pointer;
}

button:active {
    outline: none;
    background: #50514F;
    transform: translateY(15px);
}

.cube {
    height: 5rem;
    width: 5rem;
    position: relative;
    transform-style: preserve-3d;
}

.face {
    position: absolute;
    height: 5rem;
    width: 5rem;
    background-size: cover;
}

#side-one {
    background-image: url('dice-six-faces-one.png');
    transform: translateZ(2.5rem);
}

#side-two {
    background-image: url('dice-six-faces-two.png');
    transform: rotateY(-180deg) translateZ(2.5rem);
}

#side-three {
    background-image: url('dice-six-faces-three.png');
    transform: rotateY(-90deg) translateZ(2.5rem);
}

#side-four {
    background-image: url('dice-six-faces-four.png');
    transform: rotateX(90deg) translateZ(2.5rem);
}

#side-five {
    background-image: url('dice-six-faces-five.png');
    transform: rotateX(-90deg) translateZ(2.5rem);
}

#side-six {
    background-image: url('dice-six-faces-six.png');
    transform: rotateY(90deg) translateZ(2.5rem);
}

@keyframes rotate-1 {
    0% {
        transform: rotateX(0) rotateZ(0);
    }

    100% {
        transform: rotateX(720deg) rotateZ(-720deg);
    }
}

@keyframes rotate-2 {
    0% {
        transform: rotateX(0) rotateZ(0);
    }

    100% {
        transform: rotateX(-900deg) rotateZ(1080deg);
    }
}

@keyframes rotate-3 {
    0% {
        transform: rotateX(0) rotateZ(0);
    }

    100% {
        transform: rotateY(810deg) rotateZ(720deg);
    }
}

@keyframes rotate-4 {
    0% {
        transform: rotateX(0) rotateZ(0);
    }

    100% {
        transform: rotateX(-810deg) rotateZ(-1080deg);
    }
}

@keyframes rotate-5 {
    0% {
        transform: rotateX(0) rotateZ(0);
    }

    100% {
        transform: rotateX(450deg) rotateZ(-720deg);
    }
}

@keyframes rotate-6 {
    0% {
        transform: rotateX(0) rotateZ(0);
    }

    100% {
        transform: rotateY(-450deg) rotateZ(-1440deg);
    }
}



.show-1 {
    animation: rotate-1 1s ease-out forwards;
}


.show-2 {
    animation: rotate-2 1s ease-out forwards;
}

.show-3 {
    animation: rotate-3 1s ease-out forwards;
}

.show-4 {
    animation: rotate-4 1s ease-out forwards;
}

.show-5 {
    animation: rotate-5 1s ease-out forwards;
}

.show-6 {
    animation: rotate-6 1s ease-out forwards;
}