html {
    scroll-behavior:smooth;
}

/*-------- FONTS ---------->*/


@font-face {
  font-family: "phantasmagoria";
  src: url("fonts/phantasmagoria.otf") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: "Fraunces";
    src: url("fonts/Fraunces_9pt-Regular.ttf")format("woff2");
}


 
/*-------- ANIMATION ---------->*/



@keyframes expand {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

a {
    text-decoration: none;
}

/*-------- MAIN ---------->*/



h1 {
    font-family: "phantasmagoria";
    color: antiquewhite;
}

nav {
    font-family: "phantasmagoria";
}

body {
    background-color: rgb(1, 84, 1);
    margin: 0px;
}


/*-------- HEADER ---------->*/


.homepage-header {
    background-color: rgb(1, 84, 1);
    min-height: 824px;
    display: flexbox;
    background-image: url("images/HEADER IMAGE.jpg");
    background-size: cover;
}


.header-logo {
    position: absolute;
    top: 20px;
    left: 200px;
    width: 250px;
    z-index: 10;
    padding-bottom: 0%;
    z-index: 2;

    animation: expand 1.2s ease-out;
}

.main-nav{
   
    font-size: 35px;
    word-spacing: 20px;
    position:absolute;
    margin-left: 500px;
    margin-top: 124px;
    color:rgb(1, 84, 1);
    a:link {color:black};
    a:visited {color:black};
    a:hover {color:rgb(1, 84, 1)};
    z-index: 3;
    animation: expand 1.2s ease-out;
}

.separator {
    color: black;
}


/*-------- ABOUT ---------->*/



.about-section {
    display: flex;
    height: 653px;
    a:link {color:antiquewhite};
    a:visited {color:antiquewhite};
    a:hover {color:rgb(0, 0, 0)};
}

.about-section h1 {
    font-size: 100px;
    padding-left: 300px;
    padding-top:100px;
    animation: expand 1.2s ease-out;
}
.about-section p {
    position: absolute;
    padding-top: 270px;
    padding-left: 300px;
    font-size: 25px;
    color:rgb(212, 202, 188);
    font-family: "Fraunces";
    animation: expand 1.2s ease-out;
}



.about-section img {
    display: flex;
    position: absolute;
    right: 0px;
    height: 720px;
    padding: 0%;
}


/*-------- MUSIC ---------->*/



.music-section {
    padding: 0px;
    background-color: antiquewhite;
    width: 100%;
    min-height: 700px;
}

.music-section h1 {
    display:flex;
    justify-content: center;
    font-size: 100px;
    color: darkgreen;

    padding-top: 100px;
    animation: expand 1.2s ease-out;
}

.youtube-video {
    display: block;
    margin: 0 auto;
    padding-bottom: 100px;
    animation: expand 1.2s ease-out;

}

.spotify {
    display: block;
    margin: 0 auto;
    padding-bottom: 100px;
    animation: expand 1.2s ease-out;

}


/*-------- SHOWS ---------->*/


.shows-section {
    background-color: rgb(1, 84, 1);
    width: 100%;
    min-height: 700px;
    padding-top:100px;
}

.shows-section h1 {
    display:flex;
    justify-content: center;
    color: antiquewhite;
    font-size: 100px;
    animation: expand 1.2s ease-out;
}



/*-------- CONTACT ---------->*/



.contact-section {
    background-color: antiquewhite;
    min-height: 700px;
    font-size: 50px;
    animation: expand 1.2s ease-out;   
    padding-top:100px;
}

.contact-section h1 {
    color:rgb(1, 84, 1);
    display:flex;
    justify-content: center;
    padding-top: 200px;
}

.contact-section a{
    color:rgb(1, 84, 1);
    display:flex;
    justify-content: center;
    padding-top: 0px;
    a:link {color:black};
    a:visited {color:black};
    a:hover {color:rgb(1, 84, 1)};
}


/*-------- LARGE LAPTOP - 1440px ---------->*/


@media  (max-width: 1440px) {

.homepage-header {
    flex-direction: column;
    width:100%;
    background-size: cover;
    background-position: center;
    min-height:700px;
    flex-direction: column; /* Stack layout elements vertically on mobile */
  }

.main-nav {
    font-size: 30px;
    word-spacing: 10px;
}

.about-section {
    max-height: 500px;
}

.about-section img {
    max-height: 567px;
}

.about-section h1 {
    font-size: 70px;
    padding-top: 90px;
    padding-left: 150px;
}

.about-section p {
    font-size: 20px;
    padding-top: 220px;
    padding-left: 150px;
}

.youtube-video {

    max-height: 400px;
    padding-left: 0px;
    padding-top: 10px;

}

.shows-section {
    min-height: 400px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.contact-section {
    max-height: 400px;
    padding-top: 0%;
    padding-bottom: 20%;
}

.contact-section h1 {
    display: block;
    text-align: center;
    font-size: 60px;


}
.contact-section a {
    display: block;
    text-align: center;
    font-size: 25px;
}

}



/*-------- SMALL LAPTOP - 1024px ---------->*/



@media  (max-width: 1024px) {
  .homepage-header {
    flex-direction: column;
    width:100%;
    background-size: cover;
    background-position: center;
    min-height:700px;
    flex-direction: column; /* Stack layout elements vertically on mobile */
  }

.header-logo {
    position: absolute;
    top: 20px;
    left: 120px;
    width: 200px;

}
  
.main-nav {
    flex-direction: column;
    word-spacing: 5px;
    font-size: 22px;
    margin-left: 360px;
    margin-top: 110px;
    }


.about-section {
    flex-direction: column;
    text-align: center;
    padding-bottom: 15.1%;
    max-height: 200px;
}

.about-section img {
    position: absolute;
    max-height: 58.1%;
}


.about-section h1 {
    font-size: 50px;
    padding-right: 900px;
    padding-left: 100px;
    padding-top: 5%;
    color:antiquewhite;
}

.about-section p {
    position: absolute;
    margin-left: -5%;
    margin-top: -6%;
    font-size: 15px;
    color:rgb(212, 202, 188);
    font-family: "Fraunces";
    text-align: left;
}

  body {
    font-size: 16px; 
  }

  .music-section {

    padding-bottom: 0%;
  }
  .music-section h1 {
    font-size: 50px;
    padding-top:10%;
    padding-left: 0px;
    color:rgb(1, 84, 1);
}

.youtube-video {

    max-height: 300px;
    padding-left: 0px;
    padding-top: 0px;

}

.shows-section {
    padding-bottom:0%;
}

.shows-section h1{
    font-size: 50px;
    padding-top: -20px;
}

.bit-widget-initializer {
    padding-bottom: 300px;
}

.contact-section {
    min-height: 300px;
}

.contact-section h1 {
    font-size: 45px;
    padding-bottom: 0px;

}


.contact-section a {
    font-size: 25px;
    
}
}



/*-------- TABLET ---------->*/

@media (max-width: 768px){

.body {
    margin: 0px;
}
    .homepage-header {
    width:100%;
    background-size: cover;
    background-position: center;
    min-height:700px;
    flex-direction: column;

}

.header-logo {
    position: absolute;
    top: 20px;
    left: 50px;
    width: 150px;

}

.main-nav {
        flex-direction: column;
        font-size: 20px;
        margin-left: 220px;
        margin-top: 87px;
    }

.about-section {
    flex-direction: column;
    text-align: center;
    padding-bottom: 50%;


}

.about-section h1 {
    font-size: 50px;
    padding-top:120%;
    color:antiquewhite;
}

.about-section img {
    position: absolute;
    max-height: 60%;
}

.about-section p {
    position: absolute;
    padding-top: 140%;
    font-size: 15px;
    color:rgb(212, 202, 188);
    font-family: "Fraunces";
}

.music-section h1 {
    font-size: 50px;
    padding-top:10%;
    padding-left: 0px;
    padding-bottom: 10%;
    color:rgb(1, 84, 1);
}

.youtube-video {

    max-height: 200px;
    padding-left: 0px;
    padding-top: 10px;

}

.shows-section {
    font-size: 50px;
    padding-top:0%;
    padding-left: 0px;
}


.contact-section h1 {
    display: block;
    text-align: center;
    font-size: 30px;

}
.contact-section a {
    display: block;
    text-align: center;
    font-size: 20px;
}
}

/*-------- MOBILE LARGE ---------->*/

@media (max-width: 425px) {
    .homepage-header {
    width:100%;
    background-size: cover;
    background-position: center;
    min-height:400px;
    flex-direction: column;

}

.main-nav{
    font-size: 20px;
}
}