body {
  margin: 0;
  padding: 0;
  background-color: black;
  background-image: url('silhouette.jpg');
  background-size: 100vw;
  font-family: 'Sacramento', serif; /* Choose Sacramento for a gothic serif font */
  padding-top: 90;
}

#navbar{
	background-color: rgba(0, 0, 0, .5)!important;
}

.navbar {
  position: fixed; /* Fix the navbar to the top */
  top: 0;
  width: 100%;
  z-index: 100; /* Ensure navbar stays on top of content */
  padding: 20px;
}

.navbar-brand,
.nav-link {
  color: white;
  font-weight: bold;
  text-decoration: none;
}

.nav-link {
  margin-left: 20px;
}

.active {
  font-weight: bolder;
}

.navbar-toggler {
  border: none;
  color: white;
}
.navbar-collapse {
  /* Adjust collapse behavior for responsiveness */
  display: flex; /* Make links appear in a row */
  justify-content: flex-end; /* Align links to the right */
}

@media (max-width: 768px) {  /* Adjust screen size breakpoint as needed */
  .navbar-collapse {
    display: block; /* Stack links vertically for mobile */
    justify-content: unset; /* Reset right alignment for mobile */
  }
}
.collapse.navbar-collapse {
  /* Adjust spacing for mobile view if needed */
}
.navbar.navbar-expand-lg .navbar-toggler {  /* Ensure correct class hierarchy */
  display: flex; /* Make the toggle button visible */
  align-items: center;
  padding: 0.5rem 1rem; /* Adjust padding as needed */
  font-size: 1.25rem; /* Adjust font size as needed */
  line-height: 1;
  border-color: transparent; /* Remove default border */
}

.merch-item {
  margin-bottom: 20px;
  background-color: rgba(0, 0, 0, .5);
}

.merch-item p {
  margin-top: 10px;
  text-align: center;
  color: white;
}

/* Add your image size and styling here */
.merch-item img {
  display: block;
  width: 400px; /* Adjust width as needed */
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

.slideshow-container {
  max-width: 100%;  /* Keeps the existing max-width */
  position: relative; /* Keeps the existing positioning (if needed) */
  margin: auto;       /* Keeps the existing margin for centering */
  display: flex;     /* Enables Flexbox for centering */
  justify-content: center; /* Horizontally centers the content */
  align-items: center;  /* Vertically centers the content */
}

.mySlides {
  display: none;
  /* Fade animation effect */
  animation-fill-mode: forwards;
  animation-duration: 1s;
  height: 100vh; /* Set container height to 100 viewport height */
  
  /* Added for image centering */
  text-align: center;  /* Center images horizontally */
  display: flex;       /* Enable Flexbox for optional vertical centering */
  justify-content: center; /* Vertically center content within slide (optional) */
  align-items: center;  /* Vertically center content within slide (optional) */
}
.slide-wrapper {  display: inline-block; /* Ensures content stays together */
	text-align: center; /* Simplest centering for images */
}
.mySlides img {
  height: 100%; /* Set image height to 100% of container */
  object-fit: cover; /* Maintain aspect ratio and cover container */
}



.vslideshow-container {
  max-width: 100%;  /* Keeps the existing max-width */
  position: relative; /* Keeps the existing positioning (if needed) */
  margin: auto;       /* Keeps the existing margin for centering */
  display: flex;     /* Enables Flexbox for centering */
  justify-content: center; /* Horizontally centers the content */
  align-items: center;  /* Vertically centers the content */
}

.vmySlides {
  display: none;
  /* Fade animation effect */
  animation-fill-mode: forwards;
  animation-duration: 1s;
  height: 100vh; /* Set container height to 100 viewport height */
  
  /* Added for image centering */
  text-align: center;  /* Center images horizontally */
  display: flex;       /* Enable Flexbox for optional vertical centering */
  justify-content: center; /* Vertically center content within slide (optional) */
  align-items: center;  /* Vertically center content within slide (optional) */
}
.vslide-wrapper {  display: inline-block; /* Ensures content stays together */
  text-align: center; /* Simplest centering for images */
}
.vmySlides iframe {
  height: 100%; /* Set image height to 100% of container */
  object-fit: cover; /* Maintain aspect ratio and cover container */
}



/* Navigation buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  opacity: 0.8;
  border: none;
  border-radius: 0 3px 3px 0;
}

/* Position the "next" button to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev { 
	left: 0;
}
/* Hover effects for buttons */
.prev:hover, .next:hover {
  opacity: 1;
}

/* Styling for the currently displayed slide */
.active {
  display: block;
  animation-name: fadein;
}

/* Fade animation (optional) */
@keyframes fadein {
  from {opacity: 0;}
  to {opacity: 1;}
}

.slideshow-container {
  background-color: rgba(0, 0, 0, .5);
}

.vslideshow-container {
  background-color: rgba(0, 0, 0, .5);
}

.prev, .next {
  background-color: red;
}
.youtube-container {
  display: inline-block; /* Display the element inline with margins */
  position: relative; /* Enable positioning for the title overlay */
  width: 100%; 
  height: auto;
}

.youtube-container a {
  text-decoration: none; /* Remove underline from the link */
}

.video-title {
  position: absolute; /* Position the title overlay on top of the image */
  bottom: 0; /* Place the title at the bottom */
  left: 0; /* Align the title to the left */
  width: 100%; /* Stretch the title across the image width */
  color: white; /* Set the title text color to white */
  background-color: rgba(0, 0, 0, .5)
  padding: 5px; /* Add some padding for the title text */
  font-weight: bold; /* Make the title text bold */
  font-size: 14px; /* Set the title text size */
  text-align: center; /* Center the title text horizontally */
}
.youtube-container:hover {
  opacity: 0.8;
}
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the icon */
  opacity: 0.7; /* Set the initial opacity */
}

