Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<input type="checkbox" id="day-night"><label for="day-night"></label>

<div class="content">

	
	<div class="moon-sun"></div>

	<div class="cuboid floor one">
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid roof one">
		<div class="side"><i class="cactus"></i></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid floor two">
		<div class="side"><span><i class="flowers"></i></span></div>
		<div class="side"></div>
		<div class="side"><span></span></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid roof two">
		<div class="side"><i class="bush"></i></div>
		<div class="side"></div>
		<div class="side"><i class="bush"></i></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid floor three">
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"><span></span></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid roof three">
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid floor four">
		<div class="side"><i class="man"></i></div>
		<div class="side"></div>
		<div class="side"><span></span></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid roof four">
		<div class="side"><i class="bush"></i></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid floor five">
		<div class="side"><i class="cactus2"></i><i class="cactus2"></i><span></span></div>
		<div class="side"></div>
		<div class="side"><span></span></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid roof five">
		<div class="side"><i class="cactus"></i></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid floor six">
		<div class="side"><span><i class="cat"></i><i class="cat"></i></span></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid roof six">
		<div class="side"><i class="bush"></i></div>
		<div class="side"></div>
		<div class="side"><i class="cactus"></i></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid floor seven">
		<div class="side"><i class="plant"></i></div>
		<div class="side"></div>
		<div class="side"><span></span></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid roof seven">
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid floor eight">
		<div class="side"><i class="plant"></i><i class="man"></i></div>
		<div class="side"></div>
		<div class="side"><span></span></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid roof eight">
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid air-cooler">
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="cuboid air-cooler">
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
		<div class="side"></div>
	</div>
	<div class="lights"></div>
	<div class="clouds"></div>

</div>
              
            
!

CSS

              
                /*** Pending to add some details on windows ***/

@property --glass {
	syntax: '<angle>';
	inherits: false;
	initial-value: 337deg;
}

