/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Alfa+Slab+One&family=Anton&family=Archivo+Black&family=Amatic+SC:wght@700&family=Architects+Daughter&family=Bangers&family=Bebas+Neue&family=Black+Ops+One&family=Creepster&family=Changa+One&family=Fredoka+One&family=Lilita+One&family=Ultra&family=Bolwby+One+SC&family=Gloria+Hallelujah&family=Indie+Flower&family=Kalam:wght@700&family=Luckiest+Guy&family=Passion+One&family=Permanent+Marker&family=Rock+Salt&family=Paytone+One&family=Righteous&family=Special+Elite&family=Staatliches&display=swap');

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
}

#parallax-container {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: grab;
}
#parallax-container.is-dragging {
    cursor: grabbing;
}

.parallax-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}

.scroller {
    display: flex;
    align-items: center;
    width: fit-content;
    height: 100%;
}

#crowd-back-layer {
    z-index: 2;
    opacity: 0.85;
}
#crowd-back-layer .scroller {
    align-items: flex-end;
}

#signs-layer {
    z-index: 1;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}
#signs-layer .scroller {
    align-items: flex-end;
    padding-bottom: 35vh;
}

#crowd-front-layer {
    z-index: 3;
    opacity: 0.95;
}
#crowd-front-layer .scroller {
    align-items: flex-end;
}

.crowd-image {
    flex-shrink: 0;
}
#crowd-back-layer .crowd-image {
    height: 45vh;
}
#crowd-front-layer .crowd-image {
    height: 45vh;
}

.protest-sign {
    border: 0px solid #6B4F2E;
    text-align: center;
    margin: 0 15px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 16px 16px 30px rgba(0, 0, 0, 0.25);
    /* REMOVED: padding is now on the inner span */
}

.protest-sign span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    max-width: 90%; /* Encourages wrapping */

    /* --- THE FIX IS HERE --- */
    /* This padding creates the "safety margin" inside the sign */
    padding: 20px; 
}

.multicolor-text-1 {
    background-image: linear-gradient(to top, #d00000, #ff8c00, #ffef00, #008026, #004dff, #750787);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.multicolor-text-2 {
    background-image: linear-gradient(45deg, #007bff, #e83e8c, #dc3545);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.protest-sign::after {
    content: '';
    position: absolute;
    left: 50%;
    z-index: -1;
    background-color: #8b5a2b;
    height: 300px;
    width: 15px;
    bottom: -300px;
    transform: translateX(-50%) translateZ(-10px);
}

#logo-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.logo-image {
    position: absolute;
    top: 8vh;
    height: 22vh;
    width: auto;
}

/* --- RESPONSIVE STYLES FOR MOBILE --- */

@media (max-width: 800px) {
    .protest-sign::after {
        width: 8px; /* Thinner stick for mobile */
    }
}