*, *::before, *::after {
	box-sizing: border-box;
}
:root {
	--easing: ease-in-out;
	--duration: 5s;
}
body {
	width: 100%;
	height: 100vh;
	margin: 0;
	display: flex;
	overflow: hidden;
}
.canvas {
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column-reverse;
	align-items: stretch;
	background: linear-gradient(#00364f 25%, #0070A8, #71b8d7);
	background-size: 100% 400%;
	background-position: 0 100%;
	animation: brightSky var(--duration) var(--easing);
}
.water {
	height: 10%;
	background: #00488d;
	z-index: 1;
	animation: brightPatch var(--duration) var(--easing);
}
.nonWater {
	height: 40%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.darkColor {
	background: #265D88;
					
}
.lighterColor {
	background: white;
}
.mountain {
	height: 100%;
	aspect-ratio: 3.5/1;
	clip-path: polygon(7% 94%, 14% 84%, 20% 72%, 30% 50%, 34.8% 38%, 40.5% 20%, 44.5% 3%, 45% 2%, 49% 2.5%, 52% 2%, 55% 0%, 55.3% 0.5%, 58.2% 15%, 62% 30%, 65% 39.5%, 70% 53%, 75% 63%, 82% 75%, 90% 88%,100% 100%, 0% 100%);
	position: relative;
	transform-origin: 50% 100%;
	transform: scaleX(1.1);
	animation: brightPatch var(--duration) ease;
}
.patch0 {
	width: 100%;
	aspect-ratio: 3.6/1;
	border-radius: 50%;
	position: absolute;
	/* transform: rotate(-40deg); */
	top: -42%;
	/* left: 16%; */
}
.patch1 {
	width: 59%;
	aspect-ratio: 5/1;
	border-radius: 50%;
	position: absolute;
	transform: rotate(-40deg);
	top: -15.6%;
	left: 12%;
}
.patch2 {
	width: 60%;
	aspect-ratio: 5/1;
	border-radius: 50%;
	position: absolute;
	transform: rotate(-70deg);
	top: -58%;
	left: 19%;
}
.patch3 {
	width: 10%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	position: absolute;
	/* transform: rotate(-40deg); */
	top: 46%;
	left: 45%;
}
.patch4 {
	width: 10%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	position: absolute;
	/* transform: rotate(-40deg); */
	top: 42%;
	left: 49%;
}
.patch5 {
	width: 12%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	position: absolute;
	/* transform: rotate(-40deg); */
	top: 40%;
	left: 51%;
}
.patch6 {
	width: 60%;
	aspect-ratio: 4/1;
	border-radius: 50%;
	position: absolute;
	transform: rotate(36deg);
	top: -24%;
	left: 25%;
}
.patch7 {
	width: 13%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	position: absolute;
	/* transform: rotate(-40deg); */
	top: 55%;
	left: 43%;
}
.patch8 {
	width: 13%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	position: absolute;
	/* transform: rotate(-40deg); */
	top: 52%;
	left: 48%;
}
.patch9 {
	width: 13%;
	aspect-ratio: 1/1;
	border-radius: 30% 20%;
	position: absolute;
	transform: scaleY(0.6) skew(20deg) rotate(-40deg);
	top: 49%;
	left: 51%;
}
.patch10 {
	width: 21%;
	aspect-ratio: 2/1;
	border-radius: 50%;
	position: absolute;
	transform: rotate(320deg);
	top: 60%;
	left: 20%;
}
.patchDarken {
	position: absolute;
	width: 100%;
	height: 200%;
	transform: rotate(-7deg);
	backdrop-filter: brightness(0.95);
	left: 50%;
	top: -50%;
}
.sun {
	height: 55%;
	aspect-ratio: 1/1;
	background: #ff8573;
	box-shadow: 0 0 1000px 100px #ff8d78;
	border-radius: 50%;
	position: absolute;
	/*left: 10%*/
	animation: floatUp var(--duration) var(--easing);
}
@keyframes brightSky {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 0 100%;
	}
}
@keyframes brightPatch {
	0% {
		filter: brightness(0.6);
	}
	100% {
		filter: brightness(1);
	}
}
@keyframes floatUp {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0%);
	}
}