body {
    background-color: wheat;
}

h1{
    display: flex;
    justify-content: center;
}

.parent{
    display:flex;
    height:100vh;
    align-items: center;
    justify-content: center;
    perspective: 600px;
}

.dice-wrapper{
    position: relative;
    width:100px;
    height:100px;
}


@keyframes bounce {
    0%, 100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-30px);
    }
    
}

.dice{
    position:absolute;
    display: flex;
    left:-260%;
    top:-80%;
    transform-style: preserve-3d;
    transition: transform 300ms ease-out;
    pointer-events: none;
}


/* .dice:hover{
        transform: rotate3d(1, 0, 0, 360deg);
} */

.dice.rotate {
  transform: rotate3d(1, 1, 1, 360deg) ;
}


.shadow{
    position: relative;
    width:150px;
    height:100px;
    background-color: gray;
    left: -20%;
    border-radius: 50%;
    transform: rotateX(60deg); opacity:0.5 ;
    filter: blur(6px);
}

.box{
    background-color: green;
    height: 100px;
    width: 100px;
    position: relative;
    border: 2px solid black;
    border-radius: 5px;
    pointer-events: auto;
      display: flex;
  justify-content: center;
  align-items: center;

}

.dot{
    height:20px;
    width:20px;
    border-radius: 50%;
    background-color: white;
    position: absolute;

}
.face1{
    transform: rotatex(90deg) translateX(260px) translateZ(50px);
}
.face2{ 
transform: rotatex(90deg)  translateZ(-50px) translateX(157px);
}
.face3{
    transform: rotateY(90deg) translateX(0px) translateZ(5px);
}
.face4{
 transform: rotateX(0deg) translateX(-50px) translateZ(50px)
}
.face5{
   transform: translateX(-103px)  rotateY(90deg);
}
.face6{
    transform: translateX(-255px) translateZ(-50px) ;
}


/* .box:hover {
    background-color: blue;
    transform: rotate3d(1,1,1,360deg);
    
    transition: background-color 1000ms ease, transform 1000ms ease-out;
} */

/*   define dots for face 1 */
.face1 .dot.one{
    left:40%;
    top:40%;
}
/* define dots for face 2 */
.face2 .dot.one{
    left:20%;
    top:20%;
}

.face2 .dot.two{
    left:60%;
    top:60%;
}

/* define dots for face 3 */
.face3 .dot.one{
    left:15%;
    top:15%;
}

.face3 .dot.two{
    left:40%;
    top:40%;
}

.face3 .dot.three{
    left:65%;
    top:65%;
}

/* define dots for face 4 */

.face4 .dot.one{
    left:15%;
    top:15%;
}

.face4 .dot.two{
    left:65%;
    top:15%;
}

.face4 .dot.three{
    left:65%;
    top:65%;
}

.face4 .dot.four{
    left:15%;
    top:65%;
}

/* define dots for face 5 */
.face5 .dot.one{
    left:15%;
    top:15%;
}

.face5 .dot.two{
    left:40%;
    top:40%;
}

.face5 .dot.three{
    left:65%;
    top:65%;
}

.face5 .dot.four{
    left:15%;
    top:65%;
}

.face5 .dot.five{
    left:65%;
    top:15%;
}

/* define dots for face 6 */
.face6 .dot.one{
    left:15%;
    top:10%;
}

.face6 .dot.two{
    left:65%;
    top:10%;
}

.face6 .dot.three{
    left:65%;
    top:40%;
}

.face6 .dot.four{
    left:15%;
    top:40%;
}

.face6 .dot.five{
    left:15%;
    top:70%;
}
.face6 .dot.six{
    left:65%;
    top:70%;
}