body {
    margin: 0;
    padding: 0;
    font-family: 'Anton', sans-serif;
    background-image: url('background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
    overflow-x: hidden; /* No horizontal scroll */
    color: white;
    text-align: center;
    text-shadow: 4px 4px 0px #000000;
    display: flex;
    flex-direction: column;
}

/* Marquees Fixed to Viewport */
marquee {
    font-size: 1.5rem;
    font-weight: bold;
    color: yellow;
    background: blue;
    border-top: 5px solid red;
    border-bottom: 5px solid red;
    width: 100%;
    position: fixed;
    left: 0;
    z-index: 100;
    box-sizing: border-box;
}

.top-marquee { top: 0; }
.bottom-marquee { bottom: 0; }

.container {
    flex: 1; /* Take up remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    width: 100%;
    padding: 60px 20px; /* Space for marquees */
    box-sizing: border-box;
}

.main-title {
    font-family: 'Black Ops One', cursive;
    font-size: 3vw; /* Responsive font size */
    color: #FFF;
    text-transform: uppercase;
    margin: 0 0 40px 0;
    border: 5px solid #FF0000;
    background-color: #0000FF;
    padding: 10px 40px;
    box-shadow: 10px 10px 0px #FF0000;
    transform: rotate(-1deg);
    animation: shake 2s infinite;
}

/* Horizontal Layout Grid */
.content-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    gap: 40px;
    perspective: 1000px;
}

.side-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.left-panel {
    justify-content: flex-end; /* Push Trump towards center */
}

.right-panel {
    justify-content: flex-start; /* Push Map towards center */
}

.center-item {
    flex: 0 0 auto; /* Don't shrink/grow weirdly */
}

/* The Giant NO */
.giant-no {
    font-size: 15vw; /* Responsive huge size */
    margin: 0;
    line-height: 0.8;
    color: #FF0000;
    text-shadow: 
        5px 5px 0px #FFFFFF, 
        10px 10px 0px #0000FF,
        15px 15px 0px #FFFFFF;
    font-family: 'Rubik Glitch', cursive;
    animation: pulse 0.8s infinite alternate;
}

/* Map Styling */
.greenland-map {
    width: 100%;
    max-width: 400px;
    height: auto;
    border: 8px solid white;
    background-color: #001; /* Deep dark blue bg for contrast */
    box-shadow: 0 0 30px rgba(0, 100, 255, 0.5);
    border-radius: 30px;
    transform: rotate(5deg);
    transition: all 0.3s;
}

.greenland-map:hover {
    transform: scale(1.1) rotate(0deg);
    box-shadow: 0 0 50px rgba(0, 100, 255, 1);
}

/* Trump Styling */
.character-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(-5deg);
    transition: all 0.3s;
}

.character-box img {
    width: 100%;
    max-width: 350px;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 50%;
    border: 10px solid gold;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.6);
}

.character-box p {
    font-size: 2.5rem;
    margin: 15px 0 0 0;
    font-family: 'Black Ops One', cursive;
    color: gold;
    text-shadow: 3px 3px 0 #000;
    background: rgba(0,0,0,0.8);
    padding: 5px 20px;
    border-radius: 10px;
}

.character-box:hover {
    transform: scale(1.1) rotate(0deg);
}

/* Subtext */
.subtext {
    font-size: 2rem;
    background-color: #FF0000;
    color: white;
    padding: 10px 40px;
    border-radius: 50px;
    border: 4px solid white;
    font-weight: bold;
    margin-top: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    animation: blinker 2s linear infinite;
}

/* Animations */
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(-1deg); }
  10% { transform: translate(-1px, -2px) rotate(-2deg); }
  20% { transform: translate(-3px, 0px) rotate(-1deg); }
  30% { transform: translate(3px, 2px) rotate(-1deg); }
  40% { transform: translate(1px, -1px) rotate(-1deg); }
  50% { transform: translate(-1px, 2px) rotate(-2deg); }
  60% { transform: translate(-3px, 1px) rotate(-1deg); }
  70% { transform: translate(3px, 1px) rotate(-2deg); }
  80% { transform: translate(-1px, -1px) rotate(-1deg); }
  90% { transform: translate(1px, 2px) rotate(-1deg); }
  100% { transform: translate(1px, -2px) rotate(-2deg); }
}

@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

@keyframes blinker {
  50% { opacity: 0.8; }
}

/* Responsive for smaller screens */
/* Mobile Specific Layout (Vertical Grid) */
@media (max-width: 900px) {
    .main-title {
        font-size: 1.5rem;
        margin-bottom: 10px;
        padding: 5px 15px;
        border-width: 3px;
        box-shadow: 5px 5px 0 #FF0000;
    }

    .container {
        justify-content: center; /* Center vertically */
        padding: 40px 10px; /* Reduced side padding */
    }

    .content-row {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two columns */
        grid-template-areas: 
            "no no" /* NO takes full width top */
            "left right"; /* Trump and Map side by side */
        gap: 20px;
        width: 100%;
    }

    .center-item {
        grid-area: no;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .left-panel {
        grid-area: left;
        justify-content: center; /* Center in cell */
    }

    .right-panel {
        grid-area: right;
        justify-content: center; /* Center in cell */
    }

    .giant-no {
        font-size: 8rem; /* Fixed intelligible size */
        margin: 10px 0;
    }

    .character-box {
        transform: rotate(-3deg); /* Slight rotation for style */
    }

    .character-box img {
        width: 140px; /* Smaller for mobile */
        height: 140px;
        border-width: 4px;
        box-shadow: 0 0 15px gold;
    }

    .character-box p {
        font-size: 1rem;
        padding: 2px 10px;
        margin-top: 5px;
    }

    .greenland-map {
        width: 140px;
        border-width: 4px;
        box-shadow: 0 0 15px blue;
        margin: 0; /* Remove negative margin */
    }

    .subtext {
        font-size: 1rem;
        margin-top: 20px;
        padding: 5px 15px;
    }

    /* Adjust marquee so it doesn't cover too much */
    marquee {
        font-size: 1rem;
        border-width: 2px; 
    }
}

/* Canvas positioning */
#fireworks-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Above background (0-ish) but below content content */
    pointer-events: none; /* Let clicks pass through */
}

/* Ensure content is above fireworks */
.container {
    z-index: 10; 
}

/* Audio Control Button */
.controls {
    position: fixed;
    bottom: 80px; /* Above marquee */
    right: 20px;
    z-index: 200;
}

.music-btn {
    background: linear-gradient(45deg, #FF0000, #0000FF);
    border: 3px solid white;
    color: white;
    font-family: 'Black Ops One', cursive;
    font-size: 1.2rem;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 0 10px white;
    transition: transform 0.2s;
    text-transform: uppercase;
}

.music-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px gold;
}

.music-btn.playing {
    background: gold;
    color: black;
    border-color: red;
    animation: pulse 1s infinite;
}