// #CodePenChallenge: Reflections
- let e = 29;
style
	- for(let s = 0; s < e; s++)
		| .window:nth-child(#{s}n + 1) { --s: calc(#{s} + 1) }
		| 
body
	.canvas
		.above
			.hill-1
			.hill-2
			.light-house
				.bg
				- for(let s = 0; s < e; s++)
					.window
				// 👆🏻 TODO or TO SKIP
				.poarch
				.bars
				.room
					- for(let s = 0; s < (e - 24); s++)
						.sqare-window
				.roof
		.reflection
			.hill-1
			.hill-2
			.light-house
				.bg
		.hill

:root {
	--size: 90;
	--unit: calc((var(--size) / var(--img-height)) * 1vmin);
	--img-height: 577;
	--img-width: 769.5;
	--bg: #fff;
	--w: hsl(0deg 0% 100%);
	--t: hsl(176deg 42% 52%);
}
* {
	margin: 0;
	padding: 0;
}
body {
	background: var(--bg);
	overflow: hidden;
	background: #262626;
}
.canvas {
	height: calc(var(--img-height) * var(--unit));
	width: calc(var(--img-width) * var(--unit));
	z-index: 2;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	box-shadow: 0 0 0 2vmin hsl(33°, 41%, 59%);
	*,
	*::before,
	*::after {
		position: absolute;
		content: "";
		display: block;
	}
	.above {
		background: linear-gradient(90deg, var(--t), var(--w));
		width: 100%;
		height: calc(var(--unit) * 395);
		overflow: hidden;
		.hill-1 {
			width: calc(var(--unit) * 800);
			height: calc(var(--unit) * 700);
			background: linear-gradient(var(--w) 20%, var(--t) 40%);
			border-radius: 50%;
			top: 20%;
			left: -40%;
		}
		.hill-2 {
			width: calc(var(--unit) * 800);
			height: calc(var(--unit) * 700);
			background: linear-gradient(var(--t) 10%, var(--w) 40%);
			border-radius: 50%;
			top: 40%;
			left: 40%;
		}
		.light-house {
			top: 37%;
			left: 30%;
			.bg {
				clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
				width: calc(var(--unit) * 160);
				height: calc(var(--unit) * 260);
				background: linear-gradient(
					90deg,
					hsl(14deg 98% 83%) 40%,
					hsl(14deg 88% 70%) 40% 60%,
					hsl(12deg 93% 65%) 60% 100%
				);
			}
			.poarch {
				background: hsl(186deg 92% 10%);
				width: calc(var(--unit) * 120);
				height: calc(var(--unit) * 25);
				border-radius: 0 0 100% 100%;
				top: -3vmin;
				left: 3vmin;
				z-index: 2;
			}
			.bars {
				width: calc(var(--unit) * 96);
				height: calc(var(--unit) * 30);
				background: hsl(186deg 92% 10%);
				top: -6vmin;
				left: 5vmin;
				opacity: 0.7;
				z-index: 2;
			}
			.room {
				background: hsl(177deg 68% 30%);
				width: calc(var(--unit) * 70);
				height: calc(var(--unit) * 40);
				top: -8.5vmin;
				left: 7vmin;
				@for $i from 1 to 6 {
					.sqare-window:nth-child(#{$i}) {
						width: calc(var(--unit) * 8);
						height: calc(var(--unit) * 8);
						background: hsl(188deg 88% 16%);
						top: 10%;
						left: calc(20% * #{$i} - 15%);
					}
				}
			}
			.roof {
				clip-path: polygon(50% 55%, 0% 100%, 100% 100%);
				width: calc(var(--unit) * 90);
				height: calc(var(--unit) * 100);
				background: hsl(187deg 87% 9%);
				top: -24vmin;
				left: 5.5vmin;
			}
		}
	
	}
	.reflection {
		overflow: hidden;
		width: 100%;
		height: calc(var(--unit) * 200);
		top: 61vmin;
		background: linear-gradient(-90deg, hsl(185deg 44% 46%),hsl(222deg 54% 58%), hsl(222deg 81% 18%));
		.hill-1 {
			width: calc(var(--unit) * 800);
			height: calc(var(--unit) * 700);
			background: linear-gradient(var(--w) 20%, var(--t) 40%);
			border-radius: 50%;
			top: -200%;
			left: -40%;
			transform: rotate(180deg);
			opacity: .5;
		}
		.hill-2 {
			width: calc(var(--unit) * 800);
			height: calc(var(--unit) * 700);
			background: linear-gradient(var(--t) 10%, var(--w) 40%);
			border-radius: 50%;
			top: -215%;
			left: 40%;
			transform: rotate(180deg);
			opacity: .3;
		}
		.light-house {
			z-index: 100;
			top: 130%;
			left: 50.6%;
			transform: rotate(180deg);
			opacity: .5;
			.bg {
				z-index: 100;
				clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
				width: calc(var(--unit) * 157.5);
				height: calc(var(--unit) * 260);
				background: linear-gradient(
					90deg,
					hsl(14deg 98% 83%) 40%,
					hsl(14deg 88% 70%) 40% 60%,
					hsl(12deg 93% 65%) 60% 100%
				);
			}
		}
	}
	.hill {
		background: linear-gradient(hsl(225deg 59% 24%), hsl(274deg 58% 9%));
		width: 100vmin;
		height: 70vmin;
		border-radius: 50%;
		top: 55vmin;
		left: 80vmin;
	}
}