.stars-wrapper {
	position: relative;
}

.stars {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	transform: rotate(-45deg);
}

@media screen and (min-width: 750px) {
	.stars {
		top: 0;
		left: 50%;
		max-width: 50rem;
		max-height: 50rem;
		transform: translateX(-50%) rotate(-45deg);
	}
}

.star {
	--star-color: rgb(19, 115, 115);
	--star-tail-length: 6em;
	--star-tail-height: 2px;
	--star-width: calc(var(--star-tail-length) / 6);
	--fall-duration: 9s;
	--tail-fade-duration: var(--fall-duration);

	position: absolute;
	top: var(--top-offset);
	left: 0;
	width: var(--star-tail-length);
	height: var(--star-tail-height);
	color: var(--star-color);
	background: linear-gradient(45deg, currentColor, transparent);
	border-radius: 50%;
	filter: drop-shadow(0 0 6px currentColor);
	transform: translate3d(104em, 0, 0);
	animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
}

@media screen and (max-width: 750px) {
	.star {
		animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
	}
}

.star:nth-child(1) {
	--star-tail-length: 5em;
	--top-offset: 10vh; /* Spread stars vertically */
	--left-offset: 20vw; /* Spread stars horizontally */
	--fall-duration: 6s;
	--fall-delay: 0s;
}

.star:nth-child(2) {
	--star-tail-length: 6.25em;
	--top-offset: 32vh;
	--left-offset: 75vw;
	--fall-duration: 8s;
	--fall-delay: 1.5s;
}

.star:nth-child(3) {
	--star-tail-length: 7em;
	--top-offset: 50vh;
	--left-offset: 10vw;
	--fall-duration: 10s;
	--fall-delay: 2s;
}


.star:nth-child(4) {
	--star-tail-length: 3em;
	--top-offset: 51vh; /* Spread stars vertically */
	--left-offset: 20vw; /* Spread stars horizontally */
	--fall-duration: 7s;
	--fall-delay: 0s;
}

.star:nth-child(5) {
	--star-tail-length: 5.25em;
	--top-offset: 41vh;
	--left-offset: 45vw;
	--fall-duration: 4s;
	--fall-delay: 1.5s;
}

.star:nth-child(6) {
	--star-tail-length: 6.1em;
	--top-offset: 70vh;
	--left-offset: 60vw;
	--fall-duration: 3s;
	--fall-delay: 2s;
}

.star:nth-child(7) {
	--star-tail-length: 3em;
	--top-offset: 11vh; /* Spread stars vertically */
	--left-offset: 10vw; /* Spread stars horizontally */
	--fall-duration: 7s;
	--fall-delay: 0s;
}

.star:nth-child(8) {
	--star-tail-length: 5.25em;
	--top-offset: 15vh;
	--left-offset: 25vw;
	--fall-duration: 4s;
	--fall-delay: 1.5s;
}

.star:nth-child(9) {
	--star-tail-length: 6.1em;
	--top-offset: 25vh;
	--left-offset: 10vw;
	--fall-duration: 3s;
	--fall-delay: 2s;
}

/* Continue for each star up to nth-child(50) */

.star::before,
.star::after {
	position: absolute;
	content: '';
	top: 0;
	left: calc(var(--star-width) / -2);
	width: var(--star-width);
	height: 100%;
	background: linear-gradient(45deg, transparent, currentColor, transparent);
	border-radius: inherit;
	animation: blink 2s linear infinite;
}

.star::before {
	transform: rotate(45deg);
}

.star::after {
	transform: rotate(-45deg);
}

@keyframes fall {
	to {
		transform: translate3d(-30em, 0, 0);
	}
}

@keyframes tail-fade {
	0%, 50% {
		width: var(--star-tail-length);
		opacity: 1;
	}

	70%, 80% {
		width: 0;
		opacity: 0.4;
	}

	100% {
		width: 0;
		opacity: 0;
	}
}

@keyframes blink {
	50% {
		opacity: 0.6;
	}
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.stars, .star {
		animation: none !important;
	}
}