/* General styles for the game */
body {
    font-family: Arial, sans-serif;
    text-align: center;
  }
  
  #colorBox {
    width: 150px;
    height: 100px;
    margin: 20px auto;
    border: 2px solid black;
    transition: background-color 0.5s ease-in-out;
  }
  
  #colorOptions button {
    width: 100px;
    height: 100px;
    margin: 10px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  
  #colorOptions button:hover {
    transform: scale(1.1);
  }
  
  /* Animation: Fade-out for correct guesses */
  .fade-out {
    animation: fadeOut 1s forwards;
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  
  /* Animation: Shake effect for wrong guesses */
  .shake {
    animation: shake 0.5s;
  }
  
  @keyframes shake {
    0%,
    100% {
      transform: translateX(0);
    }
    25%,
    75% {
      transform: translateX(-10px);
    }
    50% {
      transform: translateX(10px);
    }
  }
 
  /* Confetti animation */
.confetti {
    width: 15px;
    height: 15px;
    position: fixed;
    top: 50%; /* Start from the center of the screen */
    animation: confettiFall 2s ease-in-out;
    z-index: 1000;
  }
  
  @keyframes confettiFall {
    from {
      transform: translateY(-100px) rotate(0deg);
    }
    to {
      transform: translateY(800px) rotate(360deg);
    }
  }
  
  #newGameButton {
background-color: blueviolet;
padding: 15px;
color: white;
border-radius: 5px;
  }

  #newGameButton:hover {
    background-color: red;
    cursor: pointer;
  }