.sky {
	height: 33vh;
	min-height: 16rem;
	display: flex;
	justify-content: end;
	overflow: hidden;
}

.cloud-container {
	position: relative;
	margin-right: 2rem;
	margin-top: 1rem;
	width: 18rem;

	--moonset-position: 3rem;
	--moon-position: 3.4rem;
	--sunset-position: 2.5rem;
	--sun-position: -4.5rem;

	--day-night-transition-duration: 2.5s;
}

.cloud-container .sun, .cloud-container .moon {
	display: none;
	transition: opacity var(--day-night-transition-duration) ease, left var(--day-night-transition-duration) ease;
}

:is(.cloud-container.day, .cloud-container.sunrise, .cloud-container.moonset) .sun, 
:is(.cloud-container.night, .cloud-container.moonrise, .cloud-container.sunset) .moon {
	display: block;
}

:is(.cloud-container.sunset, .cloud-container.moonset) :is(.sun, .moon) {
	opacity: 0;
}

.moon {
	left: var(--moon-position)
}

.sun {
	left: var(--sun-position)
}

:is(.cloud-container.moonset, .cloud-container.sunset) .moon {
	left: var(--moonset-position);
}

:is(.cloud-container.moonset, .cloud-container.sunset) .sun {
	left: var(--sunset-position);
}

.cloud-container.sunrise .sun, .cloud-container.moonrise .moon {
	opacity: 1;
}

@keyframes wiggle-horizontal {
	0%   {
		left: 0rem;
	}
	50%  {
		left: 2rem;
	}
	100% {
		left: 0rem;
	}
}

@keyframes wiggle-vertical {
	0%   {
		top: 0rem;
	}
	50%  {
		top: 0.5rem;
	}
	100% {
		top: 0rem;
	}
}

.cloud {
	position: absolute;
	width: 15rem;
	top: 1rem;
	left: 0rem;
	animation-name: wiggle-horizontal;
	animation-timing-function: cubic-bezier(0.36, 0.15, 0.48, 0.8);
	animation-duration: 8s;
	animation-iteration-count: infinite;
}

.moon, .sun {
	opacity: 1;
	position: absolute;
	width: 15rem;
	top: 0rem;
	transform: rotate(-15deg);
	animation-name: wiggle-vertical;
	animation-timing-function: cubic-bezier(0.36, 0.15, 0.48, 0.8);
	animation-duration: 4s;
	animation-iteration-count: infinite;
}