@tailwind base;
@tailwind components;
@tailwind utilities;
/* Custom styles for better readability of long content */
.prose {
  max-width: none;
}

.prose h3 {
  @apply text-xl font-bold mt-8 mb-4 text-red-400;
}
.prose ul, .prose ol {
  @apply pl-5 mb-6 space-y-3;
}
.prose ul li {
  @apply list-disc ml-5 mb-3 p-4 bg-gray-700 rounded-lg border border-gray-600 transition-all duration-200;
}

.prose ol li {
  @apply list-decimal ml-5 mb-3 p-4 bg-gray-700 rounded-lg border border-gray-600 transition-all duration-200;
}
.prose li:hover {
  @apply bg-gray-600 shadow-sm border-gray-500;
}
.prose p {
  @apply mb-4 leading-relaxed;
}
.prose a {
  @apply text-blue-400 hover:text-blue-300 underline font-medium;
}

/* Text shadow for better readability */
.hovered-element {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

h1, h2, h3, h4, h5, h6, p, li, a {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .prose {
    padding: 1rem;
  }
  
  header nav {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  header nav a {
    margin-bottom: 0.5rem;
  }
  
  .prose li {
    @apply p-3;
  }
}

/* Additional responsive styles */
@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .grid {
    grid-template-columns: 1fr;
  }
  
  h1 {
    font-size: 1.875rem;
  }
  h2 {
    font-size: 1.5rem;
  }
}

/* Scroll to top button */
.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background-color: #dc2626;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  z-index: 1000;
}

.scroll-to-top:hover {
  background-color: #b91c1c;
  transform: translateY(-2px);
}

.scroll-to-top svg {
  width: 24px;
  height: 24px;
}