/* Parallax banner (includes/banner.php). Both themes are in the page; the body class picks one. */
.banner {
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
@media (max-width: 768px) {
    .banner {
        background-size: 100% auto;
        background-position: center top;
    }
}

.banner-dark, .brand img.title-dark { display: none; }
body.dark-mode .banner-light, body.dark-mode .brand img.title-light { display: none; }
body.dark-mode .banner-dark, body.dark-mode .brand img.title-dark { display: block; }

/* Light: sky, clouds, ground, frog, grass */
.banner-light { background-image: url('../images/banner/sky.png'); }
.banner-light .layer-1 { background-image: url('../images/banner/clouds.png'); }
.banner-light .layer-2 { background-image: url('../images/banner/ground.png'); }
.banner-light .layer-3 { background-image: url('../images/banner/frog.png'); }
.banner-light .layer-4 { background-image: url('../images/banner/grass.png'); }
.banner-light .layer-5 { background-image: url('../images/banner/grass2.png'); }
.banner-light .layer-6 { background-image: url('../images/banner/grass3.png'); }
.banner-light .layer-7 { background-image: url('../images/banner/grass4.png'); }

/* Dark: night sky, clouds, moon, water, frog, floaties */
.banner-dark { background-image: url('../images/dark/banner/sky.png'); }
.banner-dark .layer-1 { background-image: url('../images/dark/banner/clouds.png'); }
.banner-dark .layer-2 { background-image: url('../images/dark/banner/moon.png'); }
.banner-dark .layer-3 { background-image: url('../images/dark/banner/clouds2.png'); }
.banner-dark .layer-4 { background-image: url('../images/dark/banner/water.png'); }
.banner-dark .layer-5 { background-image: url('../images/dark/banner/frog.png'); z-index: 1; }
.banner-dark .layer-6 { background-image: url('../images/dark/banner/floaties1.png'); z-index: 1; }
.banner-dark .layer-7 { background-image: url('../images/dark/banner/floaties2.png'); z-index: 1; }
.banner-dark .layer-8 { background-image: url('../images/dark/banner/floaties3.png'); z-index: 1; }
.banner-dark .layer-9 { background-image: url('../images/dark/banner/floaties4.png'); z-index: 1; }