@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'pagy.tailwind.css';
/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer base {
  h1 {
    @apply text-5xl lg:text-7xl tracking-tight  font-black text-pretty text-gray-900 bg-clip-text;
  }
}
@layer utilities {
  .layout {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
}
@layer components {
  .btn {
    @apply border border-transparent text-base font-medium text-primary-foreground bg-primary hover:bg-primary/80 flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 bg-gradient-to-r from-amber-400 to-orange-400 text-white rounded-xl shadow-lg hover:shadow-xl hover:from-amber-500 hover:to-orange-500 transition-all duration-300 hover:scale-105;
  }
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}