/* The page's stacking order, back to front. The header must not become a stacking context, so
   the fixed fish canvas can slot between its layers. */
:root {
    --z-header-background: 1; /* sky, far sea, far rocks */
    --z-header-logo: 3; /* when the fish canvas isn't drawing it */
    --z-fish-behind-water: 4;
    --z-header-water: 5; /* water and near rocks */
    --z-fish-in-water: 6; /* cut at the surface by fish.js */
    --z-splash: 7;
    --z-header-lure: 8;
    --z-header-near-waves: 9; /* passes in front of the fish and lure */
    --z-header-fade: 10;
    /* Anchor: in front of the header's fade, so its chain isn't cut off. */
    --z-anchor: 10;
    /* Sea life: in the water, behind the anchor. */
    --z-sealife: 10;
    --z-header-link: 11;
    --z-content: 12;
    --z-fish-front: 13; /* casts a shadow */
    --z-fish-label: 13;
    --z-sinker: 14;
    --z-fish-hooked: 15; /* reeled up on the lure */
    --z-tuner: 100;
    --z-loading: 200;
}