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

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    display: block;
    font-family: "Roboto Condensed", sans-serif;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    min-height: 100vh;
    pointer-events: none;
    z-index: 2;
}

.scroll-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: auto;
    white-space: nowrap;
}

.background, .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.background {
    width: auto;
}

.wall {
    position: relative;
    height: 100vh;
    width: auto;
    min-width: 2000px;
    position: relative;
    z-index: 1;
}

/*poster effects*/
.poster {
    position: absolute;
    width: auto;
    height: 168px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.poster.landscape {
    height: 124px;
    width: auto;
    max-width: 200px;
}

.poster.beer {
    height: 300px;
    width: auto;
    max-width: 300px;
    cursor: default;
    pointer-events: none;

}

.poster:hover {
    transform: scale(1.1) rotate(var(--rotate));
}

.poster.beer:hover {
    transform: none;
}

.poster.photo:hover {
    transform: scale(1.2);
    opacity: 1;
}

/*big long ass string of absolute values for the poster positioning*/
.poster1 { left: 20px; top: 300px; transform: translateY(-5px) rotate(3deg); } /*hala*/
.poster2 { left: 130px; top: 215px; transform: translateY(-5px) rotate(-5deg); } /*twin peaks*/
.poster3 { left: 140px; top: 390px; transform: translateY(-5px) rotate(9deg); } /*cell phones*/
.poster4 { left: 330px; top: 340px; transform: translateY(-5px) rotate(-7deg); } /*daymaker*/
.poster5 { left: 250px; top: 185px; transform: translateY(-5px) rotate(6deg); } /*flesh panthers*/
.poster6 { left: 375px; top: 200px; transform: translateY(-5px) rotate(-6deg); } /*earplugs*/
.poster7 { left: 460px; top: 320px; transform: translateY(-5px) rotate(8deg); } /*warble daze*/
.poster8 { left: 575px; top: 360px; transform: translateY(-5px) rotate(1deg); } /*snow ellet*/
.poster9 { left: 615px; top: 190px; transform: translateY(-5px) rotate(-5deg); } /*mykele*/
.poster10 { left: 700px; top: 400px; transform: translateY(-5px) rotate(7deg); } /*trans lib*/
.poster11 { left: 805px; top: 380px; transform: translateY(-5px) rotate(-11deg); } /*jet black alley cat*/
.poster12 { left: 735px; top: 250px; transform: translateY(-5px) rotate(6deg); } /*kvrx young girls*/
.poster13 { left: 920px; top: 340px; transform: translateY(-5px) rotate(7deg); } /*peach kelli*/
.poster14 { left: 945px; top: 210px; transform: translateY(-5px) rotate(-10deg); } /*diiv*/
.poster15 { left: 1295px; top: 335px; transform: translateY(-5px) rotate(-4deg); } /*kelshow*/
.poster16 { left: 1050px; top: 215px; transform: translateY(-5px) rotate(0deg); } /*old style*/
.poster17 { left: 1320px; top: 170px; transform: translateY(-5px) rotate(12deg); } /*collcass*/
.poster18 { left: 1415px; top: 275px; transform: translateY(-5px) rotate(-9deg); } /*ooc beach bunny*/
.poster19 { left: 1510px; top: 350px; transform: translateY(-5px) rotate(7deg); } /*blacker face maze*/
.poster20 { left: 2005px; top: 405px; transform: translateY(-5px) rotate(7deg); } /*crown liqs*/
.poster21 { left: 1895px; top: 375px; transform: translateY(-5px) rotate(-10deg); } /*no men charm*/
.poster22 { left: 1965px; top: 220px; transform: translateY(-5px) rotate(2deg); } /*flash flash*/
.poster23 { left: 2080px; top: 250px; transform: translateY(-5px) rotate(-11deg); } /*inter arma*/
.poster24 { left: 2245px; top: 390px; transform: translateY(-5px) rotate(0deg); } /*about the artist*/
.poster25 { left: 2225px; top: 410px; transform: translateY(-5px) rotate(0deg); } /*photos*/
.poster26 { left: 2485px; top: 230px; transform: translateY(-5px) rotate(6deg); } /*atsd*/
.poster27 { left: 2207px; top: 170px; transform: translateY(-5px) rotate(0deg); } /*tecate*/
.poster28 { left: 2460px; top: 395px; transform: translateY(-5px) rotate(-5deg); } /*mother nature*/
.poster29 { left: 2615px; top: 210px; transform: translateY(-5px) rotate(-7deg); } /*kvrx free week*/
.poster30 { left: 2595px; top: 380px; transform: translateY(-5px) rotate(2deg); } /*growingconcerns*/
.poster31 { left: 2735px; top: 230px; transform: translateY(-5px) rotate(6deg); } /*honeydijon*/
.poster32 { left: 2895px; top: 390px; transform: translateY(-5px) rotate(8deg); } /*divino*/
.poster33 { left: 2845px; top: 230px; transform: translateY(-5px) rotate(-3deg); } /*abortion*/
.poster34 { left: 2775px; top: 405px; transform: translateY(-5px) rotate(-8deg); } /*pretty pit*/
.poster35 { left: 3050px; top: 230px; transform: translateY(-5px) rotate(-10deg); } /*lillys*/
.poster36 { left: 2950px; top: 215px; transform: translateY(-5px) rotate(4deg); } /*squadfest*/
.poster37 { left: 3180px; top: 200px; transform: translateY(-5px) rotate(3deg); } /*kalimasi*/
.poster38 { left: 3005px; top: 390px; transform: translateY(-5px) rotate(-3deg); } /*kvrx local live*/
.poster39 { left: 3205px; top: 360px; transform: translateY(-5px) rotate(8deg); } /*evasive*/
.poster40 { left: 3290px; top: 230px; transform: translateY(-5px) rotate(9deg); } /*sickmuse*/
.poster41 { left: 3315px; top: 360px; transform: translateY(-5px) rotate(-6deg); } /*snapdragon*/
.poster42 { left: 3430px; top: 370px; transform: translateY(-5px) rotate(7deg); } /*stefchura*/
.poster43 { left: 3470px; top: 210px; transform: translateY(-5px) rotate(-4deg); } /*kvrxoct*/
.poster44 { left: 3555px; top: 380px; transform: translateY(-5px) rotate(-9deg); } /*cheapgas*/
.poster45 { left: 3700px; top: 180px; transform: translateY(-5px) rotate(-10deg); } /*kvrxaug*/
.poster46 { left: 3665px; top: 345px; transform: translateY(-5px) rotate(2deg); } /*startrops*/
.poster47 { left: 3590px; top: 220px; transform: translateY(-5px) rotate(11deg); } /*wadsticker*/
.poster48 { left: 3805px; top: 200px; transform: translateY(-5px) rotate(-7deg); } /*mtvg*/
.poster49 { left: 3785px; top: 345px; transform: translateY(-5px) rotate(10deg); } /*ooc*/



.lightbox {
    display: none; /* hidden by default */
    position: fixed;
    z-index: 9999; /* above overlay and wall */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    justify-content: center;
    align-items: center;
    flex-direction: row; /* keep image and text side by side */
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;
}

.lightbox img {
    max-width: 50%;
    max-height: 80%;
    object-fit: contain;
    margin-right: 20px;
}

#lightbox-text {
    color: white;
    text-align: left;
    max-width: 45%;
    font-size: 16px;
    line-height: 1.4;
    overflow-y: auto;
}

