.backgroundEffect {
	background: var(--mainColor);
	height: 100vh;
	overflow: hidden;
	position: fixed;
}
.shootingStarContainer:nth-child(1) {
	position: absolute;
	width: 100%;
	height: 130%;
	transform: rotate(41deg);
	z-index: 10;
}
.shootingStarContainer:nth-child(2) {
	position: absolute;
	width: 100%;
	height: 130%;
	transform: rotate(45deg);
	z-index: 10;
}
.shootingStarContainer:nth-child(3) {
	position: absolute;
	width: 100%;
	height: 130%;
	transform: rotate(50deg);
	z-index: 10;
}
.shootingStar {
	position: absolute;
	height: 1px;
	background: linear-gradient(-70deg, var(--shadow07Color), var(--mainColor));
}
.shootingStarContainer:nth-child(1) .shootingStar:nth-child(1) {
	left: calc(2%);
	top: calc(60%);
	animation: shootingFrames 1997ms ease-in-out 28421ms;
	opacity: 0.39;
}
.shootingStarContainer:nth-child(1) .shootingStar:nth-child(2) {
	left: calc(31%);
	top: calc(43%);
	animation: shootingFrames 2466ms ease-in-out 25298ms;
	opacity: 0.17;
}
.shootingStarContainer:nth-child(1) .shootingStar:nth-child(3) {
	left: calc(22%);
	top: calc(61%);
	animation: shootingFrames 1344ms ease-in-out 1141ms;
	opacity: 0.27;
}
.shootingStarContainer:nth-child(1) .shootingStar:nth-child(4) {
	left: calc(15%);
	top: calc(19%);
	animation: shootingFrames 2049ms ease-in-out 58377ms;
	opacity: 0.36;
}
.shootingStarContainer:nth-child(1) .shootingStar:nth-child(5) {
	left: calc(9%);
	top: calc(49%);
	animation: shootingFrames 1663ms ease-in-out 23666ms;
	opacity: 0.32;
}
.shootingStarContainer:nth-child(1) .shootingStar:nth-child(6) {
	left: calc(48%);
	top: calc(69%);
	animation: shootingFrames 1959ms ease-in-out 48692ms;
	opacity: 0.72;
}
.shootingStarContainer:nth-child(1) .shootingStar:nth-child(7) {
	left: calc(15%);
	top: calc(8%);
	animation: shootingFrames 1630ms ease-in-out 31781ms;
	opacity: 0.47;
}
.shootingStarContainer:nth-child(1) .shootingStar:nth-child(8) {
	left: calc(26%);
	top: calc(56%);
	animation: shootingFrames 2434ms ease-in-out 15247ms;
	opacity: 0.46;
}
.shootingStarContainer:nth-child(1) .shootingStar:nth-child(9) {
	left: calc(29%);
	top: calc(86%);
	animation: shootingFrames 2603ms ease-in-out 42320ms;
	opacity: 0.75;
}
.shootingStarContainer:nth-child(1) .shootingStar:nth-child(10) {
	left: calc(29%);
	top: calc(48%);
	animation: shootingFrames 763ms ease-in-out 23785ms;
	opacity: 0.89;
}
.shootingStarContainer:nth-child(2) .shootingStar:nth-child(1) {
	left: calc(13%);
	top: calc(95%);
	animation: shootingFrames 2514ms ease-in-out 28227ms;
	opacity: 0.83;
}
.shootingStarContainer:nth-child(2) .shootingStar:nth-child(2) {
	left: calc(19%);
	top: calc(11%);
	animation: shootingFrames 2659ms ease-in-out 36973ms;
	opacity: 0.9;
}
.shootingStarContainer:nth-child(2) .shootingStar:nth-child(3) {
	left: calc(22%);
	top: calc(43%);
	animation: shootingFrames 1053ms ease-in-out 29247ms;
	opacity: 0.87;
}
.shootingStarContainer:nth-child(2) .shootingStar:nth-child(4) {
	left: calc(30%);
	top: calc(83%);
	animation: shootingFrames 946ms ease-in-out 50096ms;
	opacity: 0.22;
}
.shootingStarContainer:nth-child(2) .shootingStar:nth-child(5) {
	left: calc(31%);
	top: calc(57%);
	animation: shootingFrames 1079ms ease-in-out 38298ms;
	opacity: 0.21;
}
.shootingStarContainer:nth-child(2) .shootingStar:nth-child(6) {
	left: calc(30%);
	top: calc(32%);
	animation: shootingFrames 1595ms ease-in-out 17364ms;
	opacity: 0.16;
}
.shootingStarContainer:nth-child(2) .shootingStar:nth-child(7) {
	left: calc(4%);
	top: calc(11%);
	animation: shootingFrames 1445ms ease-in-out 18816ms;
	opacity: 0.22;
}
.shootingStarContainer:nth-child(2) .shootingStar:nth-child(8) {
	left: calc(36%);
	top: calc(96%);
	animation: shootingFrames 2577ms ease-in-out 58293ms;
	opacity: 0.31;
}
.shootingStarContainer:nth-child(2) .shootingStar:nth-child(9) {
	left: calc(6%);
	top: calc(33%);
	animation: shootingFrames 1239ms ease-in-out 55340ms;
	opacity: 0.34;
}
.shootingStarContainer:nth-child(2) .shootingStar:nth-child(10) {
	left: calc(28%);
	top: calc(50%);
	animation: shootingFrames 1184ms ease-in-out 28445ms;
	opacity: 0.21;
}
.shootingStarContainer:nth-child(3) .shootingStar:nth-child(1) {
	left: calc(50%);
	top: calc(96%);
	animation: shootingFrames 1068ms ease-in-out 30350ms;
	opacity: 0.53;
}
.shootingStarContainer:nth-child(3) .shootingStar:nth-child(2) {
	left: calc(15%);
	top: calc(71%);
	animation: shootingFrames 2161ms ease-in-out 17505ms;
	opacity: 0.57;
}
.shootingStarContainer:nth-child(3) .shootingStar:nth-child(3) {
	left: calc(32%);
	top: calc(18%);
	animation: shootingFrames 2212ms ease-in-out 20433ms;
	opacity: 0.9;
}
.shootingStarContainer:nth-child(3) .shootingStar:nth-child(4) {
	left: calc(5%);
	top: calc(13%);
	animation: shootingFrames 2532ms ease-in-out 54146ms;
	opacity: 0.53;
}
.shootingStarContainer:nth-child(3) .shootingStar:nth-child(5) {
	left: calc(5%);
	top: calc(73%);
	animation: shootingFrames 1711ms ease-in-out 2133ms;
	opacity: 0.65;
}
.shootingStarContainer:nth-child(3) .shootingStar:nth-child(6) {
	left: calc(38%);
	top: calc(7%);
	animation: shootingFrames 1263ms ease-in-out 20622ms;
	opacity: 0.77;
}
.shootingStarContainer:nth-child(3) .shootingStar:nth-child(7) {
	left: calc(2%);
	top: calc(66%);
	animation: shootingFrames 2700ms ease-in-out 6980ms;
	opacity: 0.59;
}
.shootingStarContainer:nth-child(3) .shootingStar:nth-child(8) {
	left: calc(32%);
	top: calc(88%);
	animation: shootingFrames 1703ms ease-in-out 45442ms;
	opacity: 0.68;
}
.shootingStarContainer:nth-child(3) .shootingStar:nth-child(9) {
	left: calc(12%);
	top: calc(47%);
	animation: shootingFrames 2029ms ease-in-out 21884ms;
	opacity: 0.34;
}
.shootingStarContainer:nth-child(3) .shootingStar:nth-child(10) {
	left: calc(12%);
	top: calc(16%);
	animation: shootingFrames 2610ms ease-in-out 26101ms;
	opacity: 0.83;
}
@keyframes shootingFrames {
	0% {
		transform: translateX(0);
		width: 0;
	}
	30% {
		width: 200px;
	}
	100% {
		width: 0;
		transform: translateX(895px);
	}
}
.stars,
.clouds {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.clouds {
	background: transparent url("../img/clouds.png") repeat top center;
	z-index: 5;
	height: 150%;
	animation: cloudsFrames 300s linear infinite;
}
.fogContainer {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
	z-index: 7;
}
.fog {
	position: absolute;
	left: -50%;
	top: -30%;
	width: 200%;
	height: 200%;
	animation-name: fogFrames;
	animation-duration: 60s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	/* background: linear-gradient(-5deg, #00000000 0%, #ffffff15 40%, #74590121 45%, #8b845b21 55%, #00000000 70%); */
	background: linear-gradient(
		-5deg,
		var(--shadow00Color) 0%,
		var(--shadow01Color) 40%,
		var(--shadow01Color) 45%,
		var(--shadow02Color) 55%,
		var(--shadow00Color) 70%
	);
}
@keyframes fogFrames {
	0% {
		transform: none;
	}
	10% {
		transform: scaleY(0.75) translate(5%, -2%) rotate(15deg);
	}
	25% {
		transform: scaleY(1) translate(10%, 7%);
	}
	50% {
		transform: scaleY(0.5) rotate(-15deg);
	}
	75% {
		transform: scaleY(0.2) translate(7%, -2%);
	}
	100% {
		transform: none;
	}
}
@keyframes cloudsFrames {
	from {
		background-position: 0 -200px;
	}
	to {
		background-position: 10000px 0;
	}
}
