.globe-container {
	position: relative;
	width: 20rem;
	height: 20rem;
}

.globe,
.orbit {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.globe {
	width: 10rem;
	height: 10rem;
	background-image: url('./world.png');
	background-size: auto 100%;
	border-radius: 50%;
	border: .25rem solid #434d54;
	animation: slide 10s linear infinite;
}

@keyframes slide {
	0% {
		background-position-x: 0;
	}

	100% {
		background-position-x: calc(2442/1200*9.5rem);
	}
}

.orbit {
	position: absolute;
	border: .25rem dotted #434d54;
	border-radius: 50%;
	width: calc(var(--radius) * 2);
	height: calc(var(--radius) * 2);
	animation: dash-orbit 100s linear infinite;
}

.orbit::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: #434d54;
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
	animation: orbit 10s linear infinite;
}

@keyframes dash-orbit {
	0% {
		transform: translate(-50%, -50%) rotate(0);
	}

	100% {
		transform: translate(-50%, -50%) rotate(calc(var(--speed) * 360deg));
	}
}

@keyframes orbit {
	0% {
		transform: translate(-50%, -50%) rotate(0) translateX(var(--radius));
	}

	100% {
		transform: translate(-50%, -50%) rotate(calc(var(--speed) * 360deg)) translateX(var(--radius));
	}
}