*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-image: url(images/A7409511.jpg);

    /* Position the image */
    background-position: center center; 
    
    /* Prevent the image from repeating */
    background-repeat: no-repeat; 
    
    /* This is the crucial line: it fixes the background in place */
    background-attachment: fixed; 
    
    /* Scale the background image to be as large as possible so that the background area is completely covered by the background image (no white space) */
    background-size: cover; 
    
    background-color: rgb(0, 0, 0);
    font-family: Arial, Helvetica, sans-serif, serif; /* A font stack */

    overflow-x: hidden;

    overflow-anchor: none;
}


html {
    scroll-behavior: smooth;
}


header {
  display: block;
  font-style: normal;
  color: aliceblue;
  font-family: "Special Elite", system-ui;
  font-size: xx-large;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  margin-top: 5%;
  
  
  
}

.spotify-link {
    display: none;
}

.name-header {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    
    
     
}


 @keyframes temp-transparent {
    0% {
        opacity: 0; /* Start fully opaque */
    }
    20% {
        opacity: 0; /* Become transparent by 20% of the duration (0.4s into a 2s animation) */
    }
    80% {
        opacity: 0.8; /* Remain transparent until 80% of the duration (1.6s) */
    }
    100% {
        opacity: 1; /* Return to fully opaque by the end of the animation (2s) */
    }
    }

.header-box {
    animation-name: temp-transparent;
    animation-duration: 1s; /* Total time for one animation cycle */
    animation-iteration-count: 1; /* Runs once (or set to 'infinite' to repeat) */
    animation-fill-mode: forwards; /* Ensures the element stays in its final state (opaque in this case) */
}



.loader {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    
}

.loader img {
    width: 200%;
    margin-top: -12%;
    margin-left: 2%;
    
     
}





.portals {
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    align-content: space-between;
    margin-bottom: 10%;
    margin-top: 10%;
   
    
}

.portals div {
    
    width: 46%;
    margin: 2%;

}

.portal-button {
    font-family: "Special Elite", system-ui;
    display: inline-flex; /* Allows icon and text to align nicely */
    align-items: center; /* Vertically centers the items */
    justify-content: center; /* Centers items horizontally */
    background-color: #9e3b99;

    /* background-color: #ce2d6f; /* Button background color */
    background-size: 100%;
    color: white; /* Text and icon color */
    text-decoration: none; /* Removes default underline from links */
    font-weight: bold; /* Makes text bold */
    font-size: 200%;
    transition: background-color 0.3s; /* Smooth hover effect */
    cursor: pointer; /* Ensures it looks clickable */
    border-style: inset;
    width: 100%; 
    padding: 5%;
    box-shadow: 0 0 20px #ae21ff, 0 0 40px #ae21ff, 0 0 60px #ae21ff;
    

    
}

/* Old Pulse Animation - Unused */

@keyframes pulse-glow {
  from {
    box-shadow: 0 0 5px #ae21ff, 0 0 10px #ae21ff;
  }
  to {
    box-shadow: 0 0 20px #ae21ff, 0 0 40px #ae21ff, 0 0 60px #ae21ff;
  }
}





/* LOGO AND GRAPHIC */

.fixed-image {
    position: fixed;
    z-index: 1000; /* High value to stay above all other elements */
    max-width: 100%;
}

#img1 {
    bottom: 2%; /* Distance from bottom of screen */
    right: 2%; /* Distance from right of screen */
    width: auto;
    height: 12%;
}

#img2 {
    top: 0%;
    left: 0%;
    width: auto;
    height: 15%;
   
}

#img3 {
    width: 85%;
    top: 0%;
    margin-left: 8%;   
    position: absolute;
    z-index: 999;
}

#img4 {
    width: 100%;
    top: 2%;
    margin-left: 0%;   
    position: absolute;
    z-index: 99;

}

#img5 {
    width: 65%;
    height: auto;
    top: -80%;
    margin-left: 14%;   
    position: absolute;
    z-index: 99;

}

/* HEADER CONTAINER W/ VIDEO AND ARROW */

.photo-cred {
    position: absolute;
    z-index: 100;
    margin-top: -8.5%;
    margin-left: 53%;
}

.photo-cred header {
    font-size: 0.8rem;
}

.header-box {
    position: relative; /* Container acts as anchor */
    z-index: 100;
    margin: 5%;
}

.header-box2 {
    position: relative; /* Container acts as anchor */
    z-index: 100;
    margin: 5%;
    display:none;
    
}

.header-box3 {
    position: relative; /* Container acts as anchor */
    z-index: 100;
    margin: 5%;
    display: none;
    
}

/* ARROW SAVED IN CASE */

.floating-arrow {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: -50%;
    margin: 0 auto;
    
}

#arrow1 {
    position: relative;
    color: #ffffff;
    opacity: 0.5;
    font-size: 400%;
    z-index: 101;
}

  @keyframes bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-300%); }
}
  
.bounce {
    animation: 1s infinite alternate bounce;
}




/* BAND PHOTO */

