html, body {
    margin: 0;
    padding: 0;
    min-height: 100%; /* Ensure full height of page */
    
}

body {
    background-color: #000000 !important; /* Or replace with a background image */
    background-attachment: fixed; /* Always keep the background fixed */
}

footer {
    height: 160px;
}
/* Footer styling */

/* Example of a less perfect gradient for the footer */
footer {
    background: linear-gradient(135deg, rgba(255, 0, 150, 0.8), rgba(0, 204, 255, 0.8) 50%, rgba(255, 204, 0, 0.8) 100%);
    background-size: 300% 300%; /* This creates a larger gradient area for movement */
    animation: gradient-animation 15s ease infinite; /* Adds a subtle animation for a more dynamic effect */
}

/* Gradient animation to give a less perfect look */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.pixel-footer {
    height: 30px;
    width: 100%;
    background: linear-gradient(135deg, rgba(255, 0, 150, 1), rgba(0, 204, 255, 1) 50%, rgba(255, 204, 0, 1) 100%);
    background-size: 300% 300%; /* This creates a larger gradient area for movement */
    animation: gradient-animation 15s ease infinite; /* Adds a subtle animation for a more dynamic effect */
    
    margin-top: 60px; /* Space above footer */
    padding: 0; /* No padding inside footer */

    /* Pixelation effect */
    image-rendering: pixelated;
    background-size: 100% 100%; /* No stretch, to keep pixelation effect */
}

html, body {
    min-height: 100%; /* Ensure the body covers the full height */
}




/* a.logo svg {
    display: none !important; 
    visibility: hidden !important;
  }

.logo__path,
.soundHeader,
.sc-button,
.sc-ministats.sc-font-tabular.sc-ministats-small.sc-ministats-plays {
    display: none !important; 
    visibility: hidden !important;
} 
*/

.pixelify-sans {
    font-family: "Pixelify Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight:600;
    font-style: normal;
  }

  .ctrlroomLink {
    font-family: "Pixelify Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight:600;
    font-style: normal;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align iframes */
    justify-content: center; /* Center vertically within the flex container */
    margin: 0 auto; /* Center horizontally */
  }

.logo-bkt {
    max-width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align iframes */
    justify-content: center; /* Center vertically within the flex container */
    margin: 0 auto; /* Center horizontally */
    padding: 20px; /* Optional: Add padding for better spacing */
    box-sizing: border-box; /* Include padding in the total width */
}


.socials-wrapper {
    margin-top: 40px;
    max-width: 20%;
    min-width: 440px;
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    justify-content: center; /* Center the items */
    align-items: center; /* Center vertically */
    margin: 0 auto; /* Center the whole wrapper horizontally */
    box-sizing: border-box; /* Ensure padding is included in width */
    gap: 22px; /* Optional: Adds spacing between items */
}

.socials-wrapper a {
    text-decoration: none;
}

.fa-brands {
    font-size: 4em;
}

.videos {
    max-width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align iframes */
    justify-content: center; /* Center vertically within the flex container */
    margin: 0 auto; /* Center horizontally */
    padding: 20px; /* Optional: Add padding for better spacing */
    box-sizing: border-box; /* Include padding in the total width */
}




/* START OF SOUNDCLOUD CSS ***********************************/

.soundcloud {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align iframes */
    justify-content: center; /* Center vertically within the flex container */
    margin: 0 auto; /* Center horizontally */
    max-width: 80%; /* Maximum width of the container */
    padding: 20px; /* Optional: Add padding for better spacing */
    box-sizing: border-box; /* Include padding in the total width */
}

.trackLink {
    min-width: 500px;
}

.soundcloud .trackLink {
    margin: 10px 0; /* Spacing between iframes */
}

/* Different rotation animations for each iframe */
.soundcloud .trackLink:nth-of-type(1) {
    animation: rotate1 4s infinite alternate;
}

.soundcloud .trackLink:nth-of-type(2) {
    animation: rotate2 5s infinite alternate;
}

.soundcloud .trackLink:nth-of-type(3) {
    animation: rotate3 3s infinite alternate;
}

.soundcloud .trackLink:nth-of-type(4) {
    animation: rotate4 3s infinite alternate;
}

.soundcloud .trackLink:nth-of-type(5) {
    animation: rotate5 5s infinite alternate;
}

@keyframes rotate1 {
    0% { transform: rotate(-2deg); }
    100% { transform: rotate(2deg); }
}

@keyframes rotate2 {
    0% { transform: rotate(-3deg); }
    100% { transform: rotate(3deg); }
}

@keyframes rotate3 {
    0% { transform: rotate(-1deg); }
    100% { transform: rotate(1deg); }
}

@keyframes rotate4 {
    0% { transform: rotate(-4deg); }
    100% { transform: rotate(4deg); }
}

@keyframes rotate5 {
    0% { transform: rotate(-2deg); }
    100% { transform: rotate(2deg); }
}
/* END OF SOUNDCLOUD CSS ***********************************/


