/* 404 Error Page Specific Styles */

/* Error Page Animations */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 404 Number Animation */
.text-9xl {
  animation: shake 2s ease-in-out infinite;
}

/* Floating Elements */
.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Card Animations */
.bg-background {
  animation: fadeInUp 0.8s ease-out;
}

/* Hover Effects */
.hover\:scale-105:hover {
  transform: scale(1.05);
}

.hover\:-translate-y-2:hover {
  transform: translateY(-8px);
}

/* Search Input Focus */
input:focus {
  box-shadow: 0 0 0 3px rgba(138, 0, 0, 0.1);
}

/* Button Transitions */
button,
a {
  transition: all 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
  .text-9xl {
    font-size: 6rem;
  }

  .text-5xl {
    font-size: 2.5rem;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .bg-background {
    background-color: #1a1a1a;
  }

  .bg-background {
    background-color: #2d2d2d;
    color: #ffffff;
  }

  .text-text {
    color: #a0a0a0;
  }
}