@import "vars.css";

body {
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	overflow: hidden;
}

#toggle-stars-button {
	font-family: var(--default-font);
	position: fixed;
	top: 16px;
	right: 16px;
	background-color: var(--button-bg);
	color: var(--button-fg);
	padding-block: 8px;
	padding-inline: 12px;
	border-radius: 8px;
	border: var(--border);
	cursor: pointer;
	transition: background-color 300ms linear;
	z-index: 20;
}

#toggle-stars-button:hover {
	background-color: var(--button-bg-hover);
}

.stars {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	transform: rotate(-45deg);
	user-select: none;
	pointer-events: none;
}

.no-stars .stars {
	display: none;
}

.stars--back {
	z-index: 0;
}

.stars--front {
	z-index: 1000;
}

.stars--back .star:nth-child(1) {
	--star-tail-length: 5.17em;
	--top-offset: 33.76vh;
	--fall-duration: 7.012s;
	--fall-delay: 6.397s;
}
.stars--back .star:nth-child(2) {
	--star-tail-length: 5.52em;
	--top-offset: 37.53vh;
	--fall-duration: 9.476s;
	--fall-delay: 1.309s;
}
.stars--back .star:nth-child(3) {
	--star-tail-length: 7.08em;
	--top-offset: 9.33vh;
	--fall-duration: 8.605s;
	--fall-delay: 1.789s;
}
.stars--back .star:nth-child(4) {
	--star-tail-length: 5.52em;
	--top-offset: 34.63vh;
	--fall-duration: 8.454s;
	--fall-delay: 7.5s;
}
.stars--back .star:nth-child(5) {
	--star-tail-length: 6.86em;
	--top-offset: 8.97vh;
	--fall-duration: 6.842s;
	--fall-delay: 6.416s;
}
.stars--back .star:nth-child(6) {
	--star-tail-length: 7.36em;
	--top-offset: 27.03vh;
	--fall-duration: 6.601s;
	--fall-delay: 4.872s;
}
.stars--back .star:nth-child(7) {
	--star-tail-length: 5.36em;
	--top-offset: 54.16vh;
	--fall-duration: 6.333s;
	--fall-delay: 5.968s;
}
.stars--back .star:nth-child(8) {
	--star-tail-length: 7.32em;
	--top-offset: 45.61vh;
	--fall-duration: 9.731s;
	--fall-delay: 7.425s;
}
.stars--back .star:nth-child(9) {
	--star-tail-length: 5.39em;
	--top-offset: 32.25vh;
	--fall-duration: 8.679s;
	--fall-delay: 0.994s;
}
.stars--back .star:nth-child(10) {
	--star-tail-length: 7.47em;
	--top-offset: 63vh;
	--fall-duration: 11.244s;
	--fall-delay: 8.877s;
}
.stars--back .star:nth-child(11) {
	--star-tail-length: 6.99em;
	--top-offset: 58.04vh;
	--fall-duration: 10.253s;
	--fall-delay: 9.74s;
}
.stars--back .star:nth-child(12) {
	--star-tail-length: 5.53em;
	--top-offset: 6.39vh;
	--fall-duration: 7.536s;
	--fall-delay: 2.344s;
}
.stars--back .star:nth-child(13) {
	--star-tail-length: 5.09em;
	--top-offset: 92.17vh;
	--fall-duration: 11.981s;
	--fall-delay: 1.097s;
}
.stars--back .star:nth-child(14) {
	--star-tail-length: 5.79em;
	--top-offset: 29.01vh;
	--fall-duration: 11.197s;
	--fall-delay: 0.937s;
}
.stars--back .star:nth-child(15) {
	--star-tail-length: 5.07em;
	--top-offset: 51.85vh;
	--fall-duration: 10.938s;
	--fall-delay: 1.389s;
}
.stars--back .star:nth-child(16) {
	--star-tail-length: 7.09em;
	--top-offset: 26.19vh;
	--fall-duration: 7.121s;
	--fall-delay: 1.08s;
}
.stars--back .star:nth-child(17) {
	--star-tail-length: 5.04em;
	--top-offset: 45.88vh;
	--fall-duration: 10.032s;
	--fall-delay: 9.05s;
}
.stars--back .star:nth-child(18) {
	--star-tail-length: 7.22em;
	--top-offset: 19.45vh;
	--fall-duration: 10.664s;
	--fall-delay: 5.895s;
}
.stars--back .star:nth-child(19) {
	--star-tail-length: 5.81em;
	--top-offset: 59.41vh;
	--fall-duration: 9.739s;
	--fall-delay: 6.008s;
}
.stars--back .star:nth-child(20) {
	--star-tail-length: 6.01em;
	--top-offset: 49.56vh;
	--fall-duration: 10.931s;
	--fall-delay: 1.225s;
}
.stars--back .star:nth-child(21) {
	--star-tail-length: 7.22em;
	--top-offset: 60.73vh;
	--fall-duration: 6.249s;
	--fall-delay: 8.629s;
}
.stars--back .star:nth-child(22) {
	--star-tail-length: 7.44em;
	--top-offset: 38.88vh;
	--fall-duration: 8.604s;
	--fall-delay: 0.589s;
}
.stars--back .star:nth-child(23) {
	--star-tail-length: 7.44em;
	--top-offset: 8.74vh;
	--fall-duration: 7.142s;
	--fall-delay: 6.706s;
}
.stars--back .star:nth-child(24) {
	--star-tail-length: 6.59em;
	--top-offset: 16.64vh;
	--fall-duration: 6.483s;
	--fall-delay: 2.159s;
}
.stars--back .star:nth-child(25) {
	--star-tail-length: 5.36em;
	--top-offset: 58.71vh;
	--fall-duration: 6.814s;
	--fall-delay: 0.936s;
}
.stars--back .star:nth-child(26) {
	--star-tail-length: 6.84em;
	--top-offset: 33.96vh;
	--fall-duration: 11.38s;
	--fall-delay: 4.005s;
}
.stars--back .star:nth-child(27) {
	--star-tail-length: 5.36em;
	--top-offset: 36.54vh;
	--fall-duration: 8.795s;
	--fall-delay: 3.808s;
}
.stars--back .star:nth-child(28) {
	--star-tail-length: 7.22em;
	--top-offset: 97.04vh;
	--fall-duration: 10.818s;
	--fall-delay: 2.574s;
}
.stars--back .star:nth-child(29) {
	--star-tail-length: 5.19em;
	--top-offset: 23.2vh;
	--fall-duration: 9.216s;
	--fall-delay: 2.523s;
}
.stars--back .star:nth-child(30) {
	--star-tail-length: 7.06em;
	--top-offset: 95.29vh;
	--fall-duration: 10.887s;
	--fall-delay: 8.958s;
}
.stars--back .star:nth-child(31) {
	--star-tail-length: 6.8em;
	--top-offset: 71.15vh;
	--fall-duration: 8.562s;
	--fall-delay: 8.669s;
}
.stars--back .star:nth-child(32) {
	--star-tail-length: 7.42em;
	--top-offset: 60.08vh;
	--fall-duration: 7.052s;
	--fall-delay: 2.436s;
}
.stars--back .star:nth-child(33) {
	--star-tail-length: 7.36em;
	--top-offset: 81.59vh;
	--fall-duration: 8.626s;
	--fall-delay: 0.499s;
}
.stars--back .star:nth-child(34) {
	--star-tail-length: 6.67em;
	--top-offset: 52.49vh;
	--fall-duration: 11.39s;
	--fall-delay: 1.845s;
}
.stars--back .star:nth-child(35) {
	--star-tail-length: 6.52em;
	--top-offset: 85.27vh;
	--fall-duration: 6.84s;
	--fall-delay: 4.916s;
}
.stars--back .star:nth-child(36) {
	--star-tail-length: 6.89em;
	--top-offset: 3.11vh;
	--fall-duration: 7.962s;
	--fall-delay: 3.244s;
}
.stars--back .star:nth-child(37) {
	--star-tail-length: 6.45em;
	--top-offset: 71vh;
	--fall-duration: 8.751s;
	--fall-delay: 5.552s;
}
.stars--back .star:nth-child(38) {
	--star-tail-length: 7.22em;
	--top-offset: 10.46vh;
	--fall-duration: 7.496s;
	--fall-delay: 4.547s;
}
.stars--back .star:nth-child(39) {
	--star-tail-length: 6.21em;
	--top-offset: 62.49vh;
	--fall-duration: 8.635s;
	--fall-delay: 7.446s;
}
.stars--back .star:nth-child(40) {
	--star-tail-length: 6.49em;
	--top-offset: 72.37vh;
	--fall-duration: 8.641s;
	--fall-delay: 6.668s;
}

