/* CSS for the social and clock container */
.social-container {
  opacity: 0;
}

.clock-container {
  opacity: 0;
}

.animate-glow {
  animation: glow 2s infinite alternate;
}

/* Rainbow Animation */
@keyframes rainbow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-rainbow {
  background-image: linear-gradient(to right, red, orange, yellow, green, cyan);
  background-size: 300% 300%;
  background-clip: text;
  -webkit-background-clip: text; /* For WebKit browsers */
  color: transparent; /* Ensures text takes on the gradient */
  animation: rainbow 10s ease infinite;
}

.animate-glow {
  animation: glow 2s infinite alternate;
}

@keyframes glow {
  from {
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.7));
  }
  to {
    filter: drop-shadow(0 0 16px rgba(0, 255, 255, 1));
  }
}