body {
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    background: linear-gradient(180deg, #22577A 0%, #5584AC 100%);
    color: #222;
    position: relative;
    min-height: 100vh;
}

.google-it-row {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.google-it-btn {
    background: #fbbc05;
    color: #222;
    font-size: 1.1rem;
    padding: 0.6em 2em;
    border: none;
    border-radius: 2em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(34, 87, 122, 0.12);
    margin-bottom: 0.4em;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    outline: none;
}
.google-it-btn:hover, .google-it-btn:focus {
    background: #e2a800;
    color: #fff;
    transform: translateY(-2px) scale(1.05);
}

.quiz-nav {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 18px;
}
.acronym-bold-link {
    font-weight: bold;
    color: #111 !important;
    text-decoration: none;
}

#next-arrow, #back-arrow {
    font-size: 1.15rem;
    padding: 0.5em 1.3em;
    border-radius: 2em;
    border: none;
    background: #388dcc;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(34, 87, 122, 0.12);
    transition: background 0.2s, transform 0.2s;
    outline: none;
}
#next-arrow:disabled, #back-arrow:disabled {
    background: #b2c6d6;
    color: #e7e7e7;
    cursor: not-allowed;
    opacity: 0.7;
}
#next-arrow:hover:not(:disabled), #back-arrow:hover:not(:disabled),
#next-arrow:focus:not(:disabled), #back-arrow:focus:not(:disabled) {
    background: #22577a;
    transform: translateY(-2px) scale(1.05);
}


.rain {
    pointer-events: none;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 11;
}
.raindrop {
    position: absolute;
    width: 2px;
    height: 18px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(180,220,255,0.1));
    border-radius: 1px;
    filter: blur(0.5px);
    opacity: 0.65;
    animation: rain-fall 1.8s linear infinite;
}
@keyframes rain-fall {
    0% { top: -20px; opacity: 0.3; }
    80% { opacity: 0.6; }
    100% { top: 100vh; opacity: 0; }
}


body::after, body::before, body .wave2, body .wave3, body .wave4, body .wave5, body .wave6, body .wave7, body .wave8 {
    content: '';
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
}
body::after {
    height: 100px;
    background: url('data:image/svg+xml;utf8,<svg width="100%25" height="100" viewBox="0 0 1920 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 60 Q 480 120 960 60 T 1920 60 V100 H0Z" fill="%235584AC"/></svg>') center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.8;
    animation: wave-move 8s linear infinite alternate;
}
body::before {
    height: 120px;
    background: url('data:image/svg+xml;utf8,<svg width="100%25" height="120" viewBox="0 0 1920 120" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 80 Q 480 40 960 80 T 1920 80 V120 H0Z" fill="%2322577A"/></svg>') center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.5;
    animation: wave-move2 12s linear infinite alternate;
}
body .wave2 {
    height: 140px;
    background: url('data:image/svg+xml;utf8,<svg width="100%25" height="140" viewBox="0 0 1920 140" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 110 Q 480 180 960 110 T 1920 110 V140 H0Z" fill="%23388DCC"/></svg>') center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.35;
    animation: wave-move3 16s linear infinite alternate;
}
body .wave3 {
    height: 160px;
    background: url('data:image/svg+xml;utf8,<svg width="100%25" height="160" viewBox="0 0 1920 160" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 130 Q 480 80 960 130 T 1920 130 V160 H0Z" fill="%234B6EA9"/></svg>') center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.28;
    animation: wave-move4 20s linear infinite alternate;
}
body .wave4 {
    height: 180px;
    background: url('data:image/svg+xml;utf8,<svg width="100%25" height="180" viewBox="0 0 1920 180" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 150 Q 480 200 960 150 T 1920 150 V180 H0Z" fill="%235584AC"/></svg>') center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.22;
    animation: wave-move5 24s linear infinite alternate;
}
body .wave5 {
    height: 200px;
    background: url('data:image/svg+xml;utf8,<svg width="100%25" height="200" viewBox="0 0 1920 200" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 170 Q 480 100 960 170 T 1920 170 V200 H0Z" fill="%2322577A"/></svg>') center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.18;
    animation: wave-move6 28s linear infinite alternate;
}
body .wave6 {
    height: 220px;
    background: url('data:image/svg+xml;utf8,<svg width="100%25" height="220" viewBox="0 0 1920 220" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 190 Q 480 250 960 190 T 1920 190 V220 H0Z" fill="%234B6EA9"/></svg>') center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.13;
    animation: wave-move7 32s linear infinite alternate;
}
body .wave7 {
    height: 240px;
    background: url('data:image/svg+xml;utf8,<svg width="100%25" height="240" viewBox="0 0 1920 240" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 210 Q 480 140 960 210 T 1920 210 V240 H0Z" fill="%23388DCC"/></svg>') center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.11;
    animation: wave-move8 36s linear infinite alternate;
}
body .wave8 {
    height: 260px;
    background: url('data:image/svg+xml;utf8,<svg width="100%25" height="260" viewBox="0 0 1920 260" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 230 Q 480 300 960 230 T 1920 230 V260 H0Z" fill="%2322577A"/></svg>') center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.09;
    animation: wave-move9 40s linear infinite alternate;
}


