.bg-blue-600,
.hover\:bg-blue-700:hover {
  background-color: var(--theme-600) !important;
}

.text-blue-600,
.text-blue-500 {
  color: var(--theme-600) !important;
}

.bg-blue-100,
.hover\:bg-blue-200:hover {
  background-color: var(--theme-soft) !important;
}

.from-blue-600 {
  --tw-gradient-from: var(--theme-600) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-purple-600 {
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--theme-500) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

.to-pink-600 {
  --tw-gradient-to: var(--theme-700) var(--tw-gradient-to-position) !important;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }

  33% {
    transform: translate(30px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }

  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

.prose h2 {
  color: #1f2937;
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.prose h3 {
  color: #374151;
  font-weight: 600;
  font-size: 1.25rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.prose p {
  color: #4b5563;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.prose ul,
.prose ol {
  margin-bottom: 1rem;
}

.prose li {
  color: #4b5563;
  margin-bottom: 0.5rem;
}