.band-photos {
    margin-top: 8%;
    margin-bottom: 20%;
    max-width: 100%;
}

/* YOUTUBE EMBEDS */


.all-videos {
    margin-top: 10%;
}

.music-videos header {
    font-size: 160%;
}

.live-videos header {
    font-size: 160%;
}

.youtube-embeds {
    margin: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.youtube-embeds iframe {
    aspect-ratio: 1 / 0.75;
    margin: 5%;
    margin-bottom: 10%;
    width: 100%;
    height: auto;
    border-color: transparent;
    
}


/* SOCIAL MEDIA LINKS */

.social-links {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin: 0%;
    margin-top: 20%;
    width: 100%;
}

.social-links div {
    display: flex;
    flex-direction: row;
    
   
}

.icon-button2 {
    display: inline-flex; /* Allows icon and text to align nicely */
    align-items: center; /* Vertically centers the items */
    justify-content: center; /* Centers items horizontally */
    /* background-color: #bb2727;  Button background color */
    background-size: 100%;
    color: #9a3fb6; /* Text and icon color */
    text-decoration: none; /* Removes default underline from links */
    /* border-radius: 10rem; /* Adds rounded corners */
    font-weight: bold; /* Makes text bold */
    transition: background-color 0.3s; /* Smooth hover effect */
    background-color: rgba(255, 255, 255, 0) ;
    cursor: pointer; /* Ensures it looks clickable */
    max-width: 100%;
    /* border-style: groove;*/
    font-size: 300%;
    margin-bottom: 50%;
   
}

.icon-button2:hover {
    background-color: #000000; /* Darker background on hover */
}



/* PHOTOS PAGE */

.photos-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    
}

.photo {
    width: 80%;
    margin: 10%; 
}



/* PRESS PAGE */

.press-links {
    margin-top: 11%;
    display: flex;
    flex-direction: column;
    align-items: center;
   
}

.press-button {
    font-size: 200%;
    margin: 13%;
    font-family: "Special Elite", system-ui;
    color: #9e3b99;
  
}

/* CONTACT PAGE */

