* {
    --sky-transition-duration: 120s;
}

@keyframes float {
    from { transform: translateX(-100px); }
    to { transform: translateX(calc(100vw + 100px)); }
}

@keyframes float-diagonal {
    from { 
        transform: translate(-100px, 100px) rotate(0deg); 
    }
    to { 
        transform: translate(calc(100vw + 100px), -100px) rotate(360deg);
    }
}

.background-container {
    --background-offset: 0px;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.sky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #bfebff;
    z-index: -2;
}

.grass {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, #006600 0%, #00cc00 100%);

    transform: translateY(calc(var(--background-offset) * 10));
    transition: transform 1s ease-out;
}

.clouds {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;

    transform: translateY(var(--background-offset));
    transition: transform 1s ease-out;
}

.cloud {
    position: absolute;
    height: auto;
    animation: float 20s linear infinite;
}

.stars {
    position: absolute;
    width: 100%;
    height: 2000vh;
    background-image: url('/assets/Stars.png');
    background-size: 500px 500px;

    opacity: 0;
    bottom: 100vh;
    transform: translateY(calc(var(--background-offset) * 0.1));
    transition:
        transform 1s ease-out,
        opacity 1s ease-in-out;
}

.asteroids {
    position: absolute;
    width: 100%;
    height: 100%;

    transform: translateY(var(--background-offset));
    transition: transform 1s ease-out;
}

.asteroid {
    position: absolute;
    height: auto;
    animation: float-diagonal 15s linear infinite;
}

.sun {
    position: absolute;
    width: 100vh;
    height: 100vh;
    right: -200px;
    background: radial-gradient(circle, #fffbd0 20%, rgb(236, 194, 41) 80%, rgb(255, 224, 102) 100%);
    border-radius: 50%;
    box-shadow: 0 0 80px 100px rgb(251, 200, 0);

    top: -370vh;
    transform: translateY(calc(var(--background-offset) * 0.1));
    transition: transform 1s ease-out;
}

.galaxy {
    position: absolute;
    width: auto;
    height: 220vh;
    right: -700px;

    top: -420vh;
    transform: translateY(calc(var(--background-offset) * 0.05));
    transition: transform 1s ease-out;

    z-index: -1;
}