body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #ff0000, #ff8000, #ffbf00, #80ff00, #00ffbf, #0080ff, #8000ff, #ff00bf);
    background-size: 800% 800%;
    animation: rainbow 20s ease infinite;
  }
  
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 80vw;
  }
  
  .number {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    font-weight: bold;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.5s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
  
  .number:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
  }
  
  .number.bounce {
    animation: bounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1;
  }
  
  @keyframes bounce {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(5);
    }
    100% {
      transform: scale(1);
    }
  }
  
  #two {
    background-color: #ff6b6b;
    animation: rotate 3s linear infinite;
  }
  
  #three {
    background-color: #48dbfb;
    animation: scale 2s ease-in-out infinite;
  }
  
  #four {
    background-color: #1dd1a1;
    animation: color-change 3s infinite;
  }
  
  #one {
    background-color: #feca57;
    animation: rotate 2s linear infinite;
  }
  
  #two-2 {
    background-color: #ff6b6b;
    animation: scale 2s ease-in-out infinite;
  }
  
  #four-2 {
    background-color: #1dd1a1;
    animation: color-change 3s infinite;
  }
  
  #zero {
    background-color: #5f27cd;
    animation: rotate 2s linear infinite;
  }
  
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes scale {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
  }
  
  @keyframes color-change {
    0% {
      background-color: #ff6b6b;
    }
    50% {
      background-color: #1dd1a1;
    }
    100% {
      background-color: #ff6b6b;
    }
  }
  
  @keyframes rainbow {
    0%, 100% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }
  
  /* Mobile Styles */
  @media (max-width: 600px) {
    .number {
      width: 60px;
      height: 60px;
      font-size: 24px;
    }
  
    .container {
      max-width: 90vw;
    }
  }