@keyframes animateBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -960px 0;
    }
}
@keyframes animateAsteroids {
    from {
        background-position: 50% center;
    }
    to {
        background-position: -50% center;
    }
}


.space-bg,
.stars-bg,
.clouds-bg,
.specs-bg,
.planet,
.icemoon,
.asteroids {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: repeat;
}
@media only screen and (max-width: 768px) {
	.space-bg,
	.stars-bg,
	.clouds-bg,
	.specs-bg,
	.planet,
	.icemoon,
	.asteroids {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-repeat: repeat;
		background-size: 100%
	}
}


.space-bg {
    background-image: url("/images/parallax/space-bg.webp");
    animation: animateBackground 60s linear infinite;
    z-index: -7;
}
.stars-bg {
    background-image: url("/images/parallax/stars-bg.webp");
    animation: animateBackground 50s linear infinite;
    z-index: -6;
}
.clouds-bg {
    background-image: linear-gradient(to right, rgba(87, 1, 136, 0.37), rgba(87, 1, 136, 0.38)), url("/images/parallax/clouds-bg.webp");
    filter: saturate(50%);
    animation: animateBackground 40s linear infinite;
    z-index: -5;
}
.specs-bg {
    background-image: url("/images/parallax/specs-bg.webp");
    animation: animateBackground 35s linear infinite;
    z-index: -4;
}



.planet {
	background-image: url("/images/parallax/planet.webp");
	background-size: 40%;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: -3;
}
@media only screen and (max-width: 768px) {
	.planet {
		background-size: 100%;
	}
}


.icemoon {
	background-image: url("/images/parallax/icemoon.webp");
	background-size: 33%;
	filter: brightness(85%);
	background-repeat: no-repeat;
	background-position: center center;
	z-index: -2;
}
@media only screen and (max-width: 768px) {
	.icemoon {
		background-size: 100%;
	}
}


.asteroids {
	background-image: url("/images/parallax/asteroids.webp");
	background-size: 50%;
    animation: animateAsteroids 45s linear infinite;
	z-index: -1;
}
@media only screen and (max-width: 768px) {
	.asteroids {
		animation: animateAsteroids 10s linear infinite;
	}
}