body, html {
  height: 100%;
  font: 16px;
  font-family: "calibri", sans-serif;
  color: #777;
}

/*----------------Logo/Navigation---------------------------*/

.btn-primary {
    position: fixed;
    top: 4%;
    left: 3%;
    z-index: 100;
    background-color: #c7991a; 
    font-size: 1.5em;
    border: none;
}

.btn-primary:hover {
    background-color: #f5ce5b;
}

.btn-primary:focus {
    background-color: #c7991a;
    border-color: none;
    box-shadow: none;
}

.offcanvas {
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    padding: 0 0 0 0px;
}

.offcanvas.offcanvas-start {
    width: 200px;
}

.btn-close {
    opacity: 1;
    font-size: 1.5em;
}

.btn-close:focus {
    background-color: #c7991a;
    border-color: none;
    box-shadow: none;
}

ul {
    list-style-type: none;
}

.main li {
    font-size: 2em;
    padding: 10px 0;
    text-align: center;
}

.main a {
    text-decoration: none;
    color: #fff;
}

.main a:hover {
    color: #f5ce5b;
}

.main {
    padding-top: 50px;
}

/*----------------homepage background video or static image option---------------------*/

#home {
    padding-bottom: 1080px;
}
/* note : comment-out padding-bottom if using static image option instead of video */

video {
    width: 1920px;
    height: 1080px;
    position: fixed;
    z-index: -100;
}
    
#home h1 {
    position: absolute;
    top: 40%;
    left: 0%;
    color: #fff;
    font-size: 5em;
    font-family: "Mrs Saint Delafield", cursive, san-serif;
    width: 100%;
    text-align: center;
}

#home p {
    position: absolute;
    top: 75%;
    left: 0%;
    color: #fff;
    font-size: 1.5em;
    width: 100%;
    text-align: center;
}

/* ----for homepage static image option, see below background image section-- */


/*----------------about-------------------------------------------*/

#about {
    background-color: #040f29;
    padding: 100px 0;
}

#about h2 {
    font-size: 5em;
    font-family: "Mrs Saint Delafield", cursive, san-serif;
    text-align: center;
    color: #fff;
    padding-bottom: 20px;
}

#about p {
    font-size: 1.2em;
    color: #fff;
}

#about img {
    display: block;
    width: 600px;
    border-radius: 25%;
    margin: 50px auto;
}

/*----------------background-1 and 2 and homepage static image option-----------*/
/* note need to do media queries to be not fixed attachment on smaller screens */

@media screen and (max-width: 1099.98px) {
.background-1 {
    background-image: url("../images/background-1.jpg");
    min-height: 600px;
    position: relative;
    opacity: 1;
    /* background-attachment: fixed; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.background-1 p {
    color: #fff;
    font-size: 1.5em;
    text-align: center;
    position: absolute;
    top: 40%;
    margin: 0 auto;
}

.background-2 {
    background-image: url("../images/background-2.jpg");
    min-height: 600px;
    position: relative;
    opacity: 1;
    /* background-attachment: fixed; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.background-2 p {
    color: #fff;
    font-size: 1.5em;
    text-align: center;
    position: absolute;
    top: 40%;
    margin: 0 auto;
}

/* ---note: if using homepage static background image option will need to comment-out padding-bottom in #home, see above */

/* .homepage-background {
    background-image: url("../images/video-static-image.jpg");
    min-height: 1000px;
    position: relative;
    opacity: 1; */

    /* background-attachment: fixed; */

    /* background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
} */

}

/* -------- */

@media screen and (min-width: 1100px) {
.background-1 {
    background-image: url("../images/background-1.jpg");
    min-height: 600px;
    position: relative;
    opacity: 1;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.background-1 p {
    color: #fff;
    font-size: 1.8em;
    text-align: center;
    position: absolute;
    top: 40%;
    margin: 0 auto;
}

.background-2 {
    background-image: url("../images/background-2.jpg");
    min-height: 600px;
    position: relative;
    opacity: 1;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.background-2 p {
    color: #fff;
    font-size: 1.8em;
    text-align: center;
    position: absolute;
    top: 40%;
    margin: 0 auto;
}

/* ---note: if using homepage static background image option will need to comment-out padding-bottom in #home, see above */

/* .homepage-background {
    background-image: url("../images/video-static-image.jpg");
    min-height: 1000px;
    position: relative;
    opacity: 1;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
} */

}

/*----------------music-------------------------------------------*/

#music {
    background-color: #eef3fa;
    padding: 100px 0;
}

#music h2 {
    font-size: 5em;
    font-family: "Mrs Saint Delafield", cursive, san-serif;
    text-align: center;
    color: #040f29;
    padding-bottom: 20px;
}

#music img {
    display: block;
    margin: 30px auto;
    padding: 10px 10px 10px 10px;
    border: 2px solid #BFBFBF;
    box-shadow: 5px 5px 5px #aaaaaa;
    background-color: #fff;
}

