:root {
    --bg: #FF00FF;
    --fg: #000;
    --accent: #00FF00;
    --text-color: #000;
    --grid-color: rgba(0, 0, 0, 0.15);
}
.dark-mode {
    --bg: #000;
    --fg: #FFF;
    --accent: #FF00FF;
    --text-color: #FFF;
    --grid-color: rgba(255, 255, 255, 0.15);
}
body {
    background-color: var(--bg);
    color: var(--text-color);
    font-family: 'Arial Black', Gadget, sans-serif;
    padding: 20px;
    transition: background 0.3s, color 0.3s;
    overflow-x: hidden;
    /* Frank Lloyd Wright geometric backdrop pattern */
    background-image: 
        linear-gradient(90deg, var(--grid-color) 2px, transparent 2px),
        linear-gradient(var(--grid-color) 2px, transparent 2px),
        linear-gradient(45deg, transparent 48%, var(--grid-color) 49%, var(--grid-color) 51%, transparent 52%);
    background-size: 80px 80px, 80px 80px, 160px 160px;
}
.container {
    max-width: 800px;
    margin: auto;
    position: relative;
    z-index: 2; /* Sits above the background art */
}
.menu-box {
    background: var(--accent);
    color: var(--fg);
    clip-path: polygon(0% 0%, 5% 2%, 10% 0%, 15% 2%, 20% 0%, 25% 2%, 30% 0%, 35% 2%, 40% 0%, 45% 2%, 50% 0%, 55% 2%, 60% 0%, 65% 2%, 70% 0%, 75% 2%, 80% 0%, 85% 2%, 90% 0%, 95% 2%, 100% 0%, 100% 100%, 95% 98%, 90% 100%, 85% 98%, 80% 100%, 75% 98%, 70% 100%, 65% 98%, 60% 100%, 55% 98%, 50% 100%, 45% 98%, 40% 100%, 35% 98%, 30% 100%, 25% 98%, 20% 100%, 15% 98%, 10% 100%, 5% 98%, 0% 100%);
    padding: 50px;
    margin-bottom: 20px;
    border: 5px solid var(--fg);
}
nav { 
    margin-bottom: 30px; 
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
nav a {
    background: var(--fg);
    color: var(--bg);
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border: 3px solid var(--accent);
}
/* Side-aligned Vertical Toggle Button */
.toggle-btn {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: right center;
    background: var(--fg);
    color: var(--bg);
    padding: 10px 20px;
    font-size: 1rem;
    border: 3px solid var(--accent);
    cursor: pointer;
    font-family: 'Arial Black', Gadget, sans-serif;
    z-index: 1000;
}

/* Photo Gallery Layout */
.gallery-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 400px;
    margin-bottom: 30px;
    overflow: hidden;
    background: #000;
    border: 5px solid var(--fg);
    clip-path: polygon(0% 0%, 5% 2%, 10% 0%, 15% 2%, 20% 0%, 25% 2%, 30% 0%, 35% 2%, 40% 0%, 45% 2%, 50% 0%, 55% 2%, 60% 0%, 65% 2%, 70% 0%, 75% 2%, 80% 0%, 85% 2%, 90% 0%, 95% 2%, 100% 0%, 100% 100%, 95% 98%, 90% 100%, 85% 98%, 80% 100%, 75% 98%, 70% 100%, 65% 98%, 60% 100%, 55% 98%, 50% 100%, 45% 98%, 40% 100%, 35% 98%, 30% 100%, 25% 98%, 20% 100%, 15% 98%, 10% 100%, 5% 98%, 0% 100%);
}
.gallery-container {
    width: 100%;
    height: 100%;
    position: relative;
}
.gallery-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.gallery-slide.active { opacity: 1; }

/* Dynamic Floating Banner Objects */
.floating-circle {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: difference; /* Insane color interactions as they float over photos */
    pointer-events: none;
}
.circle-pink {
    width: 100px;
    height: 100px;
    background: rgba(255, 0, 255, 0.7);
    top: 10%;
    left: 15%;
    animation: floatBounce1 8s infinite alternate ease-in-out;
}
.circle-blue {
    width: 140px;
    height: 140px;
    background: rgba(0, 255, 255, 0.6);
    bottom: 15%;
    right: 10%;
    animation: floatBounce2 12s infinite alternate ease-in-out;
}
.circle-yellow {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 0, 0.8);
    top: 45%;
    left: 45%;
    animation: floatBounce3 6s infinite alternate ease-in-out;
}

@keyframes floatBounce1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, 40px) scale(1.15); }
}
@keyframes floatBounce2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-70px, -50px) scale(0.85); }
}
@keyframes floatBounce3 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-40px, 30px); }
}

table { width: 100%; border-collapse: collapse; margin-top: 20px; }
td { padding: 15px; border-bottom: 2px solid var(--fg); font-size: 1.2rem; }
input, textarea { width: 100%; padding: 15px; font-size: 1.2rem; margin-bottom: 10px; background: #fff; border: 3px solid var(--fg); box-sizing: border-box; }
button[type="submit"] { background: var(--fg); color: var(--bg); padding: 15px 30px; font-size: 1.5rem; border: none; cursor: pointer; font-family: 'Arial Black', Gadget, sans-serif; }

footer {
    max-width: 800px;
    margin: 40px auto 0 auto; /* Coerces centering even if it escapes the wrapper */
    box-sizing: border-box;
}