#space {
	position: fixed;
	inset: 0;
	z-index: -10;
	isolation: isolate;
	background:
		linear-gradient(
		  to right,
		  rgba(128, 0, 128, 0.1) 0%,
		  rgba(128, 0, 128, 0.15) 50%,
		  rgba(128, 0, 128, 0.1) 100%
		),
    radial-gradient(circle at bottom, #001 0%, #000 100%);
	pointer-events: none;
}

.stars {
	position: absolute;
	inset: 0;
	background-image: url('stars.png');
	background-repeat: repeat;
	background-size: 200px 200px;
	image-rendering: smooth;
	filter: blur(0.4px);
	animation: zoom 20s infinite;
	opacity: 0;
	will-change: transform;
	contain: layout paint;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}

.stars:nth-child(1) {
	background-position: 50% 50%;
	animation-duration: 31s;
	animation-delay: -15s;
}
.stars:nth-child(2) {
	background-position: 20% 65%;
	animation-duration: 29s;
	animation-delay: -14s;
}
.stars:nth-child(3) {
	background-position: 30% 75%;
	animation-duration: 27s;
	animation-delay: -13s;
}
.stars:nth-child(4) {
	background-position: 45% 70%;
	animation-duration: 23s;
	animation-delay: -11s;
}
.stars:nth-child(5) {
	background-position: 65% 40%;
	animation-duration: 19s;
	animation-delay: -10s;
}
.stars:nth-child(6) {
	background-position: 20% 30%;
	animation-duration: 17s;
	animation-delay: -8s;
}
.stars:nth-child(7) {
	background-position: 40% 80%;
	animation-duration: 13s;
	animation-delay: -6s;
}
.stars:nth-child(8) {
	background-position: 35% 60%;
	animation-duration: 11s;
	animation-delay: -5s;
}
.stars:nth-child(9) {
	background-position: 85% 20%;
	animation-duration: 9s;
	animation-delay: -5s;
}

@keyframes zoom {
	0% {
		opacity: 0;
		transform: scale(1.0) translate3d(0, 0, 0);;
		animation-timing-function: linear;
	}
	80% {
		opacity: 1;
		transform: scale(1.8) translate3d(0, 0, 0);;
		animation-timing-function: linear;
	}
	100% {
		opacity: 0;
		transform: scale(2.0) translate3d(0, 0, 0);;
		animation-timing-function: linear;
	}
}


@media (prefers-reduced-motion) {
  .stars {
    animation: none;
  }
}

/* Disable animations on smaller screens */
@media (max-width: 768px) {
  .stars {
    animation-duration: 45s;
  }
}