/* styles.css v1.65 */

/* Minimal custom styles; most handled by Tailwind */

/* Social icon filter for white icons */
.filter {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%)
    contrast(100%);
}

/* Image and video error styles */
.image-error {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #8b4513;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.8);
  padding: 2px;
  border-radius: 5px;
  pointer-events: none;
}

/* Advertisement animation and text styling */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes bounceArrow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

#ad-banner {
  animation: fadeInOut 5s ease-in-out forwards;
}

.banner-text {
  color: #000000; /* Black text */
  font-weight: 700; /* Bold for thick letters */
}