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

@tailwind base;

@tailwind components;

@tailwind utilities;

@layer base {
  body {
    @apply antialiased text-slate-100 bg-slate-950 font-sans selection:bg-emerald-500/30;
    font-family: 'Inter', sans-serif;
  }
}

@layer utilities {
  .font-heading {
    font-family: 'Space+Grotesk', sans-serif;
  }

  .glow-green {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
  }

  .glass-card {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(16, 185, 129, 0.1);
  }

  .tech-grid {
    background-image: radial-gradient(circle at 2px 2px, rgba(16, 185, 129, 0.05) 1px, transparent 0);
    background-size: 40px 40px;
  }

  .animate-float {
    animation: float 4s ease-in-out infinite;
  }

  @keyframes float {
    0% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-10px);
    }

    100% {
      transform: translateY(0px);
    }
  }
}