/* CSS HEX */

:root {
  --silver: #b0bbbfff;
  --lipstick-red: #f21b3fff;
  --charcoal-brown: #423e37ff;
  --lemon-lime: #cccc33ff;
  --jet-black: #00272bff;

  --carbonblack: #1e2019;
  --brightgold: #ffda00;
  --vibrantcoral: #ff6663;
  --tropicalteal: #2ea9af;

  /* CSS HSL */
  --silver: hsla(196, 10%, 72%, 1);
  --lipstick-red: hsla(350, 89%, 53%, 1);
  --charcoal-brown: hsla(38, 9%, 24%, 1);
  --lemon-lime: hsla(60, 60%, 50%, 1);
  --jet-black: hsla(186, 100%, 8%, 1);
}

/* DEBUGGER FOR PLACEMENTS */
/* * {
    outline: 1px solid red;
} */

body {
  font-family: gotham, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.bg-blue {
  background-color: blue;
  color: white;
}

section {
  min-height: 200px;
}

.header {
  background-color: var(--tropicalteal);
  min-height: 15px;
}

.navbar {
  display: flex;
  flex-direction: row;

  font-size: 1.5em;
  text-align: center;
}

.nav-left {
  background-color: #ff6663;
  width: 50%;
}

.nav-left a:link {
  color: black;
  text-decoration: none;
}

.nav-left a:visited {
  color: black;
}

.nav-right a:link {
  color: white;
  text-decoration: none;
}

.nav-right a:visited {
  color: white;
}


.nav-right {
  width: 50%;
  background-color: #1e2019;
  color: white;
}

/* .modal-lg{

  width:700px;

} */

#pullquote {
  padding: 5% 0;
  /* background-color: var(--vibrantcoral); */
  background-color: var(--tropicalteal);
}

#pullquote .container {
  padding: 0 10%;
}



#email {
  padding: 5% 0;
  background-color: var(--brightgold);

  #mc_embed_signup {
    background: var(--brightgold);
    clear: left;
    font: Gotham, san-serif;
    width: 100%;
  }
}

.quote {
  font-size: 3em;
  letter-spacing: -0.05em;
}

.quote-source {
  font-size: 1.25em;
  font-weight: 600;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.footer {
  color: black;
  margin-top: 10px;

  min-height: 25px;
  /* border-radius: 20px; */
  margin-bottom: 0;
  padding: 10px 5%;
  background-color: var(--tropicalteal);
}

#hero {
  min-height: 100px;
  text-align: center;
}

.hero {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
}

#band {
  background-color: var(--vibrantcoral);
}

#social {
  background-color: var(--vibrantcoral);
}

#about {
  background-color: var(--carbonblack);

  color: white;

}

.band-gallery {
  display: flex;
  flex-direction: row;
}

.gallery-thumb {
  border: 15px solid white;
}

#releases {
  background-color: var(--brightgold);
  min-height: 300px;
  padding-bottom: 50px;
  color: black;
}

#audio-player {
  background-color: var(--brightgold);
  color: black;
  border: 3px solid black;
}

.audio-player{

margin-left: 0;
  width: 100%;

}



#now-playing {
  text-transform: uppercase;
  font-size: 0.8em;
}

.playlist {
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: -0.05em;
}

.track {
  font-size: 1.25em;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: black;
  text-decoration: none;
}

#patreon {
  /* background-color: var(--carbonblack);

  color: white; */
  background-color: var(--brightgold);
}


#patreon a:link {
  color: black;
  text-decoration: none;
}

#patreon a:visited {
  color: black;
}

@media (min-width: 480px) {

.audio-player{

margin-left: 30%;
  width: 40%;

}
}


@media (min-width: 992px) {
  .modal-lg {
    --bs-modal-width: 900px;
  }


  .modal-body {

    display: flex;
    flex-direction: row;
  }



.audio-player{

margin-left: 40%;
  width: 20%;

}


  .img-fluid {

    width: 75%;
  }

  .modal-bio-right {
    width: 25%;
  }

}