/* General Styles */
body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #ff7eb3, #ff758c, #fd927e);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.container {
  text-align: center;
  color: white;
  padding: 20px;
}

.new-year {
  font-size: 3rem;
  text-shadow: 0 0 10px #ffd700, 0 0 20px #ff4500;
  animation: glow 1.5s infinite alternate, slide-in 2s ease-out;
}

@keyframes glow {
  to {
    text-shadow: 0 0 20px #ff4500, 0 0 30px #ffd700;
  }
}

@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.working {
  font-size: 1.5rem;
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Particle Styles */
.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 5px #fff;
  opacity: 0.8;
  animation: fall linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(100vh);
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .new-year {
    font-size: 2rem; /* Reduce the size for smaller screens */
  }

  .working {
    font-size: 1.2rem; /* Adjust font size */
  }
}

@media (max-width: 480px) {
  .new-year {
    font-size: 1.5rem; /* Further reduce size for very small screens */
  }

  .working {
    font-size: 1rem;
  }

  .particle {
    width: 7px; /* Reduce particle size */
    height: 7px;
  }
}