* {
	transform-style: preserve-3d;
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	--cbz: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.content {
	--frame: #070b32;
	--bush: #181b38;
	--dot1: radial-gradient(circle at 50% 50%, var(--bush) 0 0.25vmin, #fff0 calc(0.25vmin + 1px) 100%);
	--dot2: radial-gradient(circle at 50% 50%, var(--bush) 0 0.5vmin, #fff0 calc(0.5vmin + 1px) 100%);
	--dot3: radial-gradient(circle at 50% 50%, var(--bush) 0 1.15vmin, #fff0 calc(1.15vmin + 1px) 100%);
	--glass: 337deg;
	--luz1: hsl(var(--glass) 60% 50% / 60%);
	--luz2: hsl(var(--glass) 54% 32%);
	--luz3: hsl(var(--glass) 54% 25%);
	transition: --glass 3s;
	width: 80vmin;
	height: 100vh;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	animation: start-glass 3s var(--cbz) 0s 1;
}

@keyframes start-glass {
	0% { --glass: 200deg; }
	100% { --glass: 337deg; }
}

.content:before {
	content: "";
	position: absolute;
	width: 100vw;
	height: 100%;
	background: linear-gradient(180deg, #000, #080212, #341c5e, #50587e, #0079d9, #39a7ff,  #70c6ed 100%);
	background-repeat: no-repeat;
	background-size:  100% 300%;
	background-position: 0% 10%;
	transform: translateZ(-100vmin);
	transition: all 3s var(--cbz) 0s;
	animation: start-bg 3s var(--cbz) 0s 1;
}

.content:after {
	content: "";
	position: absolute;
	width: 100vw;
	height: 200%;
	--s1: radial-gradient(0.1vmin 0.1vmin at 50% 50%, #ffffff, #fff0);
	--s2: radial-gradient(0.2vmin 0.2vmin at 50% 50%, #ffffff, #fff0);
	background-image: var(--s1),var(--s1), var(--s1),var(--s2), var(--s2),var(--s1), var(--s2),var(--s1), var(--s2),var(--s1), var(--s2),var(--s1), var(--s2),var(--s1), var(--s1),var(--s2), var(--s2),var(--s1), var(--s1),var(--s2), var(--s1),var(--s1);
	background-repeat: repeat-x;
	background-size: 26% 25%, 43.33% 33.33%, 50% 80%, 20% 20%, 33.33% 75.33%, 26% 73%, 39.33% 22%, 33.33% 26%, 31% 32%, 14.33% 35.33%, 18.33% 62.33%, 39.33% 86.33%, 29.33% 69%, 12.33% 30.33%, 29.33% 41.33%, 22.33% 46.33%, 35.33% 27.33%, 22.33% 39.33%, 20.33% 44.33%, 33.33% 56.33%;
	filter: drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 5px #fff);
	background-position: -8% -10%;
	transform: translateZ(-100vmin);
	transition: all 3s var(--cbz) 0s;
	top: -16vmin;
	animation: start-stars 3s var(--cbz) 0s 1;
}


input#day-night:checked ~ .content:before {
	background-position: 0% 90%;
	transition: all 3s var(--cbz) 0s;
}

input#day-night:checked ~ .content:after {
	top: -100%;
	transition: all 3s var(--cbz) 0s;
}

@keyframes start-stars {
	0% { top: -100%; }
	100% { top: 0%; }
}

@keyframes start-bg {
	0% { background-position: 0% 90%; }
	100% { background-position: 0% 10%; }
}


.moon-sun {
	position: absolute;
	width: 18vmin;
	height: 18vmin;
	bottom: 70vmin;
	margin-left: 90vmin;
	border-radius: 100%;
	background-repeat: no-repeat;
	animation: change-sm 3s var(--cbz) 0s 1;
	animation-fill-mode: forwards;
	background: radial-gradient(circle at 45% 55%, #fff -13%, yellow 35%, orange 90%, #fff0 90%);
	box-shadow: 0 0 6em 3em #ff9800, 0 0 8em 0 #ff9800 inset, 0 0 20px 5px #fdfdfd;
	--moon: 
		radial-gradient( circle at 26% 71%, #ffffff 8%, #fff0 12% ), 
		radial-gradient( circle at 23% 75%, #ccc 0% 1%, #fff0 10% ), 
		radial-gradient( circle at 14% 42%, #fdfdfd 7%, #fff0 11% ), 
		radial-gradient( circle at 12% 45%, #ccc 0%, #fff0 7% ), 
		radial-gradient( circle at 23% 57%, #f9f9f9 2%, #fff0 6% ), 
		radial-gradient( circle at 22% 58%, #ccc -2%, #fff0 4% ), 
		radial-gradient(circle at 83% 25%, #fff0 10vmin, #fff calc(10vmin + 1px));
	filter: drop-shadow(0px 1px 6vmin #6493a9) drop-shadow(0px 1px 6vmin #fdfdfd);		
}

input#day-night:checked ~ .content .moon-sun {
	animation: change-ms 3s var(--cbz) 0s 1 reverse;
	animation-fill-mode: forwards;
}


@keyframes change-sm {
	0% { bottom: 70vmin; }
	45%, 55% { bottom: -35vmin; }
	49% { background: #ffeb3b; filter: drop-shadow(0px 1px 6vmin #ff9800) drop-shadow(0px 1px 6vmin #fdfdfd); }
	50% {  background: var(--moon); }
	100% { bottom: 70vmin;  background: var(--moon);filter: drop-shadow(0px 1px 6vmin #6493a9) drop-shadow(0px 1px 6vmin #fdfdfd); box-shadow: none; }
}

@keyframes change-ms {
	0% { bottom: 70vmin; }
	45%, 55% { bottom: -35vmin; }
	49% { background: #ffeb3b; filter: drop-shadow(0px 1px 6vmin #ff9800) drop-shadow(0px 1px 6vmin #fdfdfd); }
	50% {  background: var(--moon); }
	100% { bottom: 70vmin;  background: var(--moon);filter: drop-shadow(0px 1px 6vmin #6493a9) drop-shadow(0px 1px 6vmin #fdfdfd); box-shadow: none; }
}




/*** CUBOID ***/

.cuboid {
	--width: 20;
	--depth: 20;
	--height: 20;
	--hue: 235;
	--sat: 25%;
	height: calc(var(--height) * 1vmin);
	width: calc(var(--width) * 1vmin);
	position: absolute;
	transform: rotateY(-8deg) rotateX(5deg) translateZ(-24vmin);
}

.cuboid .side {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	border-radius: 1px;
}


.cuboid .side:nth-of-type(1) {
	--sat: 40%;
	transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 18%);
}
.cuboid .side:nth-of-type(2) {
	transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin))
		rotateY(180deg);
	background: hsl(var(--hue), var(--sat), 35%);
}
.cuboid .side:nth-of-type(3) {
	width: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateY(90deg)
		translate3d(0, 0, calc(var(--width) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 35%);
}
.cuboid .side:nth-of-type(4) {
	width: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateY(-90deg)
		translate3d(0, 0, calc(var(--width) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 40%);
}
.cuboid .side:nth-of-type(5) {
	--sat: 60%;
	height: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateX(90deg)
		translate3d(0, 0, calc(var(--height) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 10%);
}
.cuboid .side:nth-of-type(6) {
	--sat: 60%;
	height: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateX(-90deg)
		translate3d(0, 0, calc(var(--height) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 10%);
}




/*** FLOOR ***/

.floor {
	--width: 40;
	--depth: 89;
	--height: 8;
	bottom: -5vmin;
	left: 16vmin;
	--lines-front: repeating-linear-gradient(90deg, var(--luz1) 0% calc(100% - 0.275vmin), var(--frame) calc(100% - 0.275vmin) 100%);
	--lines-side: repeating-linear-gradient(90deg, var(--luz1) 0% calc(100% - 1.5vmin), var(--frame) calc(100% - 1.5vmin) 100%);
}

.floor .side { border: 3px solid var(--frame); }

.floor.two { bottom: 5vmin; }
.floor.three { bottom: 15vmin; }
.floor.four { bottom: 25vmin; }
.floor.five { bottom: 35vmin; }
.floor.six { bottom: 45vmin; }
.floor.seven { bottom: 55vmin; }
.floor.eight { bottom: 65vmin; }

.floor .side:nth-of-type(1) {
	background: 
		conic-gradient(from 116deg at 0 0, var(--luz2) 0 25%, #fff0 0 100%), 
		linear-gradient(31deg, #fff0 60%, var(--luz2) 61%), 
		linear-gradient(31deg, #fff0 20%, var(--luz2) 21%), 
		linear-gradient(31deg, var(--luz1) 65%, var(--luz2) 21%), 
		linear-gradient(90deg, var(--luz1) 19.5%, #fff0 19.5% 20%, var(--luz1) 20.5% 39.5%, #fff0 40% 61%, var(--luz3) 61% 80.25%, #fff0 80% 81%, var(--luz2) 81% 100%); 
	background-size: 2.5% 51%, 19.5% 100%, 19.5% 100%, 19.5% 100%, 100% 100%;
	background-repeat: no-repeat;
	background-position: 79.75% 100%, 0 0, 25% 0, 75.4% 0, 0 0;
}

.floor .side:nth-of-type(3) {
	background: var(--lines-side), hsl(var(--hue) var(--sat) 75% / 0.5);
	background-size: 35.45% 100%;
}

.floor .side:nth-of-type(4) {
	background: var(--lines-side), hsl(var(--hue) var(--sat) 40% / 0.5);
	background-size: 35.45% 100%;
}




/*** ROOF ***/

.roof {    
	--height: 3;
	--width: 42;
	--depth: 100;
	bottom: 3vmin;
	left: 16vmin;
	transform: rotateY(-8deg) rotateX(5deg)  translateZ(-18vmin);
}

.roof.two { bottom: 13vmin; }
.roof.three { bottom: 23vmin; }
.roof.four { bottom: 33vmin; }
.roof.five { bottom: 43vmin; }
.roof.six { bottom: 53vmin; }
.roof.seven { bottom: 63vmin; }
.roof.eight { bottom: 73vmin; }




/*** AIR COOLER ***/

.air-cooler {
	--height: 3.9;
	--width: 10;
	--depth: 52;
	bottom: 78.5vmin;
	left: 25vmin;
}

.air-cooler + .air-cooler {
	--height: 2.4;
	--width: 5;
	--depth: 20;
	bottom: 78.5vmin;
	left: 42vmin;
	transform: rotateY(-8deg) rotateX(5deg) translateZ(-7vmin);
}

.air-cooler .side:nth-of-type(1) {
	border: 1px solid #0002;
}

.air-cooler .side:nth-of-type(1):before {
	content: "";
	width: calc(100% - 1vmin);
	height: calc(100% - 1vmin);
	position: absolute;
	background: repeating-linear-gradient(180deg, #000, #0a0d29 , #434770cc);
	margin: 0.5vmin;
	background-size: 100% 25%;
}




/*** WINDOWS ***/

span {
	background: linear-gradient(32deg, #fff0 17%, var(--luz2) 19%), var(--luz1);
	position: absolute;
	width: 20%;
	height: 100%;
	left: 20%;
}


/* F 2 */
.floor.two .side span:before ,
.floor.five .side span:before {
	content: "";
	position: absolute;
	width: calc(100% + 2px);
	height: 30%;
	top: -1px;
	left: -1px;
	background: repeating-linear-gradient(180deg, black, #383e70);
	background-size: 100% 0.35vmin;
	box-shadow: 0.01vmin 0.75vmin 0.15vmin 0.125vmin #0005 inset;
}




/*** BLINDS ***/

.floor .side:nth-of-type(1):before, .floor .side:nth-of-type(1):after, 
.floor .side:nth-of-type(3):before, .floor .side:nth-of-type(3):after {
	position: absolute;
	content: "";
	width: 40%;
	height: 100%;
	left: 20%;
	background: repeating-linear-gradient(180deg, #101010, transparent), repeating-linear-gradient(90deg, #383e70 0 calc(100% - 0.25vmin), var(--frame) calc(100% - 0.25vmin) 100%);
	background-size: 100% 0.365vmin, 8vmin 100%;
}

.floor .side:nth-of-type(1):after {
	width: 20%;
	left: 80.25%;

}


/* F 1 */
.floor.one .side:nth-of-type(1):before, 
.floor.one .side:nth-of-type(1):after {
	box-shadow: 0vmin 0.65vmin 0.25vmin 0.25vmin #0006 inset;
}
.floor.one .side:nth-of-type(1):after {
	box-shadow: 0vmin 0.65vmin 0.25vmin 0.25vmin #0006 inset, -7.75vmin 0 0 0 #0a0a0a;
}



/* F 2 */
.floor.two .side:nth-of-type(1):before {
	width: 59.5%;
	left: 40.75%;
	box-shadow: 0.2vmin 0.5vmin 0.25vmin 0.25vmin #0006 inset;
}
.floor.two .side:nth-of-type(1):after {
	width: 20%;
	left: -1px;
	box-shadow: none;
	box-shadow: 0vmin 0.65vmin 0.25vmin 0.25vmin #0006 inset;
	background-color: #3d4176;
}



/* F 3 */
.floor.three .side:nth-of-type(1):after {
	background: #1c1f3e;
	left: 40.25%;
	width: 19.75%;
	box-shadow: 0.2vmin 0.525vmin 0.5vmin 0.125vmin #0006 inset;
}

.floor.three .side:nth-of-type(1):before {
	display: none;
}


/* F 4 */
.floor.four .side:nth-of-type(1):before,
.floor.eight .side:nth-of-type(1):before {
	position: absolute;
	content: "";
	width: 60%;
	height: 100%;
	left: 40%;
	--luz1: #434770;
	--lines-front: repeating-linear-gradient(90deg, var(--luz1) 0% calc(100% - 0.275vmin), var(--frame) calc(100% - 0.275vmin) 100%);
	background: repeating-linear-gradient(90deg, black, transparent), linear-gradient(91deg, #fff0 35%, #000 calc(36% + 1px) 52%, #fff0 52%), linear-gradient(-91deg, #fff0 36%, #000 calc(37% + 1px) 55%, #fff0 55%), var(--lines-front), repeating-linear-gradient(90deg, #364e69, #141f59);
	background-size: 0.35vmin 100%, 100% 100%, 100% 100%, 33.6% 100%, 4% 100%;
	z-index: 1;
}

.floor.four .side:nth-child(1):after {
	box-shadow: 0.05vmin 0.7vmin 0.25vmin 0.125vmin #0006 inset, 7.5vmin -7.3vmin 0 0 #0a0d29;
	left: -1px;
	width: 81%;
}

.floor.four .side:nth-of-type(1):before {
	background: repeating-linear-gradient(90deg, black, transparent), linear-gradient(94deg, #fff0 41%, #000 calc(42% + 1px) 52%, #fff0 52%), linear-gradient(-95deg, #fff0 45%, #000 calc(46% + 1px) 55%, #fff0 55%), var(--lines-front), repeating-linear-gradient(90deg, #364e69, #141f59);
	background-size: 0.375vmin 100%, 100% 100%, 100% 100%, 33.6% 100%, 4% 100%;
	left: 0;
}

.roof.four .side:nth-child(1):before {
	content: "";
	position: absolute;
	width: 25%;
	height: 3vmin;
	top: -3vmin;
	left: 25vmin;
	background: radial-gradient(circle at 13% 98%, var(--luz3) 0.5vmin, #fff0 calc(0.5vmin + 1px)), radial-gradient(circle at 11% 79%, var(--luz3) 0.25vmin, #fff0 calc(0.25vmin + 1px)), radial-gradient(circle at 16% 84%, var(--luz3) 0.125vmin, #fff0 calc(0.125vmin + 1px)), radial-gradient(circle at 21% 95%, var(--luz3) 0.25vmin, #fff0 calc(0.25vmin + 1px)), radial-gradient(circle at 25% 98%, var(--luz3) 0.25vmin, #fff0 calc(0.25vmin + 1px)), radial-gradient(circle at 28% 91%, var(--luz3) 0.175vmin, #fff0 calc(0.175vmin + 1px)), radial-gradient(circle at 30% 84%, var(--luz3) 0.175vmin, #fff0 calc(0.175vmin + 1px)), radial-gradient(circle at 10% 70%, var(--luz3) 0.175vmin, #fff0 calc(0.175vmin + 1px));
	background-repeat: no-repeat;
	filter: drop-shadow(2vmin 0vmin 0px var(--luz3)) drop-shadow(3vmin 0vmin 0px var(--luz3));
}


/* F 5 */
.floor.five .side:nth-of-type(1):before {
	width: 19.25%;
	left: 40.75%;
}

.floor.five .side:nth-child(1) span:after {
	content: "";
	position: absolute;
	width: 2vmin;
	height: 2vmin;
	top: 4.85vmin;
	left: 29.7vmin;
	background: var(--luz3);
	background-size: 100% 0.35vmin;
	box-shadow: -2px -20.1vmin 0 0 var(--luz3);
	color: #601d44;
	z-index: 3;
	transform: translateZ(1.8vmin);
}

.floor.five .side:nth-of-type(1):after {
	display: none;
}

.roof.five .side:nth-child(-n+4):before {
	content: "";
	position: absolute;
	width: 100%;
	height: 3vmin;
	top: -3vmin;
	background: var(--dot3), var(--dot2), var(--dot1), var(--dot1), var(--dot1), var(--dot1), var(--dot1), var(--dot1);
	background-position: -16.2vmin 1.825vmin, -16.7vmin 0.5vmin, -15.72vmin 0.65vmin, -17.57vmin 0.5vmin, -17.2vmin 0.25vmin, -16.5vmin 0.1vmin , -17.4vmin 0.95vmin, -15.175vmin 0.95vmin;
	background-repeat: no-repeat;
	filter: drop-shadow(16px 0px 0px var(--bush)) drop-shadow(24vmin 0px 0px var(--bush)) drop-shadow(8vmin 0px 0px var(--bush));
}


/* F 6 */
.floor.six .side:nth-of-type(1):before {
	left: -0.1vmin;
	box-shadow: 0.025vmin 0.7vmin 0.25vmin 0.125vmin #0006 inset;
	width: 40.25%;
	background: repeating-linear-gradient(90deg, #101010, transparent), repeating-linear-gradient(90deg, #383e70 0 calc(100% - 0.25vmin), var(--frame) calc(100% - 0.25vmin) 100%);
	background-size: 0.25vmin 100%, 8vmin 100%;
}

.floor.six .side:nth-of-type(1):after {
	left: 60%;
	width: 40%;
	background: repeating-linear-gradient(90deg, #101010, transparent), repeating-linear-gradient(90deg, #383e70 0 calc(100% - 0.25vmin), var(--frame) calc(100% - 0.25vmin) 100%);
	background-size: 0.25vmin 100%, 8vmin 100%;
}

.floor.six .side span {
	left: 40.5%;
	width: 19%;
	background: #0a0a0a;
}


/* F 7 */
.floor.seven .side:nth-of-type(1):after {
	display: none;
}

.floor.seven .side:nth-of-type(1):before {
	box-shadow: 0.15vmin 0.65vmin 0.25vmin 0.125vmin #0006 inset;
}


/* F 8 */
.floor.eight .side:nth-of-type(1):after {
	width: 60%;
	left: 40%;
	box-shadow: 0.025vmin 0.65vmin 0.5vmin 0.25vmin #0006 inset;
	background: repeating-linear-gradient(180deg, black, transparent);
	background-size: 100% 4%;
}






/***  RIGHT SIDE  ***/

.floor .side:nth-of-type(3):before,
.floor .side:nth-of-type(3):after{
	width: 33.95%;
	box-shadow: 0.025vmin 1.75vmin 0.4vmin 0.125vmin #0006 inset;
	background-size: 100% 0.365vmin, 33vmin 100%;
	filter: brightness(1.25);
}

/* F 1 */
.floor.one .side:nth-of-type(3):before,
.floor.two .side:nth-of-type(3):before {
	left: 0;
}
.floor.one .side:nth-of-type(3):after,
.floor.two .side:nth-of-type(3):after {
	left: 35.25%;
}


/* F 2 */
.floor.two .side:nth-of-type(3) span,
.floor.four .side:nth-of-type(3) span {
	left: 71%;
	width: 29%;
	background: linear-gradient(-5deg, #fff0 76%, var(--luz2) calc(76% + 1px)), var(--luz1);
}
.floor.two .side:nth-of-type(3) span:before {
	width: 5vmin;
	bottom: 0.8vmin;
	top: inherit;
	background: var(--luz2);
	box-shadow: none;
	left: 10vmin;
}


/* F 3 */
.floor.three .side:nth-of-type(3):before, .floor.three .side:nth-of-type(3):after {
	left: 70.75%;
	width: 29.25%;
}

.floor.three .side:nth-of-type(3) span {
	width: 69.5%;
	left: 0;
	background: #fff0;
}

.floor.three .side:nth-of-type(3) span:before,
.floor.three .side:nth-of-type(3) span:after {
	content: "";
	position: absolute;
	width: 48.5%;
	height: 100%;
	left: 0;
	background: linear-gradient(175.25deg, var(--luz2) 51.5%, var(--luz3) calc(51.5% + 1px)), var(--luz1);
}

.floor.three .side:nth-of-type(3) span:after {
	left: 51%;
	background: linear-gradient(175.25deg, var(--luz2) 25%, var(--luz3) calc(25% + 1px)), var(--luz1);
}



/* F 4 */
.floor.four .side:nth-of-type(3):before, .floor.four .side:nth-of-type(3):after {
	left: 35.25%;
	background: repeating-linear-gradient(90deg, #1d1e26, transparent), repeating-linear-gradient(90deg, #383e70 0 calc(100% - 0.25vmin), var(--frame) calc(100% - 0.25vmin) 100%);
	background-size: 2.5vmin 100%, 33vmin 100%;
}

.floor.four .side:nth-of-type(3):after {
	left: 0%;
	background: var(--luz3);
	box-shadow: none;
}

.floor.four .side:nth-of-type(3) span:before {
	content: "";
	position: absolute;
	width: 2vmin;
	bottom: -0.85vmin;
	border: 2.25vmin solid #fff0;
	border-left: 5.5vmin solid var(--luz2);
	border-top: 0.5vmin solid #fff0;
	left: 6.5vmin;
	height: 1vmin;
	border-radius: 100%;
	transform: rotate(-9deg);
	filter: drop-shadow(0px 2px 0px var(--luz2));
}

.floor.four .side:nth-of-type(3) span:after {
	content: "";
	position: absolute;
	width: 3.5vmin;
	bottom: 2.55vmin;
	background: var(--luz2);
	left: 12.02vmin;
	height: 0.65vmin;
	border-radius: 100%;
}



/* F 5 */
.floor.five .side:nth-of-type(3):before,
.floor.seven .side:nth-of-type(3):before {
	left: 35.25%;
	width: 34.25%;
	top: -1px;
	background: #2c315a;
	box-shadow: -1.975vmin 1.75vmin 1.5vmin 0.125vmin #0005 inset, 0.025vmin 1.75vmin 0.4vmin 0.125vmin #0002 inset;
}

.floor.five .side:nth-of-type(3):after,
.floor.seven .side:nth-of-type(3):after {
	left: 70.75%;
	width: 29.25%;
	top: -1px;
	background: #2c315a;
	box-shadow: -1.975vmin 1.75vmin 1.5vmin 0.125vmin #0005 inset, 0.025vmin 1.75vmin 0.4vmin 0.125vmin #0002 inset;
}

.roof.five .side:nth-child(3):before {
	filter: drop-shadow(3vmin 0px 0px var(--bush)) drop-shadow(6vmin 0px 0px var(--bush))  drop-shadow(10vmin 0px 0px var(--bush)) drop-shadow(-30vmin 0px 0px var(--bush))  drop-shadow(30vmin 1px 0px var(--bush)) drop-shadow(25px -2px 0px var(--bush)) drop-shadow(25px 0px 0px var(--bush));
}

.floor.five .side:nth-of-type(3) span,
.floor.seven .side:nth-of-type(3) span {
	left: 0%;
	width: 33.5%;
	background: conic-gradient(from 180deg at 70% 40%, var(--luz3) 0 23.65%,  var(--luz2) 0 100% );
}

.floor.five .side:nth-of-type(3) span:before {
	display: none;
	left: 0%;
	bottom: 2vmin;
	top: inherit;
	width: 66%;
	background: var(--luz3);
	box-shadow: none;
}



/* F 6 */
.floor.six .side:nth-of-type(3):before,
.floor.six .side:nth-of-type(3):after  {
	left: 0;
	background: repeating-linear-gradient(90deg, #1d1e26, transparent), repeating-linear-gradient(90deg, #383e70 0 calc(100% - 0.25vmin), var(--frame) calc(100% - 0.25vmin) 100%);
	background-size: 1.85vmin 100%, 33vmin 100%;
}

.floor.six .side:nth-of-type(3):after {
	left: 35.25%;
}



/* F 8 */
.floor.eight .side:nth-of-type(3):before {
	left: 0;
	background: repeating-linear-gradient(90deg, #101010, transparent), repeating-linear-gradient(90deg, #383e70 0 calc(100% - 0.25vmin), var(--frame) calc(100% - 0.25vmin) 100%);
	background-size: 2.55vmin 100%, 33vmin 100%;
}

.floor.eight .side:nth-of-type(3):after {
	left: 64vmin;
	bottom: -19.85vmin;
	width: 29.65%;
	background: repeating-linear-gradient(90deg, #1d1e26, transparent), repeating-linear-gradient(90deg, #383e70 0 calc(100% - 0.25vmin), var(--frame) calc(100% - 0.25vmin) 100%);
	background-size: 1.85vmin 100%, 33vmin 100%;
}

.floor.eight .side:nth-of-type(3) span {
	width: 66%;
	left: 36%;
	background: linear-gradient(32deg, #fff0 17%, var(--luz2) 19%), var(--luz1);
	background: #fff0;
	background: radial-gradient(ellipse at 30% 72%, var(--luz2) 2.5vmin, #fff0 3.5vmin), radial-gradient(circle at 30% 72%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(circle at 34% 73%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(circle at 32% 75%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(circle at 25% 75%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(circle at 21% 80%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(ellipse at 73% 72%, var(--luz2) 3.5vmin, #fff0 4.5vmin), radial-gradient(circle at 69% 70%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(circle at 75% 73%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(circle at 65% 75%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(circle at 82% 75%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(circle at 78% 74%, var(--luz2) 1vmin, #fff0 1vmin);
	background-repeat: no-repeat;
}

.floor.eight .side:nth-of-type(3) span:before, .floor.eight .side:nth-of-type(3) span:after {
	content: "";
	position: absolute;
	width: 50.75%;
	height: 100%;
	left: -5px;
	background: linear-gradient(-5deg, #fff0 48.5%, var(--luz2) calc(48.5% + 1px));
}

.floor.eight .side:nth-of-type(3) span:after {
	content: "";
	position: absolute;
	width: 43%;
	height: 100%;
	left: 53%;
	background: linear-gradient(-5deg, #fff0 75%, var(--luz2) calc(75% + 1px));
}




/*** MAN ***/
i.man {
	background: radial-gradient(circle at 50% 0.4vmin, var(--bush) 0 0.35vmin, #fff0 calc(0.35vmin + 1px) 100%),radial-gradient(circle at 50% 0.35vmin, #0c0d1c 0 0.35vmin, #fff0 calc(0.35vmin + 1px) 100%), conic-gradient(from 137deg at 50% 0.51vmin, var(--bush) 0 25%, #fff0 0 100%);
	width: 1.5vmin;
	height: 3.5vmin;
	position: absolute;
	bottom: 1.25vmin;
	left: 10.5vmin;
	z-index: 1;
	transform: rotate(-1deg);
	border-radius: 1vmin 100% 0 0;
}

i.man:before {
	content: "";
	background: var(--bush);
	width: 1vmin;
	height: 1vmin;
	border-radius: 0.3vmin;
	position: absolute;
	bottom: 1.25vmin;
	left: -0.25vmin;
	transform: rotate(55deg);
}  

i.man:after {
	content: "";
}

.eight .side i.man {
	left: 39.75vmin;
	bottom: 0vmin;
	--bush: #363a5c;
	transform: translateZ(-90vmin);
	filter: drop-shadow(1.2px 0px 0px #7d83bfcc);
	color: #7d83bfcc;
	background: radial-gradient(circle at 55% 0.9vmin, var(--bush) 0 0.35vmin, #fff0 calc(0.375vmin + 1px) 100%),radial-gradient(circle at 35% 0.8vmin, #0a0d29 0 0.5vmin, #fff0 calc(0.5vmin + 1px) 100%), conic-gradient(from 145deg at 50% 1.2vmin, var(--bush) 0 25%, #fff0 0 100%);
	height: 4.5vmin;
	width: 1.125vmin;
}

.eight .side i.man:before {
	transform: rotate(-19deg);
	border-right: 1px solid #ffffffab;
	left: 0.125vmin;
	width: 0.45vmin;
	height: 1.85vmin;
	background: var(--frame);
	opacity: 0.5;
	bottom: 1.125vmin;
}



/*** CAT ***/
i.cat {
	background: radial-gradient(circle at 50% 26%, var(--bush) 0 0.35vmin, #fff0 calc(0.35vmin + 1px) 100%), conic-gradient(from 125deg at 100% 0, var(--bush) 0 25%, #fff0 0 100%), conic-gradient(from 136deg at 0 0, var(--bush) 0 25%, #fff0 0 100%);
	width: 0.75vmin;
	height: 2.5vmin;
	position: absolute;
	bottom: 1.25vmin;
	left: 2.3vmin;
	transform: scale(0.85);
}

i.cat:before {
	content: "";
	background: var(--bush);
	width: 1.8vmin;
	height: 1.95vmin;
	border-radius: 100% 39% 0 0;
	position: absolute;
	bottom: -0.35vmin;
	left: -1vmin;
}  

i.cat:after {
	content: "";
	background: #fff0;
	width: 1.65vmin;
	height: 1.75vmin;
	border-radius: 100%;
	border-left: 0.35vmin solid var(--bush);
	border-bottom: 0.35vmin solid #fff0;
	border-top: 0.15vmin solid #fff0;
	position: absolute;
	bottom: 0.15vmin;
	left: -1.25vmin;
	transform: rotate(-20deg);
}

i.cat + i.cat {
	transform: rotateY(180deg) scale(0.9);
	left: 4vmin;
}

i.cat + i.cat:after {
	transform: rotate(-27deg) rotateY(180deg);
	left: -2.6vmin;
	bottom: -0.2vmin;
}





/*** FLOWERS ***/
i.flowers {
	background: var(--luz3);
	width: 70%;
	height: 1vmin;
	position: absolute;
	bottom: 1vmin;
	left: 15%;
}

i.flowers:before {
	content: "";
	position: absolute;
	background: var(--luz3);
	width: 0.75vmin;
	height: 2vmin;
	bottom: 0;
	left: 60%;
}

i.flowers:after {
	content: "";
	position: absolute;
	background: conic-gradient(from -22deg at 50% 100%, var(--luz3) 0 2%, #fff0 0 5%, var(--luz3) 0 7%, #fff0 0 10%, var(--luz3) 0 12%, #fff0 0 100%), 
		radial-gradient(circle at 50% 0.25vmin, var(--luz3) 0 0.25vmin, #fff0 0 100%), 
		radial-gradient(circle at 25% 0.45vmin, var(--luz3) 0 0.25vmin, #fff0 0 100%), 
		radial-gradient(circle at 80% 0.4vmin, var(--luz3) 0 0.25vmin, #fff0 0 100%);
	width: 1.5vmin;
	height: 1.5vmin;
	bottom: 1.5vmin;
	left: 52%;
}



/*** CACTUS ***/
i.cactus {
	background: var(--bush);
	width: 0.85vmin;
	height: 2vmin;
	position: absolute;
	bottom: 3vmin;
	left: 3px;
	border-radius: 100% 100% 10% 45%;
	transform: rotate(-2deg);
}

i.cactus:before {
	content: "";
	position: absolute;
	background: var(--bush);
	width: 0.75vmin;
	height: 2vmin;
	bottom: 1.4vmin;
	left: -0.35vmin;
	border-radius: 100%;
}

i.cactus:after {
	content: "";
	position: absolute;
	background: var(--bush);
	width: 0.5vmin;
	height: 1.5vmin;
	bottom: 3vmin;
	left: 0.075vmin;
	border-radius: 100%;
	box-shadow: -0.6vmin 0.2vmin 0 -0.075vmin var(--bush), 0.4vmin 1.5vmin 0 -0.075vmin var(--bush);
}

.roof.six .cactus {
	left: 90%;
	transform: rotateY(60deg) rotate(-1deg);
	border-radius: 0% 100%;
	filter: drop-shadow(-2px 1px 0px #434770cc);
}




/*** CACTUS 2 ***/
i.cactus2 {
	background: var(--luz3);
	width: 0.45vmin;
	height: 4vmin;
	position: absolute;
	bottom: 1vmin;
	left: 27vmin;
	border-radius: 100% 100% 0 0;
	transform: rotate(-7deg);
}

i.cactus2:before {
	content: "";
	position: absolute;
	background: #fff0;
	width: 0.75vmin;
	height: 1vmin;
	bottom: 1vmin;
	left: -0.5vmin;
	border-radius: 0 0 100% 100%;
	border: 0.5vmin solid var(--luz3);
	border-top-color: #fff0;
	border-left-width: 0.35vmin;
}

i.cactus2:after {
	content: "";
	position: absolute;
	background: var(--luz3);
	width: 0.4vmin;
	height: 0.75vmin;
	bottom: 3.2vmin;
	left: -0.05vmin;
	border-radius: 100%;
	box-shadow: -0.555vmin 0.75vmin 0 0 var(--luz3), 0.75vmin 0.65vmin 0 0 var(--luz3);
}

i.cactus2 + i.cactus2 {
	transform: scale(0.85) translate(-2.25vmin, -0.1vmin) rotate(-5deg) rotateY(180deg);
}



/*** BUSH ***/
i.bush {
	background: var(--bush);
	width: 0.95vmin;
	height: 2vmin;
	position: absolute;
	bottom: 3vmin;
	left: 3px;
	border-radius: 100% 100% 10% 45%;
	transform: rotate(-2deg);
}

i.bush:before {
	content: "";
	position: absolute;
	background: var(--bush);
	width: 0.5vmin;
	height: 1.25vmin;
	bottom: 0.4vmin;
	left: -0.3vmin;
	border-radius: 100%;
	transform: rotate(-24deg);
}

i.bush:after {
	content: "";
	position: absolute;
	background: var(--bush);
	width: 0.5vmin;
	height: 1.5vmin;
	bottom: 1.7vmin;
	left: -0.075vmin;
	border-radius: 100%;
	box-shadow: -0.36vmin 0.5vmin 0 -0.075vmin var(--bush), 0.4vmin 0.75vmin 0 -0.025vmin var(--bush), 0.3vmin 0.25vmin 0 -0.025vmin var(--bush);
	transform: rotate(-16deg);
}

.roof.two .side:nth-child(1) i.bush {
	filter: drop-shadow(19px 6px 0px var(--luz2));
	transform: translateZ(-1vmin);
}

.roof.two .side:nth-child(3) i.bush {
	left: 91%;
	bottom: 2.95vmin;
	transform: rotateY(128deg);
	border-radius: 100% 100% 10% 40%;
	filter: drop-shadow(0.85vmin 11vmin 0px var(--bush)) drop-shadow(-2px -1px 0px #5a5d85);
}

.roof.four .side:nth-child(1) i.bush {
	transform: rotateY(180deg) scale(0.85) scaleX(0.65) rotate(92deg);
	border-radius: 100% 100% 10% 40%;
	bottom: 2.35vmin;
	left: 4px;
	filter: drop-shadow(45.55vmin -7px 0px var(--bush)) drop-shadow(-11.75vmin 2px 0px var(--bush));
}

.roof.six .side:nth-child(1) i.bush {
	transform: rotateY(180deg) scaleY(1.5) scaleX(0.65) rotate(92deg);
	border-radius: 100% 100% 10% 40%;
	bottom: 2.75vmin;
	left: 5px;
	filter: drop-shadow(40vmin 0 0px var(--bush)) drop-shadow(12.95vmin -1px 0px var(--bush));
}




/*** PLANTS ***/
i.plant {
	position: absolute;
	background: linear-gradient(90deg, #fff0 38%, var(--luz2) 38% 61%, #fff0 61%), linear-gradient(180deg, #fff0 40%, var(--luz2) 45%);
	width: 1vmin;
	height: 3.5vmin;
	bottom: 0vmin;
	left: 5vmin;
	filter: drop-shadow(6vmin 0.5vmin 0px var(--luz3)) drop-shadow(8vmin 0.25vmin 0vmin var(--luz3)) drop-shadow(7vmin -0.25vmin 0vmin var(--luz3));
}

i.plant:before, i.plant:after {
	content: "";
	position: absolute;
	background: var(--luz2);
	width: 0.275vmin;
	height: 1vmin;
	transform: rotate(-45deg);
	border-radius: 100% 100% 0 0;
	box-shadow: 4px -4px 0 -0.05vmin var(--luz2);
	bottom: 2.25vmin;
}

i.plant:after {
	transform: rotateY(180deg) rotate(-45deg) translate(-0.65vmin, -0.35vmin);
}

.seven i.plant {
	left: 77%;
	--luz2: var(--luz3);
	filter: drop-shadow(-1.95vmin 0.5vmin 0px var(--luz3)) drop-shadow(-4vmin -0.75vmin 0vmin var(--luz3)) drop-shadow(-3vmin 0.25vmin 0vmin var(--luz3));
	transform: rotateY(180deg) scale(0.85);
}

.seven i.plant:after {
	--luz2: var(--luz3);
	box-shadow: 4px -4px 0 -0.05vmin var(--luz2), 8px -3px 0 -0.05vmin var(--luz2);
}




/*** LIGHTS ***/
.lights {
	position: absolute;
	width: 52vmin;
	height: 75vmin;
	--foco: radial-gradient(circle at 50% 50%, var(--luz1) 0 0.1vmin, #fff0 calc(0.1vmin + 1px) 100%);
	transform: rotateY(-8deg) rotateX(0deg) translateZ(22vmin) translateX(3vmin);
	background:	
		var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), 
		var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), 
		var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco),
		var(--foco), var(--foco),
		var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco),
		var(--foco),
		var(--foco), var(--foco);
	background-position: 
		6% 1%, 21% 1%, 11.5% 3.5%, 26% 3.5%, 90% 8%, 17% 6%,   
		6% 15%, 11.5% 17%, 53.5% 15%, 58.5% 17%, 72.5% 17%, 67.5% 15%,  
		6% 42%, 53.5% 42%, 67.5% 42%, 11.5% 44.25%, 26% 44%, 58.5% 44%, 72.5% 44%, 17% 46.5%, 63.5% 46.25%,
		67.6% 55%, 73% 57%,
		6% 68.5%, 21% 68.5%, 54% 68.5%, 68% 68.5%, 11.5% 71%, 27% 71%, 58.5% 71%, 73% 71%, 18% 73.5%, 64.5% 73.5%,
		16.5% 86%,
		6% 95.5%, 11.5% 98%;
	background-repeat: no-repeat;
	background-size: 1vmin 1vmin;
}



/*** BUTTON ***/
input { display: none; }

label {
	position: absolute;
	right: 3vmin;
	bottom: 3vmin;
	width: 13vmin;
	height: 5vmin;
	background: #0008;
	border-bottom: 1px solid #fff8;
	border-top: 1px solid #000;
	border-radius: 4vmin;
	cursor: pointer;
	z-index: 3;
}

label:before {
	content: "";
	position: absolute;
	width: 12vmin;
	height: 4vmin;
	background: radial-gradient(circle at 50% 48%, #ffbf00 calc(2vmin - 1px), #fff0 2vmin), radial-gradient(circle at 90% 42%, #fff0 2.5vmin, #e6e6e6 calc(2.5vmin + 1px));
	border-radius: 2vmin;
	left: 0.6vmin;
	top: 0.325vmin;
	transition: all 0.4s ease 1s;
	background-repeat: no-repeat;
	background-size: 4.25vmin 4.25vmin, 4.15vmin 4.15vmin;
	background-position: 7.85vmin 0, 0vmin 0vmin;
}

label:after {
	content: "";
	position: absolute;
	width: 6vmin;
	height: 6vmin;
	border-radius: 100%;
	left: -0.95vmin;
	top: -1.1vmin;
	transition: all 1s var(--cbz) 0s;
	border: 0.5vmin solid #fffc;
	box-shadow: 0 0 1vmin 0 #fffc, 0 0 1vmin 0 #fffc inset;
}

input#day-night:checked + label:after {
	border-color: #ffc71e;
	box-shadow: 0 0 1vmin 0.25vmin #ffc71e, 0 0 1vmin 0.25vmin #ffc71e inset;
}

input#day-night:checked + label:after {
	left: 6.95vmin;
	transition: all 1s var(--cbz) 0s;
}


.clouds {
	position: absolute;
	top: 75vh;
	width: 100vw;
	height: 100%;
	background: radial-gradient(ellipse at 10% 23%, #fff1 4vmin, #fff0 15vmin),radial-gradient(ellipse at 0% 15%, #fff1 4vmin, #fff0 8vmin), radial-gradient(circle at 6% 17%, #fff1 4vmin, #fff0 8vmin), radial-gradient(ellipse at 4% 16%, #fff1 1vmin, #fff0 5vmin), radial-gradient(circle at 9% 16%, #fff1 1vmin, #fff0 5vmin), radial-gradient(ellipse at 12% 18%, #fff1 1vmin, #fff0 5vmin), radial-gradient(circle at 17% 19%, #fff1 2vmin, #fff0 6vmin), radial-gradient(ellipse at 13% 13%, #fff1 1vmin, #fff0 6vmin), radial-gradient(ellipse at 22% 20%, #fff1 2vmin, #fff0 8vmin), radial-gradient(circle at 4% 22%, #fff1 0vmin, #fff0 4vmin), radial-gradient(circle at 7% 24%, #fff1 0vmin, #fff0 4vmin), radial-gradient(ellipse at 10% 22%, #fff1 0vmin, #fff0 4vmin), radial-gradient(circle at 30% 19%, #fff2 0vmin, #fff0 13vmin), radial-gradient(circle at 26% 13%, #fff1 0vmin, #fff0 4vmin), radial-gradient(circle at 33% 15%, #fff1 -3vmin, #fff0 7vmin), radial-gradient(circle at 45% 19%, #fff1 4vmin, #fff0 14vmin), radial-gradient(circle at 38% 20%, #fff1 -3vmin, #fff0 7vmin), radial-gradient(circle at 52% 20%, #fff1 0vmin, #fff0 6vmin), radial-gradient(circle at 56% 15%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 58% 18%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 41% 26%, #fff1 2vmin, #fff0 8vmin), radial-gradient(circle at 60% 15%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 63% 12%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 63% 21%, #fff1 4vmin, #fff0 15vmin), radial-gradient(circle at 60% 25%, #fff1 2vmin, #fff0 7vmin), radial-gradient(ellipse at 63% 20%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 71% 25%, #fff1 2vmin, #fff0 9vmin), radial-gradient(ellipse at 84% 22%, #fff1 -1vmin, #fff0 8vmin), radial-gradient(ellipse at 78% 25%, #fff1 -1vmin, #fff0 10vmin), radial-gradient(ellipse at 90% 18%, #fff1 -1vmin, #fff0 10vmin), radial-gradient(ellipse at 93% 17%, #fff1 2vmin, #fff0 11vmin), radial-gradient(circle at 79% 17%, #fff1 -3vmin, #fff0 7vmin), radial-gradient(ellipse at 73% 12%, #fff1 -3vmin, #fff0 6vmin), radial-gradient(ellipse at 68% 15%, #fff1 -2vmin, #fff0 9vmin), radial-gradient(ellipse at 95% 25%, #fff1 -2vmin, #fff0 9vmin), radial-gradient(ellipse at 98% 26%, #fff1 -2vmin, #fff0 9vmin), radial-gradient(ellipse at 90% 23%, #fff1 -2vmin, #fff0 9vmin);
	transform: translateZ(-100vmin);
	transition: all 3s var(--cbz) 0s;
	opacity: 0.6;
}

.clouds span {
	opacity: 0;
}

input#day-night:checked ~ .content .clouds {
	top: -10vh;
	transition: all 3s var(--cbz) 0s;
	opacity: 1;
	filter: drop-shadow(1vmin -1vmin 1vmin #fff) drop-shadow(-1vmin 1vmin 5vmin #fff) drop-shadow(20vmin 5vmin 5vmin #fff) drop-shadow(-10vmin -1vmin 3vmin #fff);
}

input#day-night:checked ~ .content {
	transition: --glass 3s;
	--glass: 200deg;
}
              
            
!

JS

              
                // Inspired by illustrator Paul Blow's "Love in the Time of Corona".
// https://paulblow.bigcartel.com/product/love-in-the-time-of-corona
              
            
!
999px

Console