@keyframes wave-move {
    0% { background-position-x: 0; }
    100% { background-position-x: 100px; }
}
@keyframes wave-move2 {
    0% { background-position-x: 0; }
    100% { background-position-x: -120px; }
}
@keyframes wave-move3 {
    0% { background-position-x: 0; }
    100% { background-position-x: 80px; }
}
@keyframes wave-move4 {
    0% { background-position-x: 0; }
    100% { background-position-x: -60px; }
}
@keyframes wave-move5 {
    0% { background-position-x: 0; }
    100% { background-position-x: 120px; }
}
@keyframes wave-move6 {
    0% { background-position-x: 0; }
    100% { background-position-x: -140px; }
}
@keyframes wave-move7 {
    0% { background-position-x: 0; }
    100% { background-position-x: 160px; }
}
@keyframes wave-move8 {
    0% { background-position-x: 0; }
    100% { background-position-x: -180px; }
}
@keyframes wave-move9 {
    0% { background-position-x: 0; }
    100% { background-position-x: 200px; }
}


header {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 2rem 1rem 1rem 1rem;
    text-align: center;
    background: linear-gradient(120deg, #56c6f9 0%, #0077a6 60%, #0e6ba8 100%);
}

header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    background: 
      repeating-linear-gradient(135deg, rgba(255,255,255,0.10) 0 10px, transparent 10px 20px),
      radial-gradient(ellipse at 40% 60%, rgba(255,255,255,0.10) 0 30%, transparent 70%),
      radial-gradient(ellipse at 70% 40%, rgba(255,255,255,0.07) 0 20%, transparent 80%);
    opacity: 0.9;
    animation: waterflow 12s linear infinite;
    pointer-events: none;
}

@keyframes waterflow {
  0% {
    background-position: left bottom;
  }
  100% {
    background-position: 120px 60px, 60px 120px, 40px 80px;
  }
}

header > * {
    position: relative;
    z-index: 1;
}
main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    margin: 2rem;
}
#process-diagram {
    position: relative;
    max-width: 700px;
}

#video-container {
    width: 100%;
    max-width: 700px;
    margin: 0 auto 2rem auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    background: #eaf4fa;
}

#video-container iframe {
    display: block;
    width: 100%;
    height: 350px;
    border: none;
    border-radius: 0;
}

#main-nav #quiz-tab {
    font-weight: bold;
    color: #111 !important;
    text-decoration: none;
    font-size: 1.1em;
    margin-left: 0.5em;
    margin-right: 0.5em;
}
#main-nav #quiz-tab:hover, #main-nav #quiz-tab:focus {
    color: #0077a6 !important;
    text-decoration: underline;
}
#wwtp-diagram {
    width: 100%;
    max-width: 700px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
#stage-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.stage-btn {
    flex: 1 1 0;
    padding: 1.2rem 0.5rem;
    font-size: 1.3rem;
    font-weight: bold;
    background: #eaf4fa;
    color: #0077a6;
    border: 2px solid #0077a6;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    outline: none;
}
.stage-btn:hover, .stage-btn:focus {
    background: #0077a6;
    color: #fff;
    border-color: #005f85;
    transform: translateY(-2px) scale(1.04);
}

#info-panel {
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    border-radius: 10px;
    padding: 1.5rem;
    min-width: 320px;
    max-width: 400px;
    position: sticky;
    top: 2rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
}
#info-panel.hidden {
    display: none;
}
#close-panel {
    align-self: flex-end;
    background: none;
    border: none;
    font-size: 1.3rem;
    color: #0077a6;
    cursor: pointer;
}
footer {
    text-align: center;
    padding: 1rem;
    background: #eaf4fa;
    color: #555;
    margin-top: 2rem;
}
a { color: #0077a6; text-decoration: underline; }
a:hover { color: #005f85; }