.star {
	position: absolute;
	/* position: relative; */
	z-index: 2;
	color: white;
	font-size: 1rem;
	/* animation-duration: 2500ms; */
	/* animation-duration: attr(data-anidur ms); */
	animation-duration: var(--animation-duration);
	animation-fill-mode: forwards;
	pointer-events: none;
	/* background-color:red; */
	height: 1rem;
	width: 1rem;
}

@keyframes fall-1 {
	0% {
		transform: translate(0px, 0px) rotateX(45deg) rotateY(30deg) rotateZ(0deg)
			scale(0.25);
		opacity: 0;
		/* filter:blur(0px) */
	}

	5% {
		transform: translate(10px, -10px) rotateX(45deg) rotateY(30deg)
			rotateZ(0deg) scale(1);
		opacity: 1;
	}

	100% {
		transform: translate(25px, 200px) rotateX(180deg) rotateY(270deg)
			rotateZ(90deg) scale(1);
		opacity: 0;
		/* filter:blur(5px); */
	}
}

@keyframes fall-2 {
	0% {
		transform: translate(0px, 0px) rotateX(-20deg) rotateY(10deg) scale(0.25);
		opacity: 0;
		/* filter:blur(0px); */
	}

	10% {
		transform: translate(-10px, -5px) rotateX(-20deg) rotateY(10deg) scale(1);
		opacity: 1;
	}

	100% {
		transform: translate(-10px, 160px) rotateX(-90deg) rotateY(45deg)
			scale(0.25);
		opacity: 0;
		/* filter:blur(2px); */
	}
}

@keyframes fall-3 {
	0% {
		transform: translate(0px, 0px) rotateX(0deg) rotateY(45deg) scale(0.5);
		opacity: 0;
		/* filter:blur(0px); */
	}

	15% {
		transform: translate(7px, 5px) rotateX(0deg) rotateY(45deg) scale(1);
		opacity: 1;
	}

	100% {
		transform: translate(20px, 120px) rotateX(-180deg) rotateY(-90deg)
			scale(0.5);
		opacity: 0;
		/* filter:blur(6px); */
	}
}

/* var(--glow-rgb) */
.glow-point {
	position: absolute;
	box-shadow: 0rem 0rem 1.2rem 0.6rem rgb(71, 228, 191);
	pointer-events: none;
}