body {
    margin: 0;
    min-height: 100vh;

    background: black;

    overflow: hidden;
}


/* ====================
   Himmel
==================== */

#skyCanvas {

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 0;
}


/* ====================
   Sonne / Mond
==================== */

#sunMoonCanvas {

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 4;
}


/* ====================
   Wolken
==================== */

#cloudCanvas {

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 5;
}


/* ====================
   Hintergrund
==================== */

#bg1,
#bg2 {

    position: fixed;
    inset: 0;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    pointer-events: none;

    z-index: 10;
}

#bg2 {

    opacity: 0;
}


/* ====================
   Nebel
==================== */

#fogCanvas {

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 15;
}


/* ====================
   Wetter
==================== */

#weatherCanvas {

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 20;
}


/* ====================
   Gewitterblitz
==================== */

#lightning {

    position: fixed;
    inset: 0;

    background: white;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.1s;

    z-index: 21;
}


/* ====================
   Veranda
==================== */

#V1,
#V2 {

    position: fixed;
    inset: 0;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    pointer-events: none;

    transition: opacity 2s ease;

    z-index: 25;
}

#V2 {

    opacity: 0;
}


/* ====================
   Farb-Overlay
==================== */

#overlay {

    position: fixed;
    inset: 0;

    pointer-events: none;

    transition: background-color 3s ease;

    z-index: 30;
}