@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

.font-space {
  font-family: 'Space Grotesk', sans-serif;

}
.font-hero{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

.bg-grid {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px; /* Adjust size for bigger/smaller squares */
}

@keyframes slide {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-slide {
  animation: slide 10s linear infinite;
}

.active {
  @apply text-[#14953D];
}