/* background container */
.video-container {
  position: relative;
  width: 100%;
  height: 100vh;     /* full viewport height - adjust if you prefer a different height */
  margin: 0;
  overflow: hidden;
}

.video-container img,
.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* overlay column (leftish, vertically centered) */
.overlay-content {
  position: absolute;
  top: 50%;
  left: 15%;                /* control horizontal placement: increase -> moves right, decrease -> moves left */
  transform: translateY(-45%);
  width: 40%;               /* width of the text column; tweak (eg. 35% - 50%) */
  max-width: 520px;         /* cap width on large screens */
  min-width: 260px;         /* prevents too-narrow column */
  color: antiquewhite;
  text-align: left;         /* keep headings left-aligned */
  padding-right: 1rem;      /* optional breathing room */
}

/* headings */
.overlay-text-header {
  margin: 0 0px 0 0;
  margin-bottom: 400px;
  font-size: 6rem;
  font-weight: 100;
  letter-spacing: 0.4px;
  line-height: 0.95;
  color: antiquewhite;
  text-align: center;
;
}

.sub-buttons img {
  width: 35%;
  display: block;
  margin: auto;
  margin-top: 30px;
}

.overlay-text-sub1 {
  margin: 0 0 0em 0;
  font-size: 1.2rem;
  font-weight: 300;
  color: antiquewhite;
  padding: 40px;
  text-align: center;
}

/* button group - centers buttons horizontally within the overlay column */
.button-group {
  display: flex;
  flex-direction: column;   /* stack vertically */
  align-items: center;      /* center buttons horizontally under the left-aligned text */
  gap: 1rem;                /* spacing between buttons */
}

/* button visuals - no absolute positioning here */
a.button {
  display: inline-block;
  min-width: 220px;         /* ensures balanced appearance */
  width: auto;              /* size to content but remain at least min-width */
  padding: 12px 20px;
  font-size: 1.1rem;
  font-weight: 100;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  background-color: rgba(72,72,72,0.75);
  color: rgba(255,255,255,0.9);
  transition: background-color 0.2s, color 0.2s;
}

/* hover */
a.button:hover {
  background-color: rgba(255,255,255,0.6);
  color: rgb(72,72,72);
  cursor: pointer;
}

/* IMPORTANT: remove or override any legacy absolute button styles */
a.button,
a.b1, a.b2, a.b3 { 
  position: static !important; 
  left: auto !important; 
  top: auto !important; 
  transform: none !important;
}

.section-heading {
  font-size: 65px;
}

.row {
    display: flex;
  }

.quote-block {
  text-align: center;
}

.quote {
  font-style: italic;
}

.quote-source {
  text-align: center;
}

.quote-link a {
  color: rgb(255, 255, 255, .8);
  text-decoration: underline;
}

.spotify-container {
  text-align: center;
  width: 100%;
}

.spotify-widget {
  width: 40%;
}

.live-table {
    margin-left: auto;
    margin-right: auto;
    font-size: 17px;
}

td {
    padding: 20px;
    text-align: center;
}

.videowrapper {
  position: relative;
  padding-bottom: 56.25%;
}

.videowrapper iframe {
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
  text-align: center;
}

 /* Container to constrain the widget */
 .bit-widget-wrapper {
  max-width: 60%;
  overflow-x: auto;
  box-sizing: border-box;
}


.contact{
 text-align: center;
}

#contact {
  padding-bottom: 55px;
}

.fade-on-load {
  opacity: 0;
  transition: opacity 1s ease; /* adjust duration as needed */
}

.fade-on-load.visible {
  opacity: 1;
}


/* Responsive: on small screens make overlay narrower and center it for readability */
@media (max-width: 800px) {
  .overlay-content {
    left: 50%;
    transform: translate(-50%, -45%); /* center on mobile */
    width: 90%;
    max-width: 640px;
    text-align: center;                /* center headings on mobile for better balance */
  }
  .button-group {
    align-items: center;
  }
  .overlay-text-header {
    font-size: 4.8rem;
  }
  .overlay-text-sub1 {
    font-size: 1.2rem;
  }
  a.button {
    min-width: 200px;
    font-size: 1rem;
  }

  .about {
    margin-left: 18vw;
    margin-right: 18vw;
  }

  .spotify-widget {
    width: 70%;
  }

  .video-container img,
  .video-container video {
    object-position: left center; /* shift left */
}
}