.background
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    --pos: 0;
    transform: translateY(calc(var(--unit) * var(--pos)));
    background: #74daff;
    overflow: hidden;
}
body:has(.intro)
{
    .background
    {
        --pos: -7.5
    }
}
.background img
{
    position: absolute;
    top: 0;
}

.background .sun
{
    width: 10vmin;
    height: 10vmin;
    left: 25vw;
    top: 5vh;
    filter: drop-shadow(0 0 28px yellow) drop-shadow(0 0 120px yellow) drop-shadow(0 0 60px yellow) drop-shadow(0 0 240px yellow);
    image-rendering: pixelated;
}
.background .cloud
{
    top: 10vh;
    animation: move-cloud 60s linear infinite;
    width: 30vmin;
    aspect-ratio: 3 / 1;
    image-rendering: pixelated;
}
.background .cloud2
{
    top: 15vh;
    width: 29vmin;
    animation: move-cloud 56s linear infinite;
    animation-delay: -20s;
}
.background .cloud3
{
    top: 12vh;
    width: 26.5vmin;
    animation: move-cloud 63s linear infinite;
    animation-delay: -40s;
}
@keyframes move-cloud {
    from
    {
        right: 100%;
        transform: translateX(0);
    }
    to
    {
        right: 0;
        transform: translateX(100%);
    }

}
.background .mountains
{
    position: absolute;
    width: 100%;
    height: 30vh;
    top: calc(var(--position) - 30vh - (var(--unit) * .3));
    background-image: url(./../assets/background/mountains.png);
    background-size: contain;
    image-rendering: pixelated;
    background-repeat: repeat-x;
    filter: brightness(.9);
    background-position: center bottom;
}
.scene .grass
{
    position: absolute;
    width: var(--unit);
    height: var(--unit);
    z-index: 99;
    top: calc(-1 * var(--unit));
    left: calc(50% + 3 * var(--unit));
    /* bottom: var(--unit); */
    transform: skewX(351deg);
    transform-origin: 50% 100%;
    animation: grass-wind 4s alternate infinite;
    background-image: url(./../assets/background/grass.png);
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
}

@keyframes grass-wind
{
    from
    {
        transform: skewX(351deg)
    }
    to
    {
        transform: skewX(341deg)
    }
}

@media screen and (max-width: 700px) and (orientation: portrait) {

}