.music-links {
    margin: 30px auto;
}

.music-links p {
    text-align: center;
    font-size: 2em;
    color: #040f29;
}

/* ---music player------- */

 * {
      box-sizing: border-box;
    }

    .player {
      background: #fff;
      padding: 20px;
      border-radius: 20px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
      width: 100%;
      max-width: 500px;
      text-align: center;
      margin: 30px auto;
    }

    .album-title {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #333;
    }

    .song-title {
      font-size: 20px;
      margin-bottom: 10px;
      color: #333;
    }

    .controls {
      margin: 15px 0;
    }

    button {
      background: rgb(53, 85, 128);
      color: #fff;
      border: none;
      padding: 10px 15px;
      font-size: 18px;
      border-radius: 8px;
      cursor: pointer;
      margin: 0 5px;
      width: 100px;
    }

    button:hover {
      background: rgb(92, 140, 202);
    }

    .progress-container {
      width: 100%;
      background: #ddd;
      border-radius: 10px;
      overflow: hidden;
      height: 10px;
      margin: 5px 0;
      cursor: pointer;
    }

    .progress {
      background: rgb(53, 85, 128);
      height: 100%;
      width: 0%;
    }

    .time-display {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      margin-bottom: 10px;
      color: #555;
    }

    .playlist {
      margin-top: 15px;
      text-align: left;
    }

    .playlist-item {
      cursor: pointer;
      padding: 6px;
      border-bottom: 1px solid #eee;
      transition: background 0.2s;
      color: #333;
    }

    .playlist-item:hover {
      background: #f1f1f1;
    }

    .active {
      font-weight: bold;
      color: rgb(53, 85, 128);
    }

    @media (max-width: 480px) {
      .player {
        padding: 15px;
        border-radius: 15px;
      }

      .album-title {
        font-size: 18px;
      }

      .song-title {
        font-size: 16px;
      }

      button {
        padding: 8px 16px;
        font-size: 14px;
        width: 90px;
      }

      .time-display {
        font-size: 12px;
      }
    }

/*----------------videos-------------------------------------------*/

#videos {
    background-color: #040f29;
    padding: 100px 0;
}

#videos h2 {
    font-size: 5em;
    font-family: "Mrs Saint Delafield", cursive, san-serif;
    text-align: center;
    color: #fff;
    padding-bottom: 20px;
}

#videos p {
    font-size: 1.5em;
    color: #fff;
    text-align: center;
}

iframe {
    display: block;
    margin: 30px auto;
}

/*----------------photos-------------------------------------------*/

#photos {
    background-color: #fff;
    padding: 100px 0;
}

#photos h2 {
    font-size: 5em;
    font-family: "Mrs Saint Delafield", cursive, san-serif;
    text-align: center;
    color: #040f29;
    padding-bottom: 20px;
}