.contact-info {
    margin-top: 11%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-button {
    font-size: 200%;
    margin: 13%;
    font-family: "Special Elite", system-ui;
    color: #9e3b99;
  
}

/* SHOWS PAGE */

.upcoming-shows {
    margin-top: 10%;
    margin: 5%;
    margin-bottom: 5%;
}


.show-posters {
   margin-top: 5%;
   
}

.poster {
    margin-bottom: 10%;
}

.past-shows {
    display:flex;
    flex-direction: column;
}

.past-shows header hr {
    margin: 5%;
}

   .mainpage-link {
        display: flex;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 15%;
        margin-bottom: 5%;
}

    .mainpage-button {
        font-family: "Special Elite", system-ui;
        display: inline-flex; /* Allows icon and text to align nicely */
        align-items: center; /* Vertically centers the items */
        justify-content: center; /* Centers items horizontally */
        background-color: #000000; /* Button background color */
        background-size: 90%;
        color: white; /* Text and icon color */
        text-decoration: none; /* Removes default underline from links */
        font-weight: bold; /* Makes text bold */
        font-size: 120%;
        transition: background-color 0.3s; /* Smooth hover effect */
        cursor: pointer; /* Ensures it looks clickable */
        border-style: inset;
        width: fit-content; 
        margin-left: auto;
        margin-right: auto;
        padding: 3%;
        border-radius: 25%;
        border-color: #9a3fb6;
}



/* DESKTOP VERSION */


@media screen and (min-width: 1024px) {

 
    .loader {
        display: none;
    }

    .name-header {
        width: 60%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-left: 19.5%;
        margin-top: -1%;
        
    }

    .desktop-header-box {
        display:flex;
        justify-content: center;
        max-width: 100%;
    }

     @keyframes temp-transparent {
    0% {
        opacity: 0; /* Start fully opaque */
    }
    20% {
        opacity: 0; /* Become transparent by 20% of the duration (0.4s into a 2s animation) */
    }
    80% {
        opacity: 0.8; /* Remain transparent until 80% of the duration (1.6s) */
    }
    100% {
        opacity: 1; /* Return to fully opaque by the end of the animation (2s) */
    }

    }

    .header-box {
        flex-direction: row;
        flex-wrap: wrap;
        width: 20%;
        animation-name: temp-transparent;
        animation-duration: 1s; /* Total time for one animation cycle */
        animation-iteration-count: 1; /* Runs once (or set to 'infinite' to repeat) */
        animation-fill-mode: forwards; /* Ensures the element stays in its final state (opaque in this case) */
    }

    .header-box video {
        margin-top: -15%;
        width: 20%;
    }

    .header-box2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 20%;
        animation-name: temp-transparent;
        animation-duration: 3.5s; /* Total time for one animation cycle */
        animation-iteration-count: 1; /* Runs once (or set to 'infinite' to repeat) */
        animation-fill-mode: forwards; /* Ensures the element stays in its final state (opaque in this case) */
    }

    .header-box2 video {
        
        margin-top: -15%;
        width: 20%;
    }

    .header-box3 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 20%;
        animation-name: temp-transparent;
        animation-duration: 8s; /* Total time for one animation cycle */
        animation-iteration-count: 1; /* Runs once (or set to 'infinite' to repeat) */
        animation-fill-mode: forwards; /* Ensures the element stays in its final state (opaque in this case) */
    }

    .header-box3 video {
        margin-top: -15%;
        width: 20%;
    }

    .floating-arrow {
    position: relative;
    display: none;
    justify-content: center;
    margin-top: -50%;
    margin: 0 auto;
    
    }
    
    .portals {
        display: flex;
        position: relative;
        flex-direction: row;
        flex-direction: wrap;
        width: 100%;
        justify-content: center;
        margin-top: 0;
        
        
    }
    
    .portals div {
        width: 15%;
        margin: 0%;
        
        
    }

    .portal-button {
        font-family: "Special Elite", system-ui;
        display: inline-flex; /* Allows icon and text to align nicely */
        align-items: center; /* Vertically centers the items */
        justify-content: center; /* Centers items horizontally */
        background-color: #ae21ff; /* Button background color */
        background-size: 100%;
        color: white; /* Text and icon color */
        text-decoration: none; /* Removes default underline from links */
        font-weight: bold; /* Makes text bold */
        font-size: 240%;
        transition: background-color 0.3s; /* Smooth hover effect */
        cursor: pointer; /* Ensures it looks clickable */
        border-style: inset;
        width: 100%; 
        height: 100%;
        border-radius: 0%;
        
    }


     .band-photos {
        margin: 5%;
        margin-bottom: 8%;
        
    }

    .photo-cred {
        position: absolute;
        z-index: 100;
        margin-top: -8%;
        margin-left: 22%;
        width: 100%;
    }

   
    .photo-cred header {
        font-size: 1.5rem;
    }

    .all-videos {
        width: 100%;
        margin-top: 5%;
    }


    .music-videos header {
        font-size: 350%;
    }

    .live-videos header {
        font-size: 350%;
    }
   
    .youtube-embeds {
        margin: 0%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        position: relative;
        width: 100%;
        margin-top: 5%;
        margin-bottom: 3%;
        
    }

    .youtube-embeds iframe {
        aspect-ratio: 1 / 0.75;
        margin: 0%;
        margin-bottom: 4%;
        width: 30%;
        height: auto;
        border-color: transparent;
    
    }


     .social-links {
        display: flex;
        justify-content: center;
        flex-direction: row;
        margin-top: 10%;
        margin: 0%;
        width: 100%;
    }


   .icon-button2 {
        display: inline-flex; /* Allows icon and text to align nicely */
        align-items: center; /* Vertically centers the items */
        justify-content: center; /* Centers items horizontally */
        /* background-color: #bb2727;  Button background color */
        background-size: 100%;
        color: #ae21ff; /* Text and icon color */
        text-decoration: none; /* Removes default underline from links */
        /* border-radius: 10rem; /* Adds rounded corners */
        font-weight: bold; /* Makes text bold */
        transition: background-color 0.3s; /* Smooth hover effect */
        cursor: pointer; /* Ensures it looks clickable */
        max-width: 100%;
        /* border-style: groove;*/
        font-size: 500%;
        margin-bottom: 50%;
        margin: 5%;
    }

/* PHOTOS PAGE */

    .photos-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap; 
        justify-content: space-around;
        width: 100%;
        margin-top: 5%;
    
    }

    .photo {
        width: 20%;
        margin: 2%;
        
    }

/* SHOWS PAGE */

    .show-posters {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
    }

    .show-posters div {
        width: 40%
    }
    
    /* PRESS PAGE */

    .press-links {
        margin-top: 3%;
        display: flex;
        flex-direction: column;
        align-items: center;
   
    }

    .press-button {
        font-size: 250%;
        margin: 5%;
        font-family: "Special Elite", system-ui;
        color: #9e3b99;
  
    }

    /* CONTACT PAGE */

    .contact-info {
        margin-top: 3%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contact-button {
        font-size: 250%;
        margin: 5%;
        font-family: "Special Elite", system-ui;
        color: #9e3b99;
  
    }

    .mainpage-link {
        display: flex;
        margin-left: 25%;
        margin-right: 25%;
        margin-top: 10%;
        margin-bottom: 5%;
}

    .mainpage-button {
        font-family: "Special Elite", system-ui;
        display: inline-flex; /* Allows icon and text to align nicely */
        align-items: center; /* Vertically centers the items */
        justify-content: center; /* Centers items horizontally */
        background-color: #000000; /* Button background color */
        background-size: 100%;
        color: white; /* Text and icon color */
        text-decoration: none; /* Removes default underline from links */
        font-weight: bold; /* Makes text bold */
        font-size: 150%;
        transition: background-color 0.3s; /* Smooth hover effect */
        cursor: pointer; /* Ensures it looks clickable */
        border-style: inset;
        width: fit-content; 
        margin-left: auto;
        margin-right: auto;
        padding: 3%;
}



}