/* Import Tailwind CSS directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */
@layer base {
  html {
    @apply scroll-smooth h-full; /* Smooth scroll and full height */
    height: -webkit-fill-available; /* Safari fallback for full height */
  }
  
  body {
    @apply font-sans text-gray-800 bg-gradient-to-br from-blue-100 to-blue-50 min-h-screen; /* Tailwind colors */
    background-size: 200% 200%;
    animation: gradient-animation 8s ease infinite;
  }
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@layer components {
  /* Color Variables */
  :root {
    --primary-color: #2196F3;
    --secondary-color: #1521aa;
    --accent-color: #d6d4c8;
  }

  /* Main Container */
  .container {
    @apply mx-auto max-w-screen-lg p-6 pt-32; /* Default top padding for larger screens */
  }

  /* Hero Section */
  .hero {
    @apply flex flex-col items-center justify-center text-center relative pt-32 pb-8 overflow-hidden;
  }

  /* Profile Picture */
  .profile-pic {
    @apply relative z-10 rounded-full border-4 shadow-xl mb-8 w-32 h-32 border-accent-color transition-transform duration-300 ease-in-out;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  .profile-pic:hover {
    @apply transform scale-105;
  }

  /* Button Styles */
  .btn-primary {
    @apply px-8 py-3 rounded-full bg-primary-color text-white font-medium transition hover:bg-blue-700;
  }

  .btn-secondary {
    @apply px-8 py-3 rounded-full border-2 border-gray-800 text-gray-800 font-medium hover:bg-gray-800 hover:text-white transition;
  }

  /* Heading and Text */
  h1 {
    @apply text-3xl md:text-5xl font-black bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600;
  }

  p {
    @apply text-base md:text-lg max-w-2xl mx-auto leading-relaxed text-gray-600;
  }

  /* Project Item */
  .project-item {
    @apply group relative bg-white rounded-2xl p-6 shadow-sm hover:shadow-lg transition-all duration-300;
  }

  .project-item:hover .group-hover\:shadow-xl {
    @apply shadow-xl;
  }

  /* Contact and Project Card Adjustments */
  .contact-card, .project-card {
    @apply group block bg-white rounded-2xl shadow-lg p-6 transition hover:shadow-2xl transform hover:scale-105;
  }

  /* Navigation Bar */
  .navbar {
    @apply fixed w-full top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200;
    padding: 1rem;
    transform: translateZ(0);
    -webkit-transform: translateZ(0); /* Safari fallback */
  }
}

/* Smaller Screen (Mobile) Fallbacks */
/* @media (max-width: 767px) {
  .container,
  .hero,
  .navbar,
  .project-item,
  .contact-card {
    min-height: -webkit-fill-available; /* Safari fallback for mobile
  }
  
  .hero {
    @apply pt-20; /* Reduced padding for mobile
  }
  
  h1 {
    @apply text-3xl; /* Smaller heading size for mobile
  }
} */