.firstRow {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dice {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
    cursor: pointer;
}

.face {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    font-weight: 600;
}

.face1 {
    transform: rotateY(0) translateZ(50px);
    background-color: aquamarine;
}

.face2 {
    transform: rotateX(90deg) translateZ(50px);
    background-color: blue;
}

.face3 {
    transform: rotateY(90deg) translateZ(50px);
    background-color: brown;
}

.face4 {
    transform: rotateY(-90deg) translateZ(50px);
    background-color: yellow;
}

.face5 {
    transform: rotateX(-90deg) translateZ(50px);
    background-color: green;
}

/* Efecto Conffeti */

.secondRow {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.buttonConffeti {
    padding: 20px;
    border: 1px solid rgb(252, 252, 252);
    border-radius: 15px;
    background-color: rgb(53 68 133);
    font-weight: 400;
    color: rgb(242, 242, 242);
    font-family: fantasy;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}

.buttonConffeti:hover {
    background-color: rgb(94 107 161);
}

.dot {
  background: blue;
  border-radius: 50%;
  position: absolute;
}