* {
	--bg-color: #151a1f;
	--bg2-color: #1b2127;
	--text-light-color: #8599ad;
	--text-color: #8599ad;
	--text-dark-color: #52667a;
	--sun-color: hsl(40, 70%, 60%);
	--moon-color: hsl(0, 0%, 80%);
	--cloud-color: hsl(200, 30%, 80%);
	--rain-color: hsl(190, 80%, 60%);
	--snow-color: hsl(0, 0%, 90%);
	box-sizing: border-box;
}

body {
	height: 100vh;
	width: 100%;
	margin: 0;
	background: var(--bg-color);
	color: var(--text-color);
	font-family: Cascadia Code;
	font-size: 1.2rem;
	font-weight: 200;
}

.weather-icon {
	display: inline-block;
	animation: float 5s ease-in-out infinite;
}

.sun {
	background: var(--sun-color);
	width: 2rem;
	height: 2rem;
	margin: -0.2rem 0.3rem 0 0.4rem;
	vertical-align: top;
	border-radius: 50%;
	box-shadow: rgba(255, 255, 0, 0.1) 0 0 0 0.5rem;
	animation: sun 1s ease-in-out infinite alternate,
		float 5s ease-in-out infinite;
}

.moon {
	width: 2.4rem;
	height: 2.4rem;
	margin: -0.9rem 0.6rem 0 -0.5rem;
	vertical-align: top;
	border-radius: 50%;
	background: none;
	box-shadow: var(--moon-color) 0.5rem 0.5rem 0 0rem;
	animation: float 5s ease-in-out infinite;
}

.cloud {
	background: var(--cloud-color);
	border-radius: 2rem;
	width: 1.2rem;
	height: 1.2rem;
	margin: 0.2rem 2.4rem 0 0;
	vertical-align: top;
	box-shadow: var(--cloud-color) 0.6rem 0.3rem 0 0.2rem,
		var(--cloud-color) 1.5rem 0.7rem 0 -0.1rem,
		var(--cloud-color) 2.1rem 0.1rem 0 0.2rem,
		var(--cloud-color) 1.6rem -0.4rem 0 0.1rem,
		var(--cloud-color) 0.7rem -0.5rem 0 -0.1rem;
}

.rain {
	background: var(--cloud-color);
	border-radius: 2rem;
	width: 1.5rem;
	height: 1.5rem;
	margin: -0.3rem 1.5rem 0 0;
	vertical-align: top;
	box-shadow: var(--cloud-color) 0.6rem 0.3rem 0 0.2rem,
		var(--cloud-color) 1.5rem 0.7rem 0 -0.1rem,
		var(--cloud-color) 2.1rem 0.1rem 0 0.2rem,
		var(--cloud-color) 1.6rem -0.4rem 0 0.1rem,
		var(--cloud-color) 0.7rem -0.5rem 0 -0.1rem;
	transform: scale(0.7);
	animation: float-small 5s ease-in-out infinite;
}

.rain:after {
	content: '';
	position: absolute;
	border-radius: 10px;
	background-color: transparent;
	width: 0.2rem;
	height: 0.6rem;
	top: 2rem;
	/* transform: rotate(30deg); */
	transform: rotate(0deg);
	animation: rain 1s ease-out infinite;
}

.snow {
	background: var(--cloud-color);
	border-radius: 2rem;
	width: 1.5rem;
	height: 1.5rem;
	margin: -0.2rem 1.5rem 0 0;
	vertical-align: top;
	box-shadow: var(--cloud-color) 0.6rem 0.3rem 0 0.2rem,
		var(--cloud-color) 1.5rem 0.7rem 0 -0.1rem,
		var(--cloud-color) 2.1rem 0.1rem 0 0.2rem,
		var(--cloud-color) 1.6rem -0.4rem 0 0.1rem,
		var(--cloud-color) 0.7rem -0.5rem 0 -0.1rem;
	transform: scale(0.7);
	animation: float-small 5s ease-in-out infinite;
}

.snow:after {
	content: '';
	position: absolute;
	border-radius: 10px;
	background-color: transparent;
	width: 0.3rem;
	height: 0.3rem;
	top: 2.4rem;
	animation: snow 1s ease-out infinite;
}

@keyframes sun {
	from {
		box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 0.3rem;
	}
	to {
		box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 0.6rem;
	}
}

@keyframes rain {
	from {
		opacity: 1;
		/* box-shadow: var(--rain-color) 0.6rem 0rem,
			var(--rain-color) 1.2rem -0.33rem, var(--rain-color) 1.8rem -0.66rem,
			var(--rain-color) 2.4rem -0.99rem; */
		box-shadow: var(--rain-color) 0.8rem 0.1rem,
			var(--rain-color) 1.5rem 0.3rem, var(--rain-color) 2.2rem 0.1rem,
			var(--rain-color) 2.9rem 0.3rem;
	}
	to {
		opacity: 0;
		box-shadow: var(--rain-color) 0.8rem 0.6rem,
			var(--rain-color) 1.5rem 0.8rem, var(--rain-color) 2.2rem 0.6rem,
			var(--rain-color) 2.9rem 0.8rem;
	}
}

@keyframes snow {
	from {
		opacity: 1;
		box-shadow: var(--snow-color) 0.8rem -0.2rem,
			var(--snow-color) 1.5rem 0rem, var(--snow-color) 2.2rem -0.2rem,
			var(--snow-color) 2.9rem 0rem;
	}
	to {
		opacity: 0;
		box-shadow: var(--snow-color) 0.8rem 0.3rem,
			var(--snow-color) 1.5rem 0.5rem, var(--snow-color) 2.2rem 0.3rem,
			var(--snow-color) 2.9rem 0.5rem;
	}
}

@keyframes float {
	50% {
		transform: translateY(0.5rem);
	}
}

@keyframes float-small {
	50% {
		transform: translateY(0.5rem) scale(0.7);
	}
}

@keyframes appear {
	from {
		transform: scale(0.5);
	}
	to {
		transform: scale(1);
	}
}

@keyframes time-appear {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}

@keyframes weather-appear {
	from {
		opacity: 0;
		transform: translateX(4rem);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes text-appear {
	from {
		opacity: 0;
		transform: translateX(8rem);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}