@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 */
  }

  .content-auto {
    content-visibility: auto;
  }
}

@font-face {
  font-family: 'OJRegular';
  src: url('/fonts/HelveticaNeueLight.woff2') format('woff2');
  font-weight: normal;
}
@font-face {
  font-family: 'OJBold';
  src: url('/fonts/HelveticaNeueBold.woff2') format('woff2');
  font-weight: bold;
}
@font-face {
  font-family: 'OJLight';
  src: url('/fonts/HelveticaNeueUltraLight.woff2') format('woff2');
  font-weight: normal;
}
@font-face {
  font-family: 'Pirulen';
  src: url('/fonts/Pirulen.woff2') format('woff2');
  font-weight: normal;
}
@font-face {
  font-family: 'OJRoman';
  src: url('/fonts/HelveticaNeueRoman.woff2') format('woff2');
  font-weight: normal;
}


:root {
  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 255, 255, 255;
  --background-end-rgb: 255, 255, 255;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

.carousel {top: 0; display: flex}
.carousel ul {overflow: auto; display: flex; flex-wrap: nowrap; scroll-snap-type: x mandatory; scroll-snap-points-y: repeat(100%); scroll-behavior: smooth; background: gray; -ms-overflow-style: none; scrollbar-width: none; margin: 0; padding: 0;}
.carousel ul::-webkit-scrollbar {display: none; /* Hide scrollbar for Chrome, Safari and Opera */} 
.carousel ul li {position: relative; min-width: 100%; list-style: none; background: url() center center / cover no-repeat; scroll-snap-align: start;}
.carousel ul li > * {position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.carousel ul li > img {object-fit: cover;}
.carousel ul li > div {display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; font-size: 20px;}
.carousel ol {position: absolute; bottom: 15px; display: flex; justify-content: center; left: 50%; transform: translateX(-50%); z-index: 9;}
.carousel ol li {list-style: none; padding: 0 5px;}
.carousel ol li a {display: block; height: 10px; width: 10px; border: 2px solid white; background: transparent; border-radius: 100%;}
.carousel ol li.selected a {background: white;}
.carousel .prev, .carousel .next {display: none; user-select:none; cursor: pointer; font-size: 50px; color: white; position: absolute; left: 0; padding: 15px 15px 30px; top: 50%; transform: translateY(-50%); z-index: 9; line-height: 0;}
.carousel .next {left: auto; right: 0;}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/*
* This is a no-op change to test template build triggers.
*/