/* Reset default margin and padding for all elements */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

/* Set background color and text color for the entire page */
body {
   background-color: #f0f0f0;
   color: #333;
   font-family: Arial, Helvetica, sans-serif;
}

/* Center the game container */
#container {
  
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   
   height: 100vh;
   color: rgb(239, 140, 227);
}

/* Styling for loading animation */
#loading {
   display: block;
   
   margin: 100px;
   width: 110px;
   height: 110px;
  
   border: 12px solid rgb(239, 140, 227);
   border-bottom-color: transparent;
   border-radius: 99%;
   display: none; /* Initially hidden */
   animation: rotation 1s linear infinite;
}

@keyframes rotation {
   0% {
     
       transform: rotate(0deg);
   }
   100% {
       transform: rotate(360deg);
   }
}

/* Styling for the dice and number */
#dice {
   box-shadow: rgba(0, 0, 0, 0.15) 14px 10px 12px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 30vh;
   border-radius: 2mm;
   height: 10cm;
   background-color:rgb(9, 63, 210);
   margin-top: 20px;
}

#number {
   font-size: 5cm;
   font-family: Arial, Helvetica, sans-serif;
}

/* Styling for the buttons */
#buttons {
   display: fixed;
   justify-content: center;
   gap: 20px;
   margin-top: 20px;
}

button {
   font-family:'Courier New', Courier, monospace;
   font-size: 1.5rem;
   padding: 10px 20px;
   border-radius: 2mm;
   color: rgba(172, 17, 17, 0.906);
   box-shadow: rgba(0, 0, 0, 0.15) 4px 4px 6px;
   border: none;
   cursor: pointer;
}

button#rollButton {
   background-color: #2ecc71;
   color: white;
}

button#rollButton:hover {
   background-color: white;
   color: #2ecc71;
   box-shadow: rgba(0, 0, 0, 0.377) 0px 3px 6px;
}

button#resetButton {
   background-color: #e74c3c;
   color: white;
}

button#resetButton:hover {
   background-color: white;
   color: #e74c3c;
   box-shadow: rgba(0, 0, 0, 0.377) 0px 3px 6px;
}