/* Base styling for the page */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    background: transparent; /* OBS will still see fully transparent */
}

/* Background fallback for browsers */
#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 0; /* Behind everything */
}

/* Text container — block-level, full width, centers its text content */
#text-container {
    text-align: center;
    margin-top: 20px;
    z-index: 20;
    position: relative;
}

/* Real-neon model: tube core is white-hot (the gas glowing too bright
   to read as colored), brand color comes from the bloom around it.
   Stack: white-tinted fill → tight colored shadow hugging the letter →
   wider colored bloom outward. */
#stream-counter, #lifetime-counter {
    display: block;
    width: 100%;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Stream Counter (Today's Gherkin Tax) — purple neon */
#stream-counter {
    color: #fce4ff;
    text-shadow:
        0 0 3px #B026FF,
        0 0 6px #B026FF,
        0 0 12px #B026FF,
        0 0 22px #B026FF;
}

/* Lifetime Counter (Forever Gherk'd Fund) — magenta neon */
#lifetime-counter {
    color: #ffe4ff;
    text-shadow:
        0 0 3px #FF00FF,
        0 0 6px #FF00FF,
        0 0 12px #FF00FF,
        0 0 22px #FF00FF;
}

/* Jar container */
#jar-container {
    margin: 50px auto 0 auto; /* Push it down below text */
    width: 400px;
    height: 600px;
    position: relative;
    z-index: 10;
}

/* Jar image */
#jar {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Bills container */
#bills-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5; /* Bills should appear on top of the jar but behind text */
}

/* Each dollar bill — animation driven by Web Animations API in JS */
.bill {
    position: absolute;
    width: 70px;
    top: -100px;
    will-change: top, transform;
}