.stars--front .star:nth-child(1) {
	--star-tail-length: 6.82em;
	--top-offset: 59.32vh;
	--fall-duration: 8.614s;
	--fall-delay: 6.252s;
}
.stars--front .star:nth-child(2) {
	--star-tail-length: 5.57em;
	--top-offset: 86.82vh;
	--fall-duration: 11.79s;
	--fall-delay: 5.022s;
}
.stars--front .star:nth-child(3) {
	--star-tail-length: 5.79em;
	--top-offset: 29.09vh;
	--fall-duration: 6.942s;
	--fall-delay: 9.74s;
}
.stars--front .star:nth-child(4) {
	--star-tail-length: 6.03em;
	--top-offset: 55.02vh;
	--fall-duration: 10.01s;
	--fall-delay: 5.281s;
}
.stars--front .star:nth-child(5) {
	--star-tail-length: 7.4em;
	--top-offset: 12.32vh;
	--fall-duration: 9.147s;
	--fall-delay: 9.088s;
}
.stars--front .star:nth-child(6) {
	--star-tail-length: 5.76em;
	--top-offset: 50.59vh;
	--fall-duration: 6.439s;
	--fall-delay: 7.029s;
}
.stars--front .star:nth-child(7) {
	--star-tail-length: 6.79em;
	--top-offset: 65.46vh;
	--fall-duration: 6.34s;
	--fall-delay: 9.829s;
}
.stars--front .star:nth-child(8) {
	--star-tail-length: 5.48em;
	--top-offset: 84.54vh;
	--fall-duration: 11.869s;
	--fall-delay: 4.491s;
}
.stars--front .star:nth-child(9) {
	--star-tail-length: 7.28em;
	--top-offset: 90.7vh;
	--fall-duration: 11.922s;
	--fall-delay: 0.752s;
}
.stars--front .star:nth-child(10) {
	--star-tail-length: 6.14em;
	--top-offset: 60.88vh;
	--fall-duration: 7.226s;
	--fall-delay: 4.117s;
}

.star {
	--star-color: var(--primary-color);
	--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::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;
	}
}

/*# sourceMappingURL=stars.css.map */