margin: 0;

  padding: 0;

  overflow: hidden;

}

​

.ball {

  position: absolute;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  cursor: pointer;

  background-color: #f00; /* Default color */

  animation: fall linear infinite;

  transition: transform 0.3s ease; /* Add transition effect for size change */

}

​

@keyframes fall {

  from {

    top: -20px; /* Start off the screen */

  }

  to {

    top: calc(100vh - 20px); /* End at the bottom of the screen */

  }

}

​

.ball:hover {

  transform: scale(1.5); /* Enlarge when hovered over */

}

​

.explosion {

  animation: explode 0.3s ease forwar

​

​