@import "tailwindcss";

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

html:not(.dark) {
  background-color: rgb(244, 247, 244);
  color: rgb(103, 102, 103);
}
body {
  @apply bg-white text-black dark:bg-black dark:text-white;
}
/* Headings */
h1 {
  height: 700px;
  max-height: 1000px;

}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-space-grotesk);
}

@keyframes slide {
  0% { transform: translateX(0); }
  33% { transform: translateX(-100%); }
  66% { transform: translateX(-200%); }
  100% { transform: translateX(0); }
}

.animate-slide {
  animation: slide 15s infinite ease-in-out;
}
@keyframes glowSwap {
  /* Emerald glow — stays for 3 seconds (0% → 75%) */
  0%,
  75% {
    text-shadow:
      0 0 20px rgba(16,185,129,1),
      0 0 40px rgba(16,185,129,0.9),
      0 0 70px rgba(16,185,129,0.8);
  }

  /* White glow — only 1 second (75% → 100%) */
  100% {
    text-shadow:
      0 0 12px rgba(255,255,255,1),
      0 0 24px rgba(255,255,255,0.9);
  }
}

.glow-swap {
  animation: glowSwap 4s ease-in-out infinite;
}

/* Emerald glow for paragraph */
.glow-emerald-soft {
  text-shadow:
    0 0 6px rgba(16,185,129,0.5),
    0 0 12px rgba(16,185,129,0.4);
}