/* START OF NEXT SHOWS FONTS CSS ***********************************/
.sofadi-one-regular {
    font-family: "Sofadi One", system-ui;
    font-weight: 400;
    font-style: normal;
  }

  .lexend {
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
  }

  .showTitle {
    font-family: "Sofadi One", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 3em;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align iframes */
    justify-content: center; /* Center vertically within the flex container */
    margin: 0 auto; /* Center horizontally */
    box-sizing: border-box; /* Include padding in the total width */
  }

  .nextShowName {
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 3em;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align iframes */
    justify-content: center; /* Center vertically within the flex container */
    margin: 0 auto; /* Center horizontally */
    box-sizing: border-box; /* Include padding in the total width */
  }

  .nextShowDate {
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 3em;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align iframes */
    justify-content: center; /* Center vertically within the flex container */
    margin: 0 auto; /* Center horizontally */
    box-sizing: border-box; /* Include padding in the total width */
  }

  .post-tags {
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1em;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align iframes */
    justify-content: center; /* Center vertically within the flex container */
    margin: 0 auto; /* Center horizontally */
    box-sizing: border-box; /* Include padding in the total width */
  }

  .ticket-button {
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1em;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align iframes */
    justify-content: center; /* Center vertically within the flex container */
    margin: 0 auto; /* Center horizontally */
    box-sizing: border-box; /* Include padding in the total width */
  }

  .newShow {
    position: relative; /* To ensure proper positioning of the pseudo-element */
    padding-bottom: 20px; /* Adds space below the content */
    margin-bottom: 20px; /* Adds space between each 'newShow' */
}

.newShow:after {
    content: '';
    display: block;
    width: 30%; /* The line takes up 30% of the div's width */
    margin: 20px auto 0 auto; /* Center the line horizontally */
    border-bottom: 1px solid #111111; /* Light grey line */
}
.prevShowName {
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 2em;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align iframes */
    justify-content: center; /* Center vertically within the flex container */
    margin: 0 auto; /* Center horizontally */
    box-sizing: border-box; /* Include padding in the total width */
}
.prevShowDate {
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1em;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align iframes */
    justify-content: center; /* Center vertically within the flex container */
    margin: 0 auto; /* Center horizontally */
    box-sizing: border-box; /* Include padding in the total width */
}

.pastShow {
    display: flex; /* Enables flexbox layout */
    flex-direction: row; /* Arranges children in a row */
    align-items: flex-end; /* Aligns children to the bottom */
    justify-content: center; /* Center horizontally within the flex container */
    margin: 0 auto; /* Center horizontally */
    padding: 0; /* Removes padding around the pastShow div */
    box-sizing: border-box; /* Include padding in the total width */
}

.prevShowName, .prevShowDate {
    margin: 0; /* Removes margin from both header elements */
    padding: 0; /* Removes padding from both header elements */
    text-align: center; /* Centers the text within the headers */
}

.post-tags a {
    pointer-events: none;
    color: inherit; /* Ensures link color matches text color */
    text-decoration: none; /* Removes underline if any */
}

/* END OF NEXT SHOWS CSS ***********************************/

.contact:before {
    content: ""; /* Ensures the ::before element is rendered */
    display: block; /* Makes the ::before element visible as a block */
    border-top: 1px solid #111111; /* Line at the top */
    max-width: 300px; /* Limit the width of the line */
    margin: 0 auto; /* Center the line */
    padding-top: 10px; /* Optional: Adds spacing above the line */
    margin-top: 40px;
}


/* Mobile responsive MEDIA SCREEN ***********************************************************************/
/*  ************************************************************************************************************/
/*  ************************************************************************************************************/
/*  ************************************************************************************************************/
/*  ************************************************************************************************************/
/*  ************************************************************************************************************/
/*  ************************************************************************************************************/



@media (max-width: 430px) {
    .nextShowName {
        font-size: 1.6em; /* Smaller size for mobile phones */
    }
}



@media (max-width: 480px) {
    .pastShow {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        padding: 0;
        padding-bottom: 10px;
        box-sizing: border-box;
    }
    .nextShowName {
        font-size: 2em !important; /* Smaller size for mobile phones */
    }
    .showTitle {
        font-size: 2em; /* Smaller size for mobile phones */
    }
    .videos {
        max-width: 400px; /* Use more of the screen width for very small devices */
        padding: 10px; /* Reduce padding for small screens */
    }

    .videoLink {
        max-width: 400px; /* Use more of the screen width for very small devices */
        margin: 5px 0; /* Reduce margin for small screens */
    }
    .videoLink iframe {
        width: 100%; /* Full width of the videoLink */
        height: 100%; /* Full height of the videoLink */
        border: none; /* Remove border */
    }
    .fa-brands {
        font-size: 3em;
    }
    .socials-wrapper {
        min-width: 330px;
      
    }
}

@media (max-width: 768px) {
    .pastShow {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        padding: 0;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .nextShowName {
        font-size: 2.3em; /* Slightly smaller for tablets */
    }
    .soundcloud .trackLink {
        margin: 4px 0; /* Maintain margin for larger screens */
        width: 100%; /* Full width for iframes */
        min-width: 350px;
        font-size: 16px; /* Adjust font size */
    }

    /* Optional: You can reduce the animation duration for mobile */
    .soundcloud .trackLink:nth-of-type(1) {
        animation: rotate1 3s infinite alternate; /* Reduced duration */
    }

    .soundcloud .trackLink:nth-of-type(2) {
        animation: rotate2 4s infinite alternate; /* Reduced duration */
    }

    .soundcloud .trackLink:nth-of-type(3) {
        animation: rotate3 2.5s infinite alternate; /* Reduced duration */
    }

    .soundcloud .trackLink:nth-of-type(4) {
        animation: rotate4 2.5s infinite alternate; /* Reduced duration */
    }

    .soundcloud .trackLink:nth-of-type(5) {
        animation: rotate5 4s infinite alternate; /* Reduced duration */
    }
}

/* For devices with a max-width of 1024px (large tablets and small laptops) */
@media (max-width: 1024px) {
    .soundcloud .trackLink {
        margin: 2px 0; /* Keep some spacing */
        width: 100%; /* Full width for iframes */
        font-size: 18px; /* Slightly larger font size for readability */
        min-width: 100%; /* Remove minimum width for mobile */
        padding: 0;
    }

    .soundcloud {
        padding: 4px;
    }
}