/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: inherit;
}

body, html {
  height: 100%;
  font-family: 'Inter', sans-serif;
  background-color: #14100e;
  color: white;
}

/* Gallery Specific Styles */
.gallery-container {
  width: 100%;
  overflow-x: auto; /* Allows horizontal scrolling */
  padding: 10px 0;
  background-color: #1a1a1a; /* Optional: background for contrast */
  scrollbar-width: thin; /* Firefox: Make scrollbar thinner */
  scrollbar-color: #888 transparent; /* Firefox: Scrollbar color and track color */
}

.gallery {
  display: flex; /* Flexbox to align images horizontally */
  gap: 10px; /* Add space between images */
}

.gallery img {
  height: 300px; /* Set a max height */
  flex-shrink: 0; /* Prevent images from shrinking */
  transition: transform 0.3s ease; /* Smooth zoom effect */
}

.gallery img:hover {
  transform: scale(1.1); /* Zoom effect on hover */
}

/* Custom Scrollbar for WebKit browsers (Chrome, Safari) */
.gallery-container::-webkit-scrollbar {
  height: 8px; /* Height for horizontal scrollbar */
  background-color: transparent; /* Background color behind the scrollbar track */
}

.gallery-container::-webkit-scrollbar-thumb {
  background-color: #888; /* Color of the scrollbar thumb */
  border-radius: 10px; /* Make the scrollbar thumb rounded */
}

.gallery-container::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Darker color on hover */
}

/* Other styles */
.bg-light {
  background-color: #EE2F7F !important;
}

.poster {
  background-image: url('/images/theshittableposter.jpeg');
  height: 80%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.bg-red {
  background-color: #EE2F7F;
}

.btn {
  background-color: #e07e7d;
  border: none;
}

.btn-primary:hover {
  background-color: #603635;
}

.jumbotron {
  background-color: #EE2F7F;
  color: white;
  margin: 0;
}

.poster-button {
  position: absolute;
  top: 45%;
  left: 9%;
  background-color: #EE2F7F;
  color: white;
}

.sub {
  color: grey;
  font-size: 0.8rem;
}

.meet-the-actors {
  margin-top: 5vw;
}

.meet-the-actors > div > .row > div > img {
  height: 5%;
}

/* Responsive adjustments */
@media only screen and (max-width: 1400px) {
  .poster-button {
    left: 5%;
  }
}

@media only screen and (max-width: 1276px) {
  .poster-button {
    left: 2%;
  }
}

@media only screen and (max-width: 1170px) {
  .poster-button {
    left: 0%;
  }
}

@media only screen and (max-width: 1124px) {
  .poster-button {
    display: none;
  }
}