#night {
	min-height: 50vh;
	background: radial-gradient(ellipse at center, #0a0a0a 0%, #000000 70%);
	position: relative;
	overflow: hidden;

	@media screen and (max-width: 768px) {
		padding-top: 80px;
	}

	.club-logo {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: var(--padding2x) var(--padding);
	}

	.stars {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: radial-gradient(
				1px 1px at 20px 30px,
				rgba(255, 255, 255, 0.9),
				transparent
			),
			radial-gradient(
				1px 1px at 40px 70px,
				rgba(255, 255, 255, 0.7),
				transparent
			),
			radial-gradient(
				1px 1px at 90px 40px,
				rgba(255, 255, 255, 0.8),
				transparent
			),
			radial-gradient(
				1px 1px at 130px 80px,
				rgba(255, 255, 255, 0.6),
				transparent
			),
			radial-gradient(
				1px 1px at 160px 30px,
				rgba(255, 255, 255, 0.9),
				transparent
			),
			radial-gradient(
				1px 1px at 200px 90px,
				rgba(255, 255, 255, 0.5),
				transparent
			),
			radial-gradient(
				2px 2px at 240px 50px,
				rgba(255, 255, 255, 0.8),
				transparent
			),
			radial-gradient(
				1px 1px at 280px 120px,
				rgba(255, 255, 255, 0.7),
				transparent
			),
			radial-gradient(
				1px 1px at 320px 40px,
				rgba(255, 255, 255, 0.6),
				transparent
			),
			radial-gradient(
				1px 1px at 360px 90px,
				rgba(255, 255, 255, 0.9),
				transparent
			),
			radial-gradient(
				2px 2px at 50px 140px,
				rgba(255, 255, 255, 0.7),
				transparent
			),
			radial-gradient(
				1px 1px at 120px 160px,
				rgba(255, 255, 255, 0.8),
				transparent
			),
			radial-gradient(
				1px 1px at 180px 180px,
				rgba(255, 255, 255, 0.5),
				transparent
			),
			radial-gradient(
				1px 1px at 220px 200px,
				rgba(255, 255, 255, 0.9),
				transparent
			),
			radial-gradient(
				2px 2px at 300px 170px,
				rgba(255, 255, 255, 0.6),
				transparent
			),
			radial-gradient(
				1px 1px at 340px 200px,
				rgba(255, 255, 255, 0.8),
				transparent
			),
			radial-gradient(
				1px 1px at 10px 100px,
				rgba(255, 255, 255, 0.7),
				transparent
			),
			radial-gradient(
				1px 1px at 80px 20px,
				rgba(255, 255, 255, 0.5),
				transparent
			),
			radial-gradient(
				2px 2px at 110px 110px,
				rgba(255, 255, 255, 0.9),
				transparent
			),
			radial-gradient(
				1px 1px at 190px 60px,
				rgba(255, 255, 255, 0.6),
				transparent
			),
			radial-gradient(
				1px 1px at 380px 60px,
				rgba(255, 255, 255, 0.8),
				transparent
			),
			radial-gradient(
				1px 1px at 420px 140px,
				rgba(255, 255, 255, 0.5),
				transparent
			),
			radial-gradient(
				2px 2px at 480px 90px,
				rgba(255, 255, 255, 0.7),
				transparent
			),
			radial-gradient(
				1px 1px at 520px 180px,
				rgba(255, 255, 255, 0.9),
				transparent
			),
			radial-gradient(
				1px 1px at 560px 40px,
				rgba(255, 255, 255, 0.6),
				transparent
			),
			radial-gradient(
				1px 1px at 600px 120px,
				rgba(255, 255, 255, 0.8),
				transparent
			),
			radial-gradient(
				2px 2px at 15px 70px,
				rgba(255, 255, 255, 0.4),
				transparent
			),
			radial-gradient(
				1px 1px at 65px 190px,
				rgba(255, 255, 255, 0.7),
				transparent
			),
			radial-gradient(
				1px 1px at 140px 25px,
				rgba(255, 255, 255, 0.5),
				transparent
			),
			radial-gradient(
				1px 1px at 210px 110px,
				rgba(255, 255, 255, 0.8),
				transparent
			),
			radial-gradient(
				2px 2px at 260px 160px,
				rgba(255, 255, 255, 0.6),
				transparent
			),
			radial-gradient(
				1px 1px at 330px 80px,
				rgba(255, 255, 255, 0.9),
				transparent
			),
			radial-gradient(
				1px 1px at 400px 210px,
				rgba(255, 255, 255, 0.4),
				transparent
			),
			radial-gradient(
				1px 1px at 460px 30px,
				rgba(255, 255, 255, 0.7),
				transparent
			),
			radial-gradient(
				2px 2px at 500px 150px,
				rgba(255, 255, 255, 0.5),
				transparent
			);
		background-repeat: repeat;
		background-size: 600px 250px;
	}

	.stars::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: radial-gradient(
				1px 1px at 60px 60px,
				rgba(255, 255, 255, 0.4),
				transparent
			),
			radial-gradient(
				1px 1px at 150px 25px,
				rgba(255, 255, 255, 0.7),
				transparent
			),
			radial-gradient(
				2px 2px at 230px 75px,
				rgba(255, 255, 255, 0.8),
				transparent
			),
			radial-gradient(
				1px 1px at 25px 150px,
				rgba(255, 255, 255, 0.5),
				transparent
			),
			radial-gradient(
				1px 1px at 310px 130px,
				rgba(255, 255, 255, 0.9),
				transparent
			),
			radial-gradient(
				1px 1px at 270px 190px,
				rgba(255, 255, 255, 0.6),
				transparent
			),
			radial-gradient(
				2px 2px at 330px 60px,
				rgba(255, 255, 255, 0.7),
				transparent
			),
			radial-gradient(
				1px 1px at 70px 180px,
				rgba(255, 255, 255, 0.5),
				transparent
			),
			radial-gradient(
				1px 1px at 170px 140px,
				rgba(255, 255, 255, 0.8),
				transparent
			),
			radial-gradient(
				1px 1px at 290px 20px,
				rgba(255, 255, 255, 0.6),
				transparent
			),
			radial-gradient(
				1px 1px at 390px 100px,
				rgba(255, 255, 255, 0.7),
				transparent
			),
			radial-gradient(
				2px 2px at 450px 170px,
				rgba(255, 255, 255, 0.4),
				transparent
			),
			radial-gradient(
				1px 1px at 510px 45px,
				rgba(255, 255, 255, 0.8),
				transparent
			),
			radial-gradient(
				1px 1px at 570px 200px,
				rgba(255, 255, 255, 0.5),
				transparent
			),
			radial-gradient(
				1px 1px at 35px 95px,
				rgba(255, 255, 255, 0.6),
				transparent
			),
			radial-gradient(
				2px 2px at 95px 220px,
				rgba(255, 255, 255, 0.9),
				transparent
			),
			radial-gradient(
				1px 1px at 185px 55px,
				rgba(255, 255, 255, 0.4),
				transparent
			),
			radial-gradient(
				1px 1px at 250px 125px,
				rgba(255, 255, 255, 0.7),
				transparent
			),
			radial-gradient(
				1px 1px at 365px 185px,
				rgba(255, 255, 255, 0.8),
				transparent
			),
			radial-gradient(
				2px 2px at 420px 35px,
				rgba(255, 255, 255, 0.5),
				transparent
			),
			radial-gradient(
				1px 1px at 485px 110px,
				rgba(255, 255, 255, 0.6),
				transparent
			),
			radial-gradient(
				1px 1px at 540px 80px,
				rgba(255, 255, 255, 0.9),
				transparent
			);
		background-repeat: repeat;
		background-size: 580px 240px;
	}

	.stars::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: radial-gradient(
				3px 3px at 100px 80px,
				rgba(180, 180, 255, 0.3),
				transparent
			),
			radial-gradient(
				2px 2px at 250px 120px,
				rgba(255, 180, 180, 0.3),
				transparent
			),
			radial-gradient(
				2px 2px at 350px 180px,
				rgba(180, 255, 180, 0.2),
				transparent
			),
			radial-gradient(
				3px 3px at 180px 200px,
				rgba(255, 255, 180, 0.3),
				transparent
			),
			radial-gradient(
				2px 2px at 320px 40px,
				rgba(255, 200, 255, 0.2),
				transparent
			),
			radial-gradient(
				2px 2px at 450px 90px,
				rgba(180, 255, 255, 0.3),
				transparent
			),
			radial-gradient(
				3px 3px at 520px 160px,
				rgba(255, 180, 255, 0.2),
				transparent
			),
			radial-gradient(
				2px 2px at 580px 50px,
				rgba(255, 255, 180, 0.3),
				transparent
			),
			radial-gradient(
				2px 2px at 30px 140px,
				rgba(180, 180, 255, 0.2),
				transparent
			),
			radial-gradient(
				3px 3px at 120px 30px,
				rgba(255, 200, 180, 0.3),
				transparent
			),
			radial-gradient(
				2px 2px at 200px 90px,
				rgba(180, 255, 200, 0.2),
				transparent
			),
			radial-gradient(
				2px 2px at 280px 210px,
				rgba(255, 180, 180, 0.3),
				transparent
			),
			radial-gradient(
				3px 3px at 380px 130px,
				rgba(200, 200, 255, 0.2),
				transparent
			),
			radial-gradient(
				2px 2px at 470px 200px,
				rgba(255, 255, 200, 0.3),
				transparent
			),
			radial-gradient(
				2px 2px at 60px 240px,
				rgba(200, 255, 180, 0.2),
				transparent
			),
			radial-gradient(
				3px 3px at 160px 70px,
				rgba(255, 200, 255, 0.3),
				transparent
			);
		background-repeat: repeat;
		background-size: 620px 280px;
	}

	.earth {
		aspect-ratio: 1/1;
		width: 100%;
		position: relative;
		z-index: 2;
		max-width: 500px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;

		#globe{
			width: 70%;
			display: block;
			background: transparent;
			aspect-ratio: 1/1;
		}

		#globe-placeholder{
			width: 70%;
			height: 100%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 0;
		}

		.keerlebtiirleb{
			width: 70%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 1;
		}

		/* >img{
			width: 70%;
		} */

		@media screen and (min-width: 768px) {
			aspect-ratio: 16/9;
			max-width: 70%;
		}

		#canvas {
			width: 100%;
			height: 100%;
			display: block;
			background: transparent;
		}
	}
}