.youtube-container:hover .play-icon {
  opacity: 1; /* Increase opacity on hover */
}
.youtube-container img {
  width: 100%; 
  height: auto;
  
}
.band-header {
  background-color: rgba(0, 0, 0, .5);
  overflow: hidden; /* Important for preventing image overflow */
  position: relative; /* Needed for absolute positioning of content */
}

.header-image {
  width: 100%; /* Image scales to 100% width of header */
  height: auto;  /* Image height scales proportionally */
  padding-top: 50px;
}
.section-title {
  font-family: Arial, sans-serif; /* Fallback font */
  position: relative; /* Needed for pseudo-element */
  text-align: center;
  margin: 20px 0;
  background-color: rgba(0, 0, 0, .5);  
  padding: 20px;
}
.my-section {
  background-color: rgba(0, 0, 0, .5); /* Set the background color to black */
  padding: 20px; /* Add some padding for better visual separation */
}
.gothic-title {
  font-family: 'Nanum Gothic', sans-serif; /* Google Font with dripping effect (per your previous description) */
  font-weight: bold;
  color: #c00; /* Red color */
  text-shadow: 2px 2px 0px #000; /* Shadow effect */
  font-size: 1.6em;
  filter: drop-shadow(0 0 2px #c70000);
}

.gothic-title-pull {
  font-family: 'Nanum Gothic', sans-serif; /* Google Font with dripping effect (per your previous description) */
  font-weight: bold;
  color: #1E637A; 
  text-shadow: 2px 2px 0px #000; /* Shadow effect */
  font-size: 1.6em;
  filter: drop-shadow(0 0 8px #3FCFFF);
}

.regular-title {
  font-weight: normal;
  color: #ddd; /* Light gray color */
}

@keyframes dripping {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
@media only screen and (max-width: 768px) {
  .youtube-container {
    width: 100%; /* Set width to 100% for smaller screens */
	height: auto;
  }
  .youtube-container img {
    width: 100%; /* Set width to 100% for smaller screens */
	height: auto;
  }
}
.video-container {
  display: grid;
  grid-template-rows: 1fr auto; /* Define rows for videos */
  align-items: center; /* Center videos horizontally */
  display: flex;
  justify-content: center;
  align-items: center; /* Optional for vertical centering */
}

.horizontal-video {
  width: 100%; /* Stretch horizontally on large screens */
  margin: 0 10px; /* Add some margin for spacing */
  max-width: 1200px;
  max-height: 1200px;
}

.vertical-video {
  width: 100%; /* Take up half the width on large screens */
  margin: 0 10px; /* Add some margin for spacing */
  max-height: 1200px;
  max-width: 1200px;
}

/* Media queries for smaller screens */

@media screen and (max-width: 768px) {
  .horizontal-video {
    width: 100%; /* Make horizontal video full width on small screens */
  }
  .vertical-video {
    width: 100%; /* Hide vertical video on small screens (optional) */
  }
}
.youtube-frame {
	height: 100vh;
	width: 100%;
	object-fit: fill; // use "cover" to avoid distortion
	position: absolute;
}