#photos p {
    font-size: 1.2em;
    color: #333;
}

#hori-scroll-box {
    background-color: #fff;
    overflow: auto;
    white-space: nowrap;
    padding: 10px 10px 20px 10px;
    margin-top: 0px;
}

#hori-scroll-box img {
    padding: 2px;
    width: 600px;
    height: 400px;
    border: solid 1px #999;
    box-shadow: 3px 3px 3px #aaa;
    border-radius: 25px;
}

/*----------------events and merch-------------------------------------------*/

#events {
    background-color: #040f29;
    padding: 100px 0;
}

#events h2 {
    font-size: 5em;
    font-family: "Mrs Saint Delafield", cursive, san-serif;
    text-align: center;
    color: #fff;
    padding-bottom: 20px;
}

#events p {
    font-size: 1.2em;
    color: #fff;
    line-height: 1.8;
    text-align: center;
}

#merch h2 {
    color: #fff;
}

#merch a  {
    display: block;
    color: #fff;
    text-decoration: none;
    background-color: #c671f8;
    font-size: 2em;
    text-align: center;
    width: 300px;
    margin: 0 auto;
    border-radius: 30px;
    border: 1px solid #777;
    margin-top: 50px;
}

#merch a:hover {
    display: block;
    color: #fff;
    text-decoration: none;
    background-color: #d296f5;
    font-size: 2em;
    text-align: center;
    width: 300px;
    margin: 0 auto;
    border-radius: 30px;
    border: 1px solid #777;
    margin-top: 50px;
}

.events-merch-boxes-1,.events-merch-boxes-2 {
    margin: 60px 0px;
    padding: 0 10px;
}

.events-merch-boxes-1 a {
    display: block;
    color: #fff;
    text-decoration: none;
    background-color: #58d1f7;
    font-size: 2em;
    text-align: center;
    width: 300px;
    margin: 0 auto;
    border-radius: 30px;
    border: 1px solid #777;
    margin-top: 50px;
}

.events-merch-boxes-1 a:hover{
    display: block;
    color: #fff;
    text-decoration: none;
    background-color: #8bdef7;
    font-size: 2em;
    text-align: center;
    width: 300px;
    margin: 0 auto;
    border-radius: 30px;
    border: 1px solid #777;
    margin-top: 50px;
}

#events .bi {
    font-size: 1em;
}

.bi-calendar2-event {
    color: #58d1f7;
    font-size: 2em;
}

.bi-bag {
    color: #c671f8;
}

/*----------------contact-------------------------------------------*/

/* note: for video homepage */
#contact {
    background-color: rgba(255,255,255,0.5);
    padding: 50px 0;
    width: 370px;
    margin: 50px auto;
}

/* note: for homepage static image option */
/* #contact {
    background-color: rgba(255,255,255,0.5);
    padding: 200px 0;
    width: 370px;
    margin: 0px auto;
} */

#contact h2 {
    font-size: 5em;
    font-family: "Mrs Saint Delafield", cursive, san-serif;
    text-align: center;
    color: #040f29;
    padding-bottom: 20px;
}

#contact .bi {
    font-size: 2.5em;
    margin: 0 10px;
}

.bi-facebook {
    color:  #1877F2;
}

.bi-instagram {
    color: #d62976;
}

.bi-tiktok, .bi-twitter-x {
    color: #000;
}

.bi-youtube {
    color: #FF0000;
}

.social-media {
    text-align: center;
    margin: 20px 0 50px 0;
    padding: 10px 0 5px 0;
}

#contact p {
    color: #222;
    text-align: center;
    font-size: 1.5em;
}

#contact a {
    text-decoration: none;
    color: rgb(10, 10, 253);
}

/*----------------footer------------------------------------------*/

footer {
    text-align: center;
    padding: 20px 0 5px 0;
    background-color: #040f29;
    color: #fff;
}

footer p {
    font-size: 1em;
}