/* https://codepen.io/bennettfeely/pen/vYLmYJz */

:root {
	--twinkle-duration: 4s;
}

#sky
{
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 1;
}

#sky object
{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

#haze
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(rgba(0,0,0,0) 33%, var(--color-light) 100%);
}

.stars
{
	animation: twinkle var(--twinkle-duration) ease-in-out infinite;
}
.stars1
{
	animation-delay: 0;
}
.stars2
{
	animation-delay: calc(var(--twinkle-duration) * -0.33);
}
.stars3
{
	animation-delay: calc(var(--twinkle-duration) * -0.66);
}

@keyframes twinkle
{
    50% {
        opacity: 0.5;
    }
}

.stars circle
{
	fill: white;

	&:nth-child(3n) {
		opacity: 0.8;
	}
	&:nth-child(7n) {
		opacity: 0.6;
	}
	&:nth-child(13n) {
		opacity: 0.3;
	}
	&:nth-child(19n) {
		opacity: 0.2;
	}
}