@font-face {
    src: url("fonts/Labyrinthus\ Rounded.ttf");
    font-family: 'Labyrinthus';
}

@font-face {    src: url(fonts/FRAHV.TTF);
    font-family:'Franklin Gothic Heavy';
}

/* Google Fonts */

/* 
font-family: 'Lato', sans-serif;
font-family: 'Lobster Two', cursive;
font-family: 'Open Sans', sans-serif;
font-family: 'Orbitron', sans-serif;
font-family: 'Oswald', sans-serif;
*/



* {
    margin: 0px;
}

body {
    background-image: url(images/imageedit.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: D2D7D3;
    box-sizing: border-box;
}

.wrapper {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    background-color: rgba(210, 215, 211, .9);
}


/*----------------------------------------------*/
/* navigation section */

.navigationContainer{
    height: 500px;
    background-image: url(images/audience-2.jpg);
    background-size: cover;
    background-position: center;  
}

.artistnavCOntainer{
    height: 400px;
    background-image: url(images/audience-band.jpg);
}

.navigation{
   display: flex;
   justify-content: space-around;
   background-color:rgba(255, 0, 255, 1);
}

.artistnavigation{
    background-color:rgba(255, 0, 255, 1);
}



.navigation a{
    color:#BEE674;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    font-size: 20px;
    padding: 15px;
    display: block;
    text-decoration: none;  
    transition: .5s;  
}

.navigation a:hover {
    background-color: #FF00FF;
    color: #BEE674;
 }

 .hamburger {
    display: none !important;
 }
/*----------------------------------------------*/
/* hero section */

.hero {  
    width: 100%;
    background-image: linear-gradient(#ff00ff, #D2D7D3);
    position: relative;
    display: flex;
    flex-direction: column; 
    align-items: center;
    text-align: center;
}



.hero h1 {
    font-size: 105;
    color: rgb(255,255,255);
    font-family: 'Labyrinthus';
    font-weight: normal;
    padding-top: 40px;
}

.hero h2{
    font-family: 'Lobster Two', cursive;
    font-size: 6vw;
    font-weight: 700;
    font-style: italic;
    color: #BEE674;    
}

.hero p{
    font-family: 'Lobster Two', cursive;
    font-size: 4vw;
    font-weight: 400;
    font-style: italic;
    color: #BEE674;
}

.hero a {
    font-family: 'Franklin Gothic Heavy';
    font-weight: 500;
    font-size: 35px;
    color: BEE674;
    text-decoration: none;
    background-color: #1A1B29;
    padding: 40px;
    margin: 20px;
    border-radius: 20px;
    transition: .5s;
}

.hero a:hover {
    color: white;
    scale:1.2;
    

}

.artistHero h2 {
    font-family: 'Lato', sans-serif;
    font-size: 50px;
    font-style: italic;
    background: none;
    padding:0;
    color: white;
    background-color: rgba(255, 0, 255, .5);
    padding:1vw;
    border-radius: 1vw;
    

}

/*----------------------------------------------*/
/* banner section */

.banner{
    height: 400px;
    margin: 40px 0 20px 0;
    background-image:url(images/adult-audience.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-flow: column-reverse wrap;
    overflow: hidden;
    
}



.textContainer{
    background-color: #FF00FF;
    height: 380px;
    width: 400px;
    align-self:flex-end;
    border-radius: 100% 0 0 0;
    overflow: hidden;
    display: flex;

}
.textContainer h2{
    align-self: center;
    color:#1A1B29;
    padding: 100px 10px 20px 100px;
    font-family: 'Lato', sans-serif;
    font-size: 32px;
    font-weight: 800;
    font-style: italic;
    text-align: center;
}

/*----------------------------------------------*/
/* carousel section */

.carousel{
    margin-bottom: 20px;
}

.carousel h2 {
    font-family: 'Lato', sans-serif;
    font-style: italic;
    font-size: 6vw;
    color:white;
}
.carousel h3 {
    font-family: 'Lato', sans-serif;
    font-style: italic;
    font-size: 3vw;
    color:#1A1B29;
    background-color: rgba(255, 255, 255, .5);
    padding: 1vw;
}



/*----------------------------------------------*/
/* Video section */
iframe {
    width: 100%;
    aspect-ratio:16/9;
 }
 
/*----------------------------------------------*/
/* events section */

.events {
    position: relative;
    display: flex;
    flex-flow: column wrap;
    max-width: 100%;
    margin-top: 20px;
}

.events h7 {
    font-family: 'Franklin Gothic Heavy';
    font-size: 55px;
    font-weight: 800;
    color: #1A1B29;
}

.eventsContainer {
    height: 450px;
    display: flex;
    flex-flow: column wrap;
    gap: 6.4px;
}

.event1 {
    width: 55%;
    max-width: 55%;
    border-radius: 20px;
    background-color: #1A1B29;
    display: flex;
    flex-flow: column wrap;
    flex-grow: 1;
    flex-shrink: 2;
    overflow: hidden;
    gap: 65px;

}

.imageBox {
    height: 100%;
    width: 35%;
    max-width: 35%;
    border-radius: 100%;
    transform: scale(1.5);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
}

.imageBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.eventInfo1 { 
    color: white;
    font-family: 'Orbitron', sans-serif;
    display: flex;
    flex-flow: column wrap;
    padding-top: 10px;
}

.eventInfo1 h2 {
    color: #FF00FF;
    font-size: 48px;
    font-weight: normal;
    margin: 0;
    line-height: 44px;

}

.eventInfo1 a h2:hover {
    color:#BEE674; 
}

.event1 h3 {
    color: white;
    font-size: 23px;
}

.eventInfo1 h4 {
    color: white;
    padding-top: 40px;
    font-size: 27px;
    font-weight: normal;
    align-self: center;
}

.eventInfo1 p {
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: normal;
}

.eventinfo1 a {
    color: #FF00FF;
    text-decoration: none;
}

.eventInfo1 a:hover{
    color:#BEE674;
}

.eventInfo1 h5 {
    color: white;
    font-size: 10px;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    font-style: italic;
    margin:10px 0 60px 0
}

.eventInfo1 h6 {
    color:white;
    font-size: 20px;
}

.eventInfo1 h6:hover{
    color:#BEE674
}

.otherEvents {
    height:49%;
    width: 44.5%;
    max-width: 44.5%;
    border-radius: 20px;
    background-color: #1A1B29;
    display: flex;
    flex-flow: column wrap;
    overflow: hidden;
    flex-grow: 1;
    color: white;
    font-family: 'Orbitron', sans-serif;
}

.otherInfo{
    margin: 10px 0 0 50px;
}

.otherEvents h2 {
    color: #FF00FF;
    font-size: 35px;
    font-weight: normal;
    line-height: 31px;
}

.otherEvents a h2:hover {
    color:#BEE674; 
}

.otherInfo a{
    text-decoration: none;
}

.otherEvents h3 {
    color: white;
    font-size: 19px;
    padding-bottom: 50px;
}

.otherEvents h4 {
   
    color:white;
    font-size: 17px;
    font-weight: normal;
    align-self: center;
}

.otherEvents h4:hover{
    color:#BEE674;
}





/*----------------------------------------------*/
/* Home page artists section */

.artists{
    margin-top: 20px;
    display: flex;
    flex-flow: column wrap;
}

.artists p{
    font-family: 'Franklin Gothic Heavy';
    font-size: 55px;
    font-weight: normal;
   
}

.artistsContainer{
    /*background-color:red;*/
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-wrap: row wrap;
    gap:10px;
}

.artist1{
    width: 33%;
    height: 600px;
    background-image: url(images/artist-1.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    display: flex;
    flex-flow: column-reverse wrap;
    overflow: hidden;
}

.artist1info{
    width: 100%;
    height: 40%;
    align-self: flex-end;
    background-color: #FF00FF;
    border-radius: 100% 0 0 0;
    scale:1.2;
    display:flex;
    flex-flow: row wrap;
    align-items: flex-end;
    gap:5px;
}


.icons {  
    margin:0px  0 30px 50px;
    display: flex;
    flex-flow: column wrap;
    padding-left: 80px;
    gap: 5px;    
}

.artist1info i {
    color:#1A1B29;
    font-size: 40px;
    transition: .5s;
}

.artist1info i:hover{
    scale: 1.2;
    rotate: 20deg;
    color: #BEE674;
}

.artistName{
    color:#1A1B29;
    padding: 40px 0 60px 10px;
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    font-weight: normal;
    border-left: 2px dotted #1A1B29; 
}

.artist2{
    width: 33%;
    height: 600px;
    background-image: url(images/artist-3.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    display: flex;
    flex-flow: column-reverse wrap;
    overflow: hidden;
}

.artist3{
    width: 33%;
    height: 600px;
    background-image: url(images/adult-audience-band-553586.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    display: flex;
    flex-flow: column-reverse wrap;
    overflow: hidden;
}

.full{
    align-self: flex-end;
    font-family: 'Franklin Gothic Heavy';
    font-size: 35px;
    font-weight: normal;
    color: #FF00FF;
    text-decoration: none;
}


/*----------------------------------------------*/
/* Banner 2 section */

.aboutEel{
    width: 100%;
    height: 400px;
    background-image: url(images/adult-artist.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    margin-top: 20px;
    display: flex;
    flex-flow: row-reverse wrap;
    justify-content: space-between;
    overflow: hidden;
}


.contents{
    width: 50%;
    background-color: #1A1B29;
    border-radius: 0 0 0 100%;
    scale: 1.2;
    overflow: hidden;
    font-family: 'Lato', sans-serif;
    color: white;
    font-style: italic;
    text-align: center;
}

.contents h2 {
    font-size: 25px;
    font-size: 32px;
    font-weight: normal;
    padding: 50px 60px 0px 70px;
}

.contents p {
    font-size: 27px;
    font-size: 17px;
    font-weight: normal;
    padding: 10px 60px 50px 150px;
    
}

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

.footer{
    background-color: #1A1B29;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    padding: 40px;
}

.newsletter {
    min-width: 30%;
 }

.newsLetter h2{
    color: #BEE674;
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
}

.newsLetter p{
    font-size: 18px;
    color:white;
}

.inputemail {
    font-size: 14px;
    padding: 10px;
    background-color: rgb(248, 245, 245);
    border: 1px solid white;
    border-radius: 5px;
    margin-top: 10px;
    width: 70%;
 }

 .inputemail::placeholder {
    font-style: italic;
 }

 .inputemail:focus {
    background-color: white;
    outline: none;
    border: 1px solid #FF00FF;
 }

 .sendemail {
    padding: 10px;
    background: lightgray;
    border: 1px solid white;
    border-radius: 5px;
    transition: 1s;
 }

 .sendemail:hover {
    color: white; 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #BEE674), color-stop(100%, #ff00ff));
 }


 .followContainer h2{
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    color: #BEE674;
 }

.follow{
    display: flex;
    flex-flow: column wrap;
    justify-content: space-evenly;
    gap:10px;
    margin-top: 10px;
    height: 150px;
    width: 150px;
 }

 .follow i{
    filter: grayscale(100%);
    color:#FF00FF;
    font-size: 50px;
    transition: .5s;
    
 }


 .follow i:hover{
    filter:grayscale(0%);
    transform: scale(1.2) rotate(30deg);
    transform-origin: center;
 }

 .socialsContainer h2{
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    color: #BEE674;
 }

 .socials {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-evenly;
    gap:10px;
    margin-top: 10px;
    height: 150px;
    width: 150px;
 }

 .socials i{
    filter: grayscale(100%); 
    color:#FF00FF;
    font-size: 50px;
    transition: .5s; 
 }


 .socials i:hover{
    filter:grayscale(0%);
    transform: scale(1.2) rotate(30deg);

 }

 .infoContainer h2{
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    color: #BEE674;
    margin-bottom: 10px;
 }

 .info a{
    text-decoration: none;
    font-size: 18px;
    display: block;
    filter: grayscale(100%); 
    color:#FF00FF;
    transition: .5s; 
 }

 .info a:hover{
    filter: grayscale(0%);
 }

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

/* ARTIST PAGE */

/*----------------------------------------------*/
.artistContent{
   /* background-color: #BEE674; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 8vh;
}

.artistinfo {
    background-image: linear-gradient(0deg, #FF00FF 65%, #D2D7D3 45%);
    border-radius: 20px;
    padding: 30px;
    width: 28%;/* when I make my width 30%, the area will not fit the boxes. I think it's because of the 30px padding which is not coming off of inside the boxes */
    display: flex;
    flex-flow: row wrap;
    justify-content: center;

    
    
 }

 .artistinfo img{
    width:100%;
    border: 10px solid #BEE674;
    border-radius: 1000px;
  
 }

 .artistinfo img:hover {
    filter: none;
    transform: scale(1.05) perspective(1000px)  rotateX(10deg) rotateY(10deg) rotate(10deg) ;
   
    outline: 5px solid #D2D7D3;
    transition: .5s;
 
 }

 .artistinfo h2 {
    text-align:center;
    font-family: 'Orbitron', sans-serif;
    font-size: 35px;
    color:#1A1B29;
    padding-top: 2vh;
    padding-bottom: 1vh;
 }
 
 
 .artistinfo p {
    text-align:center;
    font-family: 'Open Sans', sans-serif;
    padding-top: 0px;
    color:white;
    border-bottom: 1px dashed #BEE674;
    padding-bottom: 10px;
 }

 .artistsIcons{
    color:white !important;
    flex-flow: row wrap;
    align-items: center !important;
    padding: 0;
    margin: 0;
    margin-top: 10px;
    gap:1vw;

 }

 .artistsIcons i{
    color:white;
    font-size: 40px;
    transition: .5s;
 }

 .artistsIcons i:hover{
    scale: 1.2;
    rotate: 20deg;
    color: #BEE674;

 }



 .bluebg {
    background-image: linear-gradient(0deg, #1A1B29 65%, #D2D7D3 45%);
 }

 .bluebg h2{
    color:#FF00FF;
 }


    /*----------------------------------------------*/
    /*----------------------------------------------*/
                /* mobile section */
   /*----------------------------------------------*/
   /*----------------------------------------------*/
 
@media screen and (max-width:1280px){  

    /*body{
       border:10px solid yellow;
    }*/

    /*----------------------------------------------*/
   /* Mobile-Navigation */

    .hamburger {
        display: block !important;
        font-size: 40px !important;
    }

    .navigation{
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        text-align: center;
        height: 90px;  
        transition: .5s; 
    }

    .active{
        height: 350px;
    }


    /*----------------------------------------------*/
   /* Mobile-Hero */

    .hero h1{
        font-size: 8vw;
        
    }
    .hero a{
        font-size: 4vw;
        padding: 20px;
    }

    .artistHero h2{
        font-size: 4vw;
    }

    /*----------------------------------------------*/
   /* Mobile-Hero */

   .textContainer{
    height: 100%;
    width: 25vw;
    border-radius: 100%;
   

    scale:2;
    border: .3vw solid #BEE674;
   }

   .textContainer h2{
    font-size: 2vw;
    padding: 1.5vw 6.3vw 1.5vw 1.5vw;
   }

       /*----------------------------------------------*/
   /* mobile-Events */

   .events h7{
    font-size: 6vw;
   }

   .eventsContainer{
    height: 100vh;
    width: 100%;
    align-self: center;
   }

   .event1{
    height:35%;
    width: 100% !important;
    max-width:100% !important;
    gap:1vw;
    align-items:flex-start;
   }

   .imageBox {
    height: 100%;
    width: 35%;
    max-width: 35%;
    border-radius: 0;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

   .eventInfo1 h2 {
    font-size: 4.5vw;
    line-height: 4vw;
   }

   .event1 h3 {
    font-size: 2.5vw;
    padding-bottom: .1vh;
    
}

    .eventInfo1 h4 {
     font-size: 3vw;
     align-self: flex-start;
     padding-top: .5vh;
    }

    .eventInfo1 p {
        font-size: 2vw;
    }

    .eventInfo1 h5{
        /*display: none;*/
        font-size: 1vw;
        margin: .2vw;
        margin-bottom: .5vw;
    }

    .eventInfo1 h5{
        content:"*";
        display:hidden;
    }


.otherEvents{
    height: 30%;
    width: 100% !important;
    max-width:100% !important;
}

.otherInfo{
    margin: 1vh 0 0 0;
    align-items: center;
}

    .otherEvents h2{
        font-size: 5vw;
        line-height: 5vw;
        line-height: 4vw;
    }

    .otherEvents h3{
        font-size: 2.5vw;
    }

    .eventInfo1 h6{
        font-size: 2vw;
    }

    /*----------------------------------------------*/
   /* mobile-homeArtists */



   .artists p{
    font-size: 6vw;
    align-self: center;
    padding-left: 0;
   }

   .artistsContainer{
    flex-flow: column wrap;
    align-items: center;
   }

   .artist1{
    width: 80%;
    height: 80vh;
    display:column;
   }

   .artist1info{
    width: 100%;
    height: 40%;
    
    background-color: #FF00FF;
    border-radius: 100% 100% 0 0;
    scale:1.2;
    display:flex;
    flex-flow: column-reverse wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
    padding:10 10 0 0;
    }

    .icons {
        font-size: 5vw;
        flex-flow:row;
        padding:5 60 0 0;
        gap:3vw;
        
    }

    .artistName{
        font-size: 3vw;
        border-bottom: 2px dotted #1A1B29;
        border-left:none;
        padding: 0 0 10 0;
    }

   .artist2{
    width: 80%;
    height: 80vh;;
   }

   .artist3{
    width: 80%;
    height: 80vh;;
   }

   .full{
    align-self: center;
   }

   /*----------------------------------------------*/
/* mobile-Banner 2 section */

.aboutEel{
    height: 30vh !important;
}

.contents{
    width: 100%;
    border-radius: 0;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
}

.contents h2{
    font-size: 3vw;
    padding:5vw 10vw 0 10vw;
}

.contents p{
    font-size: 2vw;
    padding: 10vw;
    padding-top: 0;
}




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

   .footer{
    flex-direction:column;
    align-items:center;
    text-align:center;
    justify-content: space-evenly !important;
    padding: 2vh;
 }

 .footer h2{
    font-size:5vw;
 }

 .newsletter{
    width:100%;
    
 }

 .footer a{
    font-size:4vw;
    gap:2vw;
 }

 .footer h2{
    font-size:5vw;
    
 }

 
 .newsletter p{
    font-size:5vw;
 }


.followContainer{
    display: none;

}

.socialsContainer{
    margin-top: 3vh;
    padding-bottom: 0;
    margin-bottom: 3vw;
   
    height: 30%;
}

 .socials{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row; 
    gap: 3vw;

 }



    /*----------------------------------------------*/
   /* mobile artist page */


   .artistContent{
    flex-direction:column;
    align-items: center;
 }

 .artistinfo{
    flex-direction:column;
    align-items: center;
    width:80%;
    text-align:center;
 }

 .artistinfo img{
    width:60%;
    
 }

 .artistinfo h2 {
    padding-top:30px;
    font-size:6vw;
 }

 .artistinfo p{
    font-size:3vw;
 }
    
  
 }

 /* 
font-family: 'Lato', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Orbitron', sans-serif;
font-family: 'Oswald', sans-serif;
*/