/* Custom styles */
html, body {
  font-family: 'Open Sans', sans-serif;
}

.font-serif {
  font-family: 'Playfair Display', serif;
}

/* Streak celebration animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(0px);
  }
}

.animate-bounce {
  animation: bounce 1s infinite;
}

/* Transition effects */
.transition-opacity {
  transition: opacity 0.3s ease;
}

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

.bg-gradient-animate {
  background-size: 200% 200%;
  animation: gradient 15s ease infinite;
}

/* Quote card animation */
.quote-card-enter {
  opacity: 0;
  transform: translateY(20px);
}

.quote-card-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms;
}

.quote-card-exit {
  opacity: 1;
  transform: translateY(0);
}

.quote-card-exit-active {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 300ms, transform 300ms;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.dark ::-webkit-scrollbar-track {
  background: #2d3748;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.dark ::-webkit-scrollbar-thumb {
  background: #4a5568;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #718096;
}