body {
 font-family: "Lato", sans-serif;
 -webkit-font-smoothing: antialiased;
 color: rgb(58, 58, 58);
 background-color: #ffffff;
 margin: 0px;
 padding: 0px;
}

#container {
 background-color: #ffffff;
 position: relative;
 margin: 0px auto;
 padding: 0px;
 width: 100%;
 min-height: 500px;
 border: 0px;
}

#masthead {
 position: relative;
 width: 100%;
 margin: 0 auto;
 max-width: 1230px;
 aspect-ratio: 1600 / 465;
 background-image: url('../images/masthead.avif');
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}


#masthead-link {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 10;
 text-decoration: none;
 display: block;
}

 /* Optional nice touch */
 #masthead-link:hover {
  background-color: rgba(0, 0, 0, 0.04);
 }

#content {
 z-index: 0;
 border:0px solid black;
 width: 1230px;
 margin: 0 auto;
 padding: 10px 0px 20px 0px;
 font-size: 18px;
 font-weight:300;
 line-height:2em;
}

 #content a:link, #content a:visited {
  color: #57504b;
 }

 #content a:hover {
  color: #332e2c;
  text-shadow: 2px 2px 2px rgba(50, 50, 50, 0.2);
 }


.two-column-container {
 display: flex;
 width:900px;
 flex-wrap: wrap; /* Allows items to wrap to next line */
 gap: 50px; /* Space between the two blocks */
 margin: 20px auto;
}
.left-block {
 flex: 0 0 475px;
 align-content: center;
}
.right-block {
 flex: 0 0 375px;
}
.column {
 flex: 1; /* Both columns take equal space */
 display: flex;
 flex-direction: column;
 gap: 25px; /* Space between videos */
}

/* Responsive YouTube Embed */
.video-wrapper {
 position: relative;
 width: 100%;
 padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
 height: 0;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

 .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
 }


.contact_spacer {
 height: 5px;
 width: 1px;
}

#giglistwide {
 background-color: rgb(255, 126, 0);
 width: 100%;
}

#giglistcontent {
 width: 900px;
 padding: 20px 0px 20px 0px;
 margin: 0 auto;
 display: flex;
 gap: 50px; /* space between divs */
}

#giglistimage {
 max-width:33%;
 overflow:hidden;
}
#giglistimage img {
 max-width:100%;
}

#giglistcontainer {
 width:100%;
}
#giglist {
 width: 100%;
 column-count: 2;
 column-gap: 30px;
}

.catchuslive {
 display: inline-block;
 font-size: 32px;
 line-height: 42px;
 padding-bottom: 30px;
 color: white;
 font-weight: 400;
 width: 100%;
}

.gig_event {
 max-width: 100%;
 margin-bottom: 30px;
 break-inside: avoid;
}

.gig_date {
 color: rgb(29, 30, 32);
 font-size: 18px;
 font-weight:700;
 line-height:28px;
}
.gig_venue {
 color: white;
 font-size: 24px;
 font-weight: 900;
 line-height: 28px;
}
.gig_venue a:link, .gig_venue a:visited {
 color:white;
}

.gig_location {
 color: white;
 font-size: 18px;
 font-weight: 400;
 line-height: 28px;
}




#contact input, #contact textarea, #contact select {
 font-family: 'Lato', sans-serif;
 font-size: 20px;
 border: 1px solid #999999;
 width: 100%;
 margin: 0px;
 padding: 5px 3px 5px 3px;
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box; /* Firefox, other Gecko */
 box-sizing: border-box; /* Opera/IE 8+ */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 color: #999999;
}

#contact textarea {
 font-family: 'Lato', sans-serif;
}

#contact input[type=submit] {
 font-weight: bold;
 height: 76px;
 width: 76px;
 position: relative;
 top: -1px;
 color: #010;
}

#footer {
 width: 100%;
 height: 80px;
 border-top: 1px solid gray;
 background-color: rgb(13, 20, 26);
 text-align: center;
 color: rgb(184, 192, 204);
 font-size: 14px;
}

/*When screen is smaller than 700px*/
@media screen and (max-width: 700px) {
 body {
  padding-top: 0px;
 }

 .two-column-container {
  flex-direction: column;
  width: 100% !important;
  gap: 35px;
  margin: 30px auto 40px auto;
 }

 .left-block, .right-block {
  width: 100% !important;
  flex: none;
 }

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

  .column {
   gap: 28px;
  }

 #masthead {
  background-image: url('../images/masthead_narrow.avif') !important;
  width: 100%;
  aspect-ratio: 1024 / 768;
 }

 #giglistcontent {
  width: 96%;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  padding: 20px 0;
 }

 #giglistimage {
  max-width: 100%;
  width: 100%;
  text-align:center;
 }

  #giglistimage img {
   max-width: 100%;
   height: auto;
   display: inline-block; /* Important for text-align to work */
  }

 #giglistcontainer {
  width: 100%;
 }

 /* YouTube Section - Clean spacing */
 #youtube {
  padding: 20px 4% 20px 4%; /* Good bottom padding */
  margin-bottom: 0;
 }

 #content {
  display: block;
  width: 96%;
  padding: 10px 2% 20px 2%;
  margin: 0 auto;
  font-size: 16px;
 }

 #container {
  padding-bottom: 80px; /* Important: pushes footer down */
 }

 #footer {
  margin-top: 0;
  position: relative;
 }
}