body {
    display: flex;
    flex-direction: column;
    background-color: black;
    color: greenyellow;
    align-items: center;
}

#banner {
    display:flex;
    flex-direction: column;
    align-items: center;
}

#lander {
    display: flex;
    max-width: 50%;
    min-width: 400px;
    
}

#email {
    color:red;
}

a:hover{
    background-color: white;
    color: black;
}
.nav {
    margin: 0px;
}

li {
    list-style: none;
    display: inline-block;
    margin: 0px 4px 0px 4px;
}

p {
    margin: 0px;
    font-family: Inconsolata;
    font-weight: bold;
    /**font-style: italic; **/
}

a {
    margin: 0px;
    font-family: Inconsolata;
    color: rgb(162, 196, 112)
}

#information {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0px 0px 20px 0px;
}

.release {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-style: dashed;
    border-width: 1px;
    margin: 20px 0px 20px 0px;
    padding: 10px;
}

.release-img {
    max-width: 100px;
    padding: 0px 10px 0px 10px;
}
.details {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 10px 0px 10px;
}

#title {
    text-decoration: underline;
    margin-bottom: 10px;
}
.drop-down {
    margin:5px 5px 5px 10px;
}

.drop-down:hover {
    cursor:pointer;
}

.stream {
    margin-top: 5px;
}
.show {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-style: dashed;
    border-width: 1px;
    margin: 20px 0px 20px 0px;
    padding: 10px;
    min-width: 70%;

}

.show #date {
    text-decoration: underline;
}

.show p {
    padding: 5px;
}


#lineup {
    text-align: center;
}

#ticket {
    margin-top: 5px;
}

ul {
    padding: 0px;
    margin: 0px;
}

#other {
    margin: 15px 0px 0px 0px;
}





/******* Archive Page ************/

table {
    border-spacing: 0px;
    padding: 10px;
}

#live-show-container {
    margin-top: 20px;
    margin-bottom: 80px;
    border: 1px;
    border-style: dashed;
    padding:10px 5px 10px 5px;
   font-size: medium;
}

th {
    font-family: Inconsolata;
}

.table-cell{
    text-align: center;     
    margin: 20px 20px 20px 20px;
    padding: 10px 10px 10px 10px;
    max-width: 500px;
}

/** EPK Page **/

.epk-pre {
    margin: 0px;
    margin-top: 10px;
}

#epk-group {
    display:flex;
    max-width: 40%;
    min-width: 300px;
    margin:15px;
}

#length-select-wrap {
    display:flex;
    border-style: dashed;
    border-width: 1px;
    border-bottom: none;
}

#length-select-wrap button {
    background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
    padding: 5px;
    font-size: small;
}

#bio-wrapper {
    display:flex;
    flex-direction: column;
    align-items: center;
}

#length-container {
    display: flex;
}

#length-container .length {
    padding: 6px;
}

#bio-head {
    margin:10px;
}

#bio {
    display:flex;
    flex-direction: column;
    padding:25px;
    margin:10px;
    margin-top:0px;
    max-width: 50%;
    min-width: 320px;
    font-size: 15px;
    text-align: center;
    border-style: dashed;
    border-width: 1px;
}

.bio-para {
    margin:8px;
}

#discog-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin:10px;
}

#discography {
    margin:10px;
}

#bandcamp-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.bandcamp-release {
    padding:10px;
}

#touring-link {
    margin: 20px;
    padding: 20px;
    border-style: dashed;
    border-width: 1px;
    background-color: #3b4112;

}

#performance-wrapper {
    display:flex;
    flex-direction: column;
    align-items: center;
    margin:10px;
}

#performance-head {
    margin: 10px;
}

#video-wrapper {
    display: flex;
    margin:10px;
    
}

#press-head {
    margin:10px;
}
  
  .carousel-container {
    margin: auto;
    padding:15px;
    max-width: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--lx-gap);
  
    .carousel {
      width: 100%;
      position: relative;
      overflow: hidden;
      min-width: 350px;
  
      .item {
        opacity: 0;
        width: 100%;
        height: 100%;
        display: none;
        transition: opacity 0.5s ease-in-out;
  
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }
  
        .caption {
          width: 100%;
          padding: var(--lx-space-01);
          position: absolute;
          bottom: 0;
          text-transform: uppercase;
          text-align: center;
          font-size: 12px;
          background-color: rgba(0, 0, 0, 0.5);
        }
  
        &.active {
          opacity: 1;
          display: block;
        }
      }
    }
  
    .btn {
      padding: 1em 2em;
      position: absolute;
      transform: translateY(-50%);
      top: 50%;
      outline: none;
      border: none;
      cursor: pointer;
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 900;
      color: #10100e;
      background-color: #ffffe6;
      transition: transform 0.2s ease-in-out;
  
      &:active,
      &:focus {
        transform: translateY(-50%) scale(0.9);
      }
  
      &:hover {
        transform: translateY(-50%) scale(0.96);
      }
    }
  
    .prev {
      left: -5%;
    }
  
    .next {
      right: -5%;
    }
  
    .dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
  
      .dot {
        cursor: pointer;
        height: 10px;
        width: 10px;
        background-color: #242421;
        transition: background-color 0.2s ease;
  
        &.active,
        &:hover {
          background-color: #ffffe6;
        }
      }
    }
  }







/** mobile version for archive page **/

@media
only screen and (max-width: 615px), 
(min-device-width: 700px) and (max-device-width: 750px) {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
	#row0 { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

    th:nth-of-type(1):before { content: "gig no: "; }
	th:nth-of-type(2):before { content: "date: "; }
	th:nth-of-type(3):before { content: "location: "; }
	th:nth-of-type(4):before { content: "venue: "; }
	th:nth-of-type(5):before { 
    text-decoration: underline;
    content: "lineup\a \a";
    white-space: pre;
    }

	th:nth-of-type(6):before { content: "audio recording?: "; 
        font-style: italic;
    }

    .table-cell {
        margin: 0;
        padding: 7px;
    }

    .row {
        margin: 8px 0px 8px 0px;
        border-top: 1px;
        border-bottom: 0px;
        margin: 0px;
        padding: 10px 0px 10px 0px;
        border-style: dashed none;
    }

    th {
        font-size: medium;
    }


#video-wrapper {
    display: flex;
    margin:10px;
    max-width: 350px;
    
}

.carousel-container {
    margin: auto;
    padding:15px;
    max-width: none;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--lx-gap);
    }
}