body {
	margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: darkslategray;
}

.container {
	position: relative;
	font-size: 20px;
	animation: rotating 5s linear infinite;
}

.ring {
	position: relative;
	box-sizing: border-box;
	width: 10em;
	height: 10em;
	border: 1.5em solid paleturquoise;
	border-radius: 50%;
	z-index: 2;
}

.spheres span {
	position: absolute;
	width: 80%;
	height: 80%;
	top: -20%;
	left: -20%;
	z-index: 1;
	animation: 
		rotating 1.5s linear infinite,
		overlapping 1.5s linear infinite;
}

.spheres span:nth-child(2) {
	animation-delay: -0.5s;
}

.spheres span:nth-child(3) {
	animation-delay: -1s;
}

.spheres span::after {
	content: '';
	position: absolute;
	width: 3em;
	height: 3em;
	background-color: lightseagreen;
	border-radius: 50%;
}

@keyframes rotating {
	to {
		transform: rotate(1turn);
	}
}

@keyframes overlapping {
	to {
		z-index: 2;
	}
}