.lightbox-text a {
    color: red;
    text-decoration: underline;
}

.lightbox .close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
}

.lightbox-btn {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-btn.prev {
    left: 20px;
}

.lightbox-btn.next {
    right: 20px;
}


.close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 2rem;
    color: white;
    cursor: pointer;
}

/*about the artist poster*/
.lightbox-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    max-width: 85%;
    padding: 20px;
    background: #fff; /* white background */
    color: #000; /* black text */
    text-align: center;
    font-size: 16px;
    line-height: 1.5;
    z-index: 10; /* ensure text appears above image */
}
.poster24-text {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95vw;      
    max-width: 1400px;
    aspect-ratio: 17 / 11; 
    background: white;
    margin: auto;
    padding: 0;
    position: relative;
    z-index: 999;
}

/* Inner text inside poster24 box */
.poster24-text-inner {
    color: black;
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
    white-space: normal;
    padding: 20px;
    width: 100%;
    height: 100%;
}

/*MOBILE STUFF*/
@media (max-width: 768px) {
    .modal {
        flex-direction: column;
        align-items: center;
        height: 100vh;
        overflow-y: auto;
        padding: 10px;
        display: flex;
        justify-content: flex-start;
    }

    .modal-content {
        max-width: 95%;
        max-height: 100%;
        margin-right: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* Ensure the modal text is below the image and scrolls */
    .modal-text {
        max-width: 100%;
        font-size: 14px; /* Adjust font size for mobile */
        padding: 15px;
        text-align: center;
        white-space: normal; /* Allow text to wrap */
        overflow-y: auto; /* Allow scrolling if text overflows */
    }


    .modal img {
        width: 100%;
        max-height: 80vh;
        object-fit: contain;
        margin-bottom: 20px;
    }

    /* Expand width of text overlay container */
    .modal-text-overlay {
        max-width: 95%; /* Expand the container width */
        font-size: 10px; /* Adjust font size for mobile */
        padding: 10px;
        text-align: left; /* Align text to the left */
        white-space: normal; /* Allow text to wrap */
        overflow-y: auto; /* Allow scrolling if text overflows */
        
        display: flex; /* Use flexbox for layout */
        flex-direction: column; /* Stack text elements vertically */
        align-items: flex-start; /* Align text to the top */
        padding-top: 0; /* Ensure no extra padding at the top */
    }
}

/*audio*/
audio {
    width: 100%;
    height: 20px;
    position: fixed;
    top: 0;
    z-index: 1000;
    background: #fff;
    border-radius: 0px;
    padding: 0px;
    filter: invert(1) hue-rotate(180deg);
}

/* Progress bar container */
audio::-webkit-media-controls-progress-bar {
    background-color: #444 !important; /* Dark background for unfilled portion */
    height: 5px;
    border-radius: 5px;
}

/* The actual progress (slider) - white */
audio::-webkit-media-controls-progress-bar::-webkit-progress-value {
    background-color: #fff !important; /* White color for the filled portion */
    height: 100%;
}

/* Text color for playtime and volume percentage */
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-timeline {
    color: #fff !important;
}

/* Styling for play button */
audio::-webkit-media-controls-play-button {
    background-color: #fff;
    border-radius: 30% !important;
    width: 20px;
    height: 20px;
}



@media (max-width: 768px) {
/* Ensure the modal is hidden initially */
.modal {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    opacity: 0.5;
}


  .modal-content {
    max-width: 100%;
    margin: 0 auto;
    padding: 10px;
  }

  .modal-text, .modal-text-overlay {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.4;
    padding: 15px;
  }

  .modal-text-overlay {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
  }

  .close {
    top: 5px;
    right: 10px;
    font-size: 18px;
  }
}

/*MOBILE STUFF*/
@media (max-width: 768px) {
    .lightbox {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 10px;
    }

    .lightbox img {
        max-width: 95%;
        max-height: 50vh;
        margin-right: 0;
        margin-bottom: 15px;
    }

    #lightbox-text {
        max-width: 95%;
        font-size: 14px;
        text-align: center;
    }

    .lightbox .close {
        font-size: 2rem;
        top: 10px;
        right: 15px;
    }
}