@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

body {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100vh;
   margin: 0;
   background-color: #000;
   font-family: "Open Sans", sans-serif;
   font-optical-sizing: auto;
 }

 #dice {
   width: 200px;
   height: 200px;
   position: relative;
   transform-style: preserve-3d;
   transform: rotateX(0deg) rotateY(0deg);
   transition: transform 1s ease;
   margin: auto;
   border-radius: 14px;

 }
 
 .dice-area{
   margin-bottom: 60px;
   width: 200px;
   height: 200px;
   position: relative;
 }

 .back-glow {
   position: absolute;
   width: 180px;
   height: 180px;
   margin: auto;
   filter: blur(20px);
   top: 10px;
   left: 10px;
   border-radius: 90px;
   background-color: rgb(156, 231, 247);
   z-index: -1;
   animation: glow 5s linear infinite;
   box-shadow: 0 0 20px rgba(156, 231, 247, 0.7), 
               0 0 50px rgba(156, 231, 247, 0.5), 
               0 0 100px rgba(156, 231, 247, 0.3);
 }
 
 @keyframes glow {
   0% {
     transform: rotate(0deg) scale(1);
     opacity: 0.7;
     background-color: rgb(177, 75, 246);
     box-shadow: 0 0 20px rgba(177, 75, 246, 0.7), 
                 0 0 50px rgba(177, 75, 246, 0.5), 
                 0 0 100px rgba(177, 75, 246, 0.3);
   }
 
   50% {
     transform: rotate(180deg) scale(1.1);
     opacity: 0.7;
     background-color: rgb(256, 256, 256);
     box-shadow: 0 0 40px rgba(256, 256, 256, 0.9), 
                 0 0 80px rgba(256, 256, 256, 0.7), 
                 0 0 150px rgba(256, 256, 256, 0.5);
   }
 
   100% {
     transform: rotate(360deg) scale(1);
     opacity: 0.7;
     box-shadow: 0 0 20px rgba(177, 75, 246, 0.7), 
                 0 0 50px rgba(177, 75, 246, 0.5), 
                 0 0 100px rgba(177, 75, 246, 0.3);
   }
 }

 .face {
   position: absolute;
   width: 200px;
   height: 200px;
   background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
   border: 2px solid #e5e5e5;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 3rem;
   font-weight: bold;
   border-radius: 14px;
   box-shadow: rgba(256, 256, 256, 0.1) 0px 30px 90px;
 }

 .front  { transform: rotateY(  0deg) translateZ(100px); }
 .back   { transform: rotateY(180deg) translateZ(100px); }
 .right  { transform: rotateY( 90deg) translateZ(100px); }
 .left   { transform: rotateY(-90deg) translateZ(100px); }
 .top    { transform: rotateX( 90deg) translateZ(100px); }
 .bottom { transform: rotateX(-90deg) translateZ(100px); }

 button#rollButton {
   display: flex;
   width: 500px;
   max-width: 80%;
   padding: 20px;
   margin-top: 60px;
   font-size: 16px;
   cursor: pointer;
   background-image: linear-gradient(to right, #D31027 0%, #EA384D  51%, #D31027  100%);
   justify-content: center;
   align-items: center;
   text-align: center;
   text-transform: uppercase;
   transition: 0.5s;
   background-size: 200% auto;
   color: white;     
   box-shadow: 0 0 20px rgba(238, 238, 238, 0.2);
   border-radius: 10px;
   display: block;
   border: none;       
 }

 button#rollButton:hover {
   background-position: right center; 
   color: #fff;
   text-decoration: none;
 }


 canvas {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
 }

 .bubble-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   pointer-events: none;
   z-index: -1;
}

.face img{
   height: 180px;
   width: 180px;
}


.bubble {
   position: absolute;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(255,255,255,0.8), rgba(255,255,255,0.1));
   animation: moveBubbles 20s linear infinite, flicker 3s infinite;
}

@keyframes moveBubbles {
   0% {
      transform: translate(0, 0);
   }
   100% {
      transform: translate(calc(100vw * var(--random-x)), calc(100vh * var(--random-y)));
   }
}

button:disabled,
button[disabled]{
   filter: grayscale(100);
}