@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}

* {
  font-family: "Karla", sans-serif;
  /* box-sizing: border-box; */
}

main {
  max-width: 1920px;
}

/* Style for the active pagination bullet */
.swiper-pagination-bullet-active {
  background-color: white !important; /* Make active bullet white */
}

/* Optional: Style for inactive pagination bullets */
.swiper-pagination-bullet {
  background-color: rgba(
    255,
    255,
    255,
    0.8
  ) !important; /* Light gray for inactive bullets */
}

.peer:checked + div .toggle-dot {
  transform: translateX(100%);
}

.toggle-dot {
  transition: transform 0.1s ease-in-out;
}

.historySwiper .swiper-slide, .seasonSwiper .swiper-slide {
  height: 12rem !important; /* equivalent to h-48 */
  width: auto !important;
  aspect-ratio: 16 / 9 !important;
}