@tailwind base;
@tailwind components;
@tailwind utilities;

.dark {
  color-scheme: dark;
}

/* Dark mode for toast notifications */
.dark .Toastify__toast {
  background-color: #1f2937; 
  color: white;
}

@layer components {
  .input {
    @apply w-full px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-lime-500;
  }

  .btn-green {
    @apply w-full bg-lime-600 hover:bg-lime-600 text-white py-2 rounded-full font-semibold transition-all duration-300;
  }
}

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 1s ease-in-out both;
  }

  .animate-slide-in {
    animation: slideIn 0.8s ease-in-out both;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes slideIn {
    from {
      transform: translateY(20px);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* index.css or globals.css */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Confetti for the tutorials page */
@keyframes coin {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateY(-150px) scale(0.5);
    opacity: 0;
  }
}

@keyframes confetti {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(-200px) rotate(720deg);
    opacity: 0;
  }
}

.animate-coin {
  animation: coin 1.4s ease-out forwards;
}

.animate-confetti {
  animation: confetti 1.8s ease-in-out forwards;
}

/* Styling for the FAQ Page */
@keyframes fadeUp {
  0% {
    transform: translateY(8px);
    opacity: 0;
  }

  50% {
    opacity: 1;
    transform: translateY(-4px);
  }

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

.animate-fade-up {
  animation: fadeUp 1s ease-out forwards;
}

@keyframes fadeUp {
  0% {
    transform: translateY(8px);
    opacity: 0;
  }

  50% {
    transform: translateY(-4px);
    opacity: 1;
  }

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

.animate-fade-up {
  animation: fadeUp 1.2s ease-out forwards;
}


/* Achievemnets animations */