Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

              
                audio#a
	source(
		src="https://rawcdn.githack.com/ricardoolivaalonso/Codepen/cc4996b50006214d2f3a1e8059bee90a7455d298/Space/audio.mp3",
		type="audio/mpeg"
	)
#h.main
	.shadows
		.reflex.reflex-04
		.shadow.shadow-01
		.shadow.shadow-02
		.reflex.reflex-02
		.reflex.reflex-03
		.light.light-04
		.light.light-01
		.light.light-02
		.light.light-03
		.light.light-05
		.light.light-06
		.light.light-07
		.reflex.reflex-01

	.floor-bottom
		.floor-bottom__front.face 
		.floor-bottom__back.face 
		.floor-bottom__right.face 
		.floor-bottom__left.face 
		.floor-bottom__top.face 
		.floor-bottom__bottom.face 
	.floor-a
		.floor-a__front.face 
		.floor-a__back.face 
		.floor-a__right.face 
		.floor-a__left.face 
		//- div.floor-a__top.face 
		//- div.floor-a__bottom.face     
	.floor-b
		.floor-b__front.face 
		.floor-b__back.face 
		.floor-b__right.face 
		.floor-b__left.face 
		//- div.floor-b__top.face 
		//- div.floor-b__bottom.face     
	.floor-c
		.floor-c__front.face 
		.floor-c__back.face 
		.floor-c__right.face 
		.floor-c__left.face 
		//- div.floor-c__top.face 
		//- div.floor-c__bottom.face     
	.floor-d
		.floor-d__front.face 
		.floor-d__back.face 
		.floor-d__right.face 
		.floor-d__left.face 
		//- div.floor-d__top.face 
		//- div.floor-d__bottom.face     
	.floor-top
		.floor-top__front.face 
		.floor-top__back.face 
		.floor-top__right.face 
		.floor-top__left.face 
		.floor-top__top.face 
			.lightft-02.lightft
			.lightft-03.lightft
			.lightft-09.lightft
			.lightft-04.lightft
			.lightft-05.lightft
			.lightft-06.lightft
			.lightft-07.lightft
			.lightft-08.lightft
			.lightft-10.lightft
			.lightft-11.lightft
			.lightft-12.lightft
			.lightft-01.lightft
		.floor-top__bottom.face 

	.wall-left
		.wall-left__front.face 
		.wall-left__back.face 
		.wall-left__right.face 
		.wall-left__left.face 
		.wall-left__top.face 
		.wall-left__bottom.face 
	.wall-left0
		.wall-left0__front.face 
		.wall-left0__back.face 
		.wall-left0__right.face 
		//- div.wall-left0__left.face 
		.wall-left0__top.face 
		.wall-left0__bottom.face 
	.wall-left1
		.wall-left1__front.face 
		//- div.wall-left1__back.face 
		.wall-left1__right.face 
		//- div.wall-left1__left.face 
		.wall-left1__top.face 
		//- div.wall-left1__bottom.face  
	.wall-left2
		.wall-left2__front.face 
		.wall-left2__back.face 
		.wall-left2__right.face 
			.door
			.lightl2l-01.lightl2l
			.lightl2l-02.lightl2l
			.lightl2l-03.lightl2l
			.lightl2l-04.lightl2l
		//- div.wall-left2__left.face 
		.wall-left2__top.face 
		.wall-left2__bottom.face 

	.wall-back
		.wall-back__front.face 
		.wall-back__back.face 
		.wall-back__right.face 
		.wall-back__left.face 
		.wall-back__top.face 
		.wall-back__bottom.face 
	.wall-back0
		.wall-back0__front.face 
		//- div.wall-back0__back.face 
		.wall-back0__right.face 
		.wall-back0__left.face 
		.wall-back0__top.face 
		.wall-back0__bottom.face 
	.wall-back1
		.wall-back1__front.face 
		//- div.wall-back1__back.face 
		.wall-back1__right.face 
		.wall-back1__left.face 
		.wall-back1__top.face 
		//- div.wall-back1__bottom.face  
	.wall-back2
		.wall-back2__front.face 
			.lightb2b-01.lightb2b
			.lightb2b-02.lightb2b
		//- div.wall-back2__back.face 
		.wall-back2__right.face 
		.wall-back2__left.face 
		.wall-back2__top.face 
		//- div.wall-back2__bottom.face  

	//- 
	.door-left
		.door-left__front.face 
		.door-left__back.face 
		.door-left__right.face 
		//- div.door-left__left.face 
		.door-left__top.face 
		//- div.door-left__bottom.face  
	.door-right
		.door-right__front.face 
		.door-right__back.face 
		.door-right__right.face 
		//- div.door-right__left.face 
		.door-right__top.face 
		//- div.door-right__bottom.face  
	.door-top
		.door-top__front.face 
		.door-top__back.face 
		.door-top__right.face 
		//- div.door-top__left.face 
		.door-top__top.face 
		.door-top__bottom.face 
	.control
		.control__front.face 
		.control__back.face 
		.control__right.face 
			.screen
				.screen__button
				.screen__button
				.screen__button
				.screen__button
			.screen
				.screen__button.screen__button--yellow
				.screen__button
				.screen__button
				.screen__button
		//- div.control__left.face 
		.control__top.face 
		.control__bottom.face 

	.bed
		.bed__front.face 
		.bed__back.face 
		.bed__right.face 
		.bed__left.face 
		.bed__top.face 
		.bed__bottom.face 
	.mattress
		.mattress__front.face 
		.mattress__back.face 
		.mattress__right.face 
		.mattress__left.face 
		.mattress__top.face 
		.mattress__bottom.face 
	.stairs
		.stairs__front.face 
		.stairs__back.face 
		.stairs__right.face 
		.stairs__left.face 
		.stairs__top.face 
		.stairs__bottom.face 
	.column
		.column__front.face 
		.column__back.face 
		.column__right.face 
		.column__left.face 
		.column__top.face 
		.column__bottom.face 
	.steps
		- var n = 0;
		while n < 6
			.step
				.step__front.face 
				.step__back.face 
				.step__right.face 
				.step__left.face 
				.step__top.face 
				.step__bottom.face
			- n++;

	.kitchen-bottom
		.kitchen-bottom__front.face 
		.kitchen-bottom__back.face 
		.kitchen-bottom__right.face 
		.kitchen-bottom__left.face 
		.kitchen-bottom__top.face 
		.kitchen-bottom__bottom.face 
	.kitchen-top
		.kitchen-top__front.face 
		.kitchen-top__back.face 
		.kitchen-top__right.face 
		.kitchen-top__left.face 
		.kitchen-top__top.face 
		.kitchen-top__bottom.face 
	.kitchen-left
		.kitchen-left__front.face 
		.kitchen-left__back.face 
		.kitchen-left__right.face 
		.kitchen-left__left.face 
		.kitchen-left__top.face 
			.circle-k
			.circle-k
			.circle-k
			.circle-k
		.kitchen-left__bottom.face 
	.kitchen-right
		.kitchen-right__front.face 
		.kitchen-right__back.face 
		.kitchen-right__right.face 
		.kitchen-right__left.face 
		.kitchen-right__top.face 
			.circle-k
		.kitchen-right__bottom.face 
	.kitchen-center
		.kitchen-center__front.face 
		.kitchen-center__back.face 
		.kitchen-center__right.face 
		.kitchen-center__left.face 
		.kitchen-center__top.face 
		.kitchen-center__bottom.face 

	#block.block-a
		.block-a__front.face 
			.s1
				span sunny 20º
				svg.svg-icon(viewBox="0 0 20 20")
					path(
						fill="black",
						d="M5.114,5.726c0.169,0.168,0.442,0.168,0.611,0c0.168-0.169,0.168-0.442,0-0.61L3.893,3.282c-0.168-0.168-0.442-0.168-0.61,0c-0.169,0.169-0.169,0.442,0,0.611L5.114,5.726z M3.955,10c0-0.239-0.193-0.432-0.432-0.432H0.932C0.693,9.568,0.5,9.761,0.5,10s0.193,0.432,0.432,0.432h2.591C3.761,10.432,3.955,10.239,3.955,10 M10,3.955c0.238,0,0.432-0.193,0.432-0.432v-2.59C10.432,0.693,10.238,0.5,10,0.5S9.568,0.693,9.568,0.932v2.59C9.568,3.762,9.762,3.955,10,3.955 M14.886,5.726l1.832-1.833c0.169-0.168,0.169-0.442,0-0.611c-0.169-0.168-0.442-0.168-0.61,0l-1.833,1.833c-0.169,0.168-0.169,0.441,0,0.61C14.443,5.894,14.717,5.894,14.886,5.726 M5.114,14.274l-1.832,1.833c-0.169,0.168-0.169,0.441,0,0.61c0.168,0.169,0.442,0.169,0.61,0l1.833-1.832c0.168-0.169,0.168-0.442,0-0.611C5.557,14.106,5.283,14.106,5.114,14.274 M19.068,9.568h-2.591c-0.238,0-0.433,0.193-0.433,0.432s0.194,0.432,0.433,0.432h2.591c0.238,0,0.432-0.193,0.432-0.432S19.307,9.568,19.068,9.568 M14.886,14.274c-0.169-0.168-0.442-0.168-0.611,0c-0.169,0.169-0.169,0.442,0,0.611l1.833,1.832c0.168,0.169,0.441,0.169,0.61,0s0.169-0.442,0-0.61L14.886,14.274z M10,4.818c-2.861,0-5.182,2.32-5.182,5.182c0,2.862,2.321,5.182,5.182,5.182s5.182-2.319,5.182-5.182C15.182,7.139,12.861,4.818,10,4.818M10,14.318c-2.385,0-4.318-1.934-4.318-4.318c0-2.385,1.933-4.318,4.318-4.318c2.386,0,4.318,1.933,4.318,4.318C14.318,12.385,12.386,14.318,10,14.318 M10,16.045c-0.238,0-0.432,0.193-0.432,0.433v2.591c0,0.238,0.194,0.432,0.432,0.432s0.432-0.193,0.432-0.432v-2.591C10.432,16.238,10.238,16.045,10,16.045"
					)
			.s2.is-screen-hidden 
				span So you are a gossip too
				small ◠‿◠
		.block-a__back.face 
		.block-a__right.face 
		.block-a__left.face 
		.block-a__top.face 
		.block-a__bottom.face 
	.block-b
		.block-b__front.face 
		.block-b__back.face 
		.block-b__right.face 
		.block-b__left.face 
		.block-b__top.face 
		.block-b__bottom.face

              
            
!

CSS

              
                $unit: 1.75vmin;
//
$bg-1: darken(#181a19, 6);
$bg-2: darken($bg-1, 1);

$green-1: #546b5a;
$green-2: #344036;
$green-3: #242d2a;
$green-4: #191d20;
$green-5: darken(#111419, 3);

$white-1: #dfddd6;
$white-2: darken($white-1, 10);
$white-3: darken($white-2, 5);

$light-1: #ebe1b0;
$light-2: #84956c;
$light-3: #439483;

$neon: #abf1f1;
$orange: #ff9770;
$yellow: #e8fe84;

$gray-1: #b0b0b0;
$gray-2: darken($gray-1, 10);
$gray-3: darken($gray-2, 5);

$blue-1: #1896de;
$blue-2: #104d90;

$red-1: #e02e24;
$red-2: #70261d;
$red-3: #3e2823;

/***********************/
@mixin cylinder($base, $sides, $degree, $pi, $width, $color) {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;

	&__side {
		position: absolute;
		height: (2 * $pi * ($base / 2)) / $sides;
		width: $width;
		background-color: darken($color, 15);

		@for $var from 1 to ($sides + 1) {
			&:nth-of-type(#{$var}) {
				transform: rotateX($var * $degree / $sides) translateZ($base / 2);
			}
		}
		@for $var from 1 to 20 {
			&:nth-of-type(#{$var}) {
				background-color: darken($color, $var * 1);
			}
		}
		@for $var from 1 to 20 {
			&:nth-last-of-type(#{$var}) {
				background-color: darken($color, $var * 1);
			}
		}
	}
	&__top,
	&__bottom {
		position: absolute;
		width: $base;
		height: $base;
		border-radius: 50%;
		transform: rotateY(90deg) translateZ($width / 2);
	}
	&__bottom {
		transform: rotateY(90deg) translateZ($width / -2);
	}
}
@mixin cube($width, $height, $depth) {
	&__front {
		@include cube-front($width, $height, $depth);
	}
	&__back {
		@include cube-back($width, $height, $depth);
	}
	&__right {
		@include cube-right($width, $height, $depth);
	}
	&__left {
		@include cube-left($width, $height, $depth);
	}
	&__top {
		@include cube-top($width, $height, $depth);
	}
	&__bottom {
		@include cube-bottom($width, $height, $depth);
	}
}
//----------------------
@mixin cube-front($width, $height, $depth) {
	width: $width;
	height: $height;
	transform-origin: bottom left;
	transform: rotateX(-90deg) translateZ(-($height - ($depth * 2)));
}
@mixin cube-back($width, $height, $depth) {
	width: $width;
	height: $height;
	transform-origin: top left;
	transform: rotateX(-90deg) rotateY(180deg) translateX(-$width)
		translateY(-$height);
}
@mixin cube-right($width, $height, $depth) {
	width: $depth * 2;
	height: $height;
	transform-origin: top left;
	transform: rotateY(90deg) rotateZ(-90deg) translateZ($width)
		translateX(-$depth * 2) translateY(-$height);
}
@mixin cube-left($width, $height, $depth) {
	width: $depth * 2;
	height: $height;
	transform-origin: top left;
	transform: rotateY(-90deg) rotateZ(90deg) translateY(-$height);
}
@mixin cube-top($width, $height, $depth) {
	width: $width;
	height: $depth * 2;
	transform-origin: top left;
	transform: translateZ($height);
}
@mixin cube-bottom($width, $height, $depth) {
	width: $width;
	height: $depth * 2;
	transform-origin: top left;
	transform: rotateY(180deg) translateX(-$width);
}
@mixin face-ani($animation, $time, $side, $width-el, $height-el, $depth-el) {
	animation: #{$animation} #{$time} infinite ease;

	@keyframes #{$animation} {
		0%,
		15%,
		45%,
		60%,
		62%,
		68% {
			@if $side == "cube-front" {
				@include cube-front($width-el, $height-el, $depth-el);
			} @else if $side == "cube-back" {
				@include cube-back($width-el, $height-el, $depth-el);
			} @else if $side == "cube-right" {
				@include cube-right($width-el, $height-el, $depth-el);
			} @else if $side == "cube-left" {
				@include cube-left($width-el, $height-el, $depth-el);
			} @else if $side == "cube-top" {
				@include cube-top($width-el, $height-el, $depth-el);
			} @else if $side == "cube-bottom" {
				@include cube-bottom($width-el, $height-el, $depth-el);
			}
		}
		20%,
		40%,
		58%,
		64%,
		70%,
		100% {
			@if $side == "cube-front" {
				@include cube-front($width-el, $height-finish, $depth-el);
			} @else if $side == "cube-back" {
				@include cube-back($width-el, $height-finish, $depth-el);
			} @else if $side == "cube-right" {
				@include cube-right($width-el, $height-finish, $depth-el);
			} @else if $side == "cube-left" {
				@include cube-left($width-el, $height-finish, $depth-el);
			} @else if $side == "cube-top" {
				@include cube-top($width-el, $height-finish, $depth-el);
			} @else if $side == "cube-bottom" {
				@include cube-bottom($width-el, $height-el, $depth-el);
			}
		}
	}
}
@mixin cube-color($color) {
	&__front {
		background-color: darken($color, 5);
	}
	&__back {
		background-color: darken($color, 10);
	}
	&__right {
		background-color: darken($color, 10);
	}
	&__left {
		background-color: darken($color, 20);
	}
	&__top {
		background-color: $color;
	}
	&__bottom {
		background-color: darken($color, 20);
	}
}
/***********************/
/***********************/
*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	transform-style: preserve-3d;

	user-select: none;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
	font-family: "Share Tech", sans-serif;
	color: black;
}
/***********************/
/***********************/
body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100%;

	font-weight: bolder;
	overflow: hidden;
	cursor: grab;
	background-color: $bg-1;
}
.face {
	position: absolute;
}
.flex {
	display: flex;
	justify-content: center;
	align-items: center;
}
/***********************/
/***********************/
.main {
	position: absolute;
	width: 36 * $unit;
	height: 36 * $unit;
	transform: perspective(400 * $unit) rotateX(66deg) rotateZ(40deg)
		translateZ(-14 * $unit);
}
.is-main-active {
	animation: is-main-active 600ms linear 1000ms infinite;
}
@keyframes is-main-active {
	0%,
	20% {
		transform: perspective(400 * $unit) rotateX(65deg) rotateZ(40deg)
			translateZ(-14 * $unit);
	}
	80%,
	100% {
		transform: perspective(400 * $unit) rotateX(66deg) rotateZ(40deg)
			translateZ(-14 * $unit);
	}
}
.shadows {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: $bg-2;
	box-shadow: 0 0 1 * $unit 0.5 * $unit $bg-2;
}
.shadow {
	position: absolute;
	background-color: $bg-2;
	filter: blur(0.6 * $unit);

	&-01 {
		left: 100%;
		width: 6.75 * $unit;
		height: 100%;
		transform-origin: bottom left;
		transform: skewY(-60deg);
	}
	&-02 {
		bottom: 100%;
		width: 100%;
		height: 12 * $unit;
		transform-origin: bottom left;
		transform: skewX(-30deg);
	}
}
.light {
	position: absolute;
	width: 5 * $unit;
	height: 10 * $unit;
	top: 37 * $unit;

	background-image: linear-gradient(
		to bottom,
		rgba($red-2, 0.45),
		rgba($red-3, 0.1) 70%,
		rgba($red-3, 0.05)
	);
	filter: blur(1 * $unit);

	&-01 {
		left: 5 * $unit;
	}
	&-02 {
		left: 15 * $unit;
		width: 6 * $unit;
	}
	&-03 {
		left: 26 * $unit;
	}
	&-04 {
		top: 18 * $unit;
		left: 36 * $unit;
		width: 8 * $unit;
		height: 16 * $unit;

		transform-origin: bottom left;
		transform: rotateZ(-45deg);
		border-radius: 50%;
		background-image: linear-gradient(
			to bottom,
			rgba($blue-1, 0.45),
			rgba($blue-2, 0.1) 70%,
			rgba($blue-2, 0.05)
		);
		box-shadow: 0 0 2 * $unit 2 * $unit rgba($blue-2, 0.02);
	}
	&-05 {
		top: -11 * $unit;
		left: 5 * $unit;
		background-image: linear-gradient(
			to top,
			rgba($red-2, 0.45),
			rgba($red-3, 0.1) 70%,
			rgba($red-3, 0.05)
		);
	}
	&-06 {
		top: -11 * $unit;
		left: 15 * $unit;
		width: 6 * $unit;
		background-image: linear-gradient(
			to top,
			rgba($red-2, 0.45),
			rgba($red-3, 0.1) 70%,
			rgba($red-3, 0.05)
		);
	}
	&-07 {
		top: -11 * $unit;
		left: 26 * $unit;
		background-image: linear-gradient(
			to top,
			rgba($red-2, 0.45),
			rgba($red-3, 0.1) 70%,
			rgba($red-3, 0.05)
		);
	}
}
.reflex {
	position: absolute;
	filter: blur(0.5 * $unit);

	&-01 {
		top: 100%;
		width: 100%;
		height: 2 * $unit;

		transform-origin: top left;
		transform: skewX(45deg);
		background-image: linear-gradient(
			to bottom,
			rgba(darken($bg-2, 2), 0.85),
			rgba($bg-2, 0.4)
		);
	}
	&-02 {
		top: 100%;
		width: 39 * $unit;
		height: 9 * $unit;

		transform-origin: top left;
		transform: skewX(42deg);
		background-image: linear-gradient(
			to bottom,
			rgba($blue-2, 0.075),
			transparent
		);
		border-left: 2 * $unit solid rgba(darken($bg-2, 2), 0.1);
		border-right: 2 * $unit solid rgba(darken($bg-2, 2), 0.1);
	}
	&-03 {
		bottom: 0;
		left: 100%;
		width: 8 * $unit;
		height: 100%;

		transform-origin: bottom left;
		transform: skewY(45deg);
		background-image: linear-gradient(
			to right,
			rgba($blue-2, 0.075),
			transparent
		);
		border-top: 2 * $unit solid rgba(darken($bg-2, 2), 0.1);
		border-bottom: 2 * $unit solid rgba(darken($bg-2, 2), 0.1);
	}
	&-04 {
		top: 100%;
		left: 0;
		width: 100%;
		height: 20 * $unit;

		transform-origin: top left;
		transform: skewX(-25deg);
		background-image: linear-gradient(
			to bottom,
			rgba($green-5, 0.2),
			transparent
		);
	}
}
/***********************/
/***********************/
.floor-bottom,
.floor-top {
	$width-el: 36 * $unit;
	$height-el: 0.5 * $unit;
	$depth-el: 18 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 0;
	left: 0;
}
.floor-bottom {
	&__front {
		background-color: $green-5;
		background-image: linear-gradient(
			to right,
			transparent 0 4 * $unit,
			rgba($red-1, 0.1),
			transparent 11 * $unit 14 * $unit,
			rgba($red-1, 0.1),
			transparent 22 * $unit 25 * $unit,
			rgba($red-1, 0.1),
			transparent 32 * $unit
		);
	}
	&__back {
		background-color: $green-5;
	}
	&__left {
		background-color: $green-5;
	}
	&__right {
		background-color: $green-5;
		background-image: linear-gradient(
			to right,
			transparent 10%,
			rgba($blue-1, 0.05) 20%,
			transparent 50%
		);
	}
	&__top {
		background-color: $green-5;
		background-image: linear-gradient(
				to right,
				rgba(lighten($red-1, 10), 0.85),
				rgba($red-1, 0.85) 2%,
				rgba($red-1, 0.4) 5%,
				rgba($red-2, 0.35) 30% 70%,
				rgba($red-1, 0.4) 95%,
				rgba($red-1, 0.85),
				rgba(lighten($red-1, 10), 0.85)
			),
			linear-gradient(
				to right,
				rgba(lighten($red-1, 10), 0.85),
				rgba($red-1, 0.85) 2%,
				rgba($red-1, 0.4) 5%,
				rgba($red-2, 0.35) 30% 70%,
				rgba($red-1, 0.4) 95%,
				rgba($red-1, 0.85),
				rgba(lighten($red-1, 10), 0.85)
			),
			linear-gradient(
				to right,
				rgba(lighten($red-1, 10), 0.85),
				rgba($red-1, 0.85) 2%,
				rgba($red-1, 0.4) 5%,
				rgba($red-2, 0.35) 30% 70%,
				rgba($red-1, 0.4) 95%,
				rgba($red-1, 0.85),
				rgba(lighten($red-1, 10), 0.85)
			),
			radial-gradient(transparent 70%, rgba($red-1, 0.5));

		background-position: 26 * $unit 0%, 15 * $unit 0%, 5 * $unit 0%, 0 0;
		background-size: 5 * $unit 100%, 6 * $unit 100%, 5 * $unit 100%, 100% 100%;
		background-repeat: no-repeat;
	}
	&__bottom {
		background-color: $bg-2;
	}
}
.floor-top {
	transform: translateZ(2 * $unit);

	&__front {
		background-color: $green-5;
		background-image: linear-gradient(
			to right,
			transparent 0 4 * $unit,
			rgba($red-1, 0.05),
			transparent 11 * $unit 14 * $unit,
			rgba($red-1, 0.05),
			transparent 22 * $unit 25 * $unit,
			rgba($red-1, 0.05),
			transparent 32 * $unit
		);
	}
	&__back {
		background-color: $green-5;
	}
	&__left {
		background-color: $green-5;
	}
	&__right {
		background-color: $green-5;
		background-image: linear-gradient(
			to right,
			transparent 10%,
			rgba($blue-1, 0.05) 20%,
			transparent 50%
		);
	}
	&__top {
		background-color: darken($green-3, 1);
		background-image: linear-gradient(
				rgba($light-3, 0.155) 0.1 * $unit,
				transparent 0.1 * $unit
			),
			linear-gradient(
				to right,
				rgba($light-3, 0.155) 0.1 * $unit,
				transparent 0.1 * $unit
			);
		background-size: 1.5 * $unit 1.5 * $unit;

		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			background-image: linear-gradient(
					to right,
					transparent,
					rgba($blue-1, 0.035) 40% 60%,
					transparent
				),
				radial-gradient(circle, transparent 68%, rgba($green-4, 0.85)),
				linear-gradient(
					to bottom,
					rgba(darken($green-5, 5), 0.75),
					rgba($green-5, 0.5) 17%,
					transparent 40%
				),
				linear-gradient(to bottom, rgba($green-5, 0.65), transparent 25%),
				linear-gradient(
					to right,
					rgba(darken($green-5, 5), 0.35) 10%,
					rgba($green-5, 0.5) 12%,
					transparent 20%
				),
				linear-gradient(to right, rgba($green-5, 0.5), transparent 25%);
		}

		overflow: hidden;

		.lightft {
			position: absolute;

			&-01 {
				bottom: -2 * $unit;
				right: 5 * $unit;
				width: 9 * $unit;
				height: 18 * $unit;
				transform-origin: top left;
				transform: rotateZ(-45deg);

				border-radius: 50%;
				background-image: radial-gradient(rgba($blue-1, 0.15), rgba($blue-2, 0.1));
				box-shadow: 0 0 2 * $unit 5 * $unit rgba($blue-2, 0.075);
				filter: blur(0.5 * $unit);
			}
			&-02 {
				bottom: 10 * $unit;
				left: 3 * $unit;
				width: 12 * $unit;
				height: 9 * $unit;
				transform-origin: top left;
				transform: skewX(45deg);

				border-radius: 50%;
				background-image: radial-gradient(
					rgba($light-1, 0.1),
					rgba($light-1, 0.05),
					transparent
				);
				filter: blur(1.5 * $unit);
			}
			&-03 {
				bottom: 2 * $unit;
				left: 5 * $unit;
				width: 1 * $unit;
				height: 20 * $unit;

				background-image: linear-gradient(
					to right,
					rgba($blue-1, 0.4),
					rgba($blue-1, 0.2)
				);
				filter: blur(0.75 * $unit);
			}
			&-04 {
				top: 10.5 * $unit;
				left: 3 * $unit;
				width: 23 * $unit;
				height: 7 * $unit;

				background-image: linear-gradient(
					to bottom,
					rgba($green-5, 0.85),
					rgba($green-5, 0.6) 40%,
					rgba($green-5, 0.2)
				);
				transform-origin: too left;
				transform: skewX(15deg);
				filter: blur(0.5 * $unit);
			}
			&-05 {
				top: 2 * $unit;
				right: 0;
				width: 11 * $unit;
				height: 11 * $unit;

				background-image: linear-gradient(
					to bottom,
					rgba($green-5, 0.9),
					rgba($green-5, 0.8) 40%,
					rgba($green-5, 0.2)
				);
				filter: blur(0.75 * $unit);
			}
			&-06 {
				top: 5 * $unit;
				right: 4 * $unit;
				width: 5 * $unit;
				height: 14 * $unit;

				transform-origin: top left;
				transform: skewX(45deg);
				background-image: linear-gradient(
					to bottom,
					rgba($neon, 0.15),
					transparent
				);
				filter: blur(0.5 * $unit);
			}
			&-07 {
				bottom: 3.25 * $unit;
				left: 16 * $unit;
				width: 2 * $unit;
				height: 2 * $unit;

				transform-origin: bottom left;
				transform: skewY(47deg);
				background-color: rgba(lighten($blue-1, 15), 0.075);
				filter: blur(0.4 * $unit);
			}
			&-08 {
				bottom: 9 * $unit;
				left: 2.5 * $unit;
				width: 15 * $unit;
				height: 7.5 * $unit;

				transform-origin: bottom left;
				transform: skewY(47deg);
				background-image: linear-gradient(
					to right,
					rgba(darken($green-3, 15), 0.05),
					transparent
				);
				border: 0.025 * $unit solid rgba($light-3, 0.6);
				filter: blur(0.5 * $unit);
			}
			&-09 {
				bottom: 0 * $unit;
				left: 2 * $unit;
				width: 34 * $unit;
				height: 16.75 * $unit;

				transform-origin: top left;
				background-image: linear-gradient(
					to bottom,
					rgba($green-5, 0.075),
					rgba($green-5, 0.7)
				);
				filter: blur(0.25 * $unit);
			}
			&-10 {
				top: 14 * $unit;
				left: 24.25 * $unit;
				width: 2 * $unit;
				height: 16.75 * $unit;

				transform-origin: top left;
				transform: skewX(45deg);
				background-image: linear-gradient(
					to bottom,
					rgba($green-5, 0.2),
					rgba($green-5, 0.025)
				);
				filter: blur(0.125 * $unit);
			}
			&-11 {
				top: 12 * $unit;
				left: 3.25 * $unit;
				width: 8 * $unit;
				height: 6 * $unit;

				transform-origin: top left;
				transform: skewY(47deg);
				background-image: linear-gradient(
					to right,
					rgba($neon, 0.0875),
					rgba($neon, 0.0125) 80%,
					transparent
				);
				filter: blur(0.25 * $unit);
			}
			&-12 {
				opacity: 0.115;
				top: 2.25 * $unit;
				right: 4.5 * $unit;
				height: 22 * $unit;
				width: 4 * $unit;

				border-right: 0.75 * $unit solid $neon;
				border-bottom: 0.75 * $unit solid $neon;
				animation: line 2000ms linear infinite;

				&::after {
					content: "";
					position: absolute;
					top: 103.5%;
					width: 100%;
					height: 100%;
					border-left: 0.75 * $unit solid $neon;
				}
			}
		}
	}
	&__bottom {
		background-color: $green-5;
		background-image: linear-gradient(
				to right,
				rgba(lighten($red-1, 10), 0.85),
				rgba($red-1, 0.85) 2%,
				rgba($red-1, 0.35) 5%,
				rgba($red-2, 0.3) 30% 70%,
				rgba($red-1, 0.35) 95%,
				rgba($red-1, 0.85),
				rgba(lighten($red-1, 10), 0.85)
			),
			linear-gradient(
				to right,
				rgba(lighten($red-1, 10), 0.85),
				rgba($red-1, 0.85) 2%,
				rgba($red-1, 0.35) 5%,
				rgba($red-2, 0.3) 30% 70%,
				rgba($red-1, 0.35) 95%,
				rgba($red-1, 0.85),
				rgba(lighten($red-1, 10), 0.85)
			),
			linear-gradient(
				to right,
				rgba(lighten($red-1, 10), 0.85),
				rgba($red-1, 0.85) 2%,
				rgba($red-1, 0.35) 5%,
				rgba($red-2, 0.3) 30% 70%,
				rgba($red-1, 0.35) 95%,
				rgba($red-1, 0.85),
				rgba(lighten($red-1, 10), 0.85)
			),
			radial-gradient(transparent 70%, rgba($red-1, 0.5));

		background-position: 26 * $unit 0%, 15 * $unit 0%, 5 * $unit 0%, 0 0;
		background-size: 5 * $unit 100%, 6 * $unit 100%, 5 * $unit 100%, 100% 100%;
		background-repeat: no-repeat;
	}
}
@keyframes line {
	0%,
	30% {
		opacity: 0.11;
	}
	50%,
	70% {
		opacity: 0.175;
	}
}

.floor-a,
.floor-b,
.floor-c,
.floor-d {
	$width-el: 5 * $unit;
	$height-el: 1.5 * $unit;
	$depth-el: 18 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 0;
	transform: translateZ(0.5 * $unit);
}
.floor-a {
	left: 0;

	&__front {
		background-color: $green-5;
	}
	&__back {
		background-color: $green-5;
	}
	&__left {
		background-color: $green-5;
	}
	&__right {
		background-color: $green-5;
		background-image: linear-gradient(
				to top,
				rgba(lighten($red-1, 20), 0.5),
				rgba($red-1, 0.1) 50%
			),
			linear-gradient(
				to bottom,
				rgba(lighten($red-1, 20), 0.25),
				rgba($red-1, 0.1) 30%
			),
			radial-gradient(transparent 70%, rgba($red-1, 0.5)),
			linear-gradient(
				to bottom,
				rgba($red-1, 0.75),
				rgba($red-2, 0.75) 40%,
				rgba($red-3, 0.75)
			);
		background-repeat: no-repeat;
	}
	&__top {
		background-color: $green-5;
	}
	&__bottom {
		background-color: $green-5;
	}
}

.floor-b {
	left: 10 * $unit;

	&__front {
		background-color: $green-5;
	}
	&__back {
		background-color: $green-5;
	}
	&__left {
		background-color: $green-5;
		background-image: linear-gradient(
				to top,
				rgba(lighten($red-1, 20), 0.25),
				rgba($red-1, 0.1) 30%
			),
			linear-gradient(
				to bottom,
				rgba(lighten($red-1, 20), 0.25),
				rgba($red-1, 0.1) 30%
			),
			radial-gradient(transparent 70%, rgba($red-1, 0.5)),
			linear-gradient(
				to bottom,
				rgba($red-1, 0.75),
				rgba($red-2, 0.75) 40%,
				rgba($red-3, 0.75)
			);
		background-repeat: no-repeat;
	}
	&__right {
		background-color: $green-5;
		background-image: linear-gradient(
				to top,
				rgba(lighten($red-1, 20), 0.45),
				rgba($red-1, 0.2) 20%
			),
			linear-gradient(
				to bottom,
				rgba(lighten($red-1, 20), 0.25),
				rgba($red-1, 0.1) 30%
			),
			radial-gradient(transparent 70%, rgba($red-1, 0.5)),
			linear-gradient(
				to bottom,
				rgba($red-1, 0.75),
				rgba($red-2, 0.75) 40%,
				rgba($red-3, 0.75)
			);
		background-repeat: no-repeat;
	}
	&__top {
		background-color: $green-5;
	}
	&__bottom {
		background-color: $green-5;
	}
}
.floor-c {
	left: 21 * $unit;

	&__front {
		background-color: $green-5;
	}
	&__back {
		background-color: $green-5;
	}
	&__left {
		background-color: $green-5;
		background-image: linear-gradient(
				to top,
				rgba(lighten($red-1, 20), 0.25),
				rgba($red-1, 0.1) 30%
			),
			linear-gradient(
				to bottom,
				rgba(lighten($red-1, 20), 0.25),
				rgba($red-1, 0.1) 30%
			),
			radial-gradient(transparent 70%, rgba($red-1, 0.5)),
			linear-gradient(
				to bottom,
				rgba($red-1, 0.75),
				rgba($red-2, 0.75) 40%,
				rgba($red-3, 0.75)
			);
		background-repeat: no-repeat;
	}
	&__right {
		background-color: $green-5;
		background-image: linear-gradient(
				to top,
				rgba(lighten($red-1, 20), 0.25),
				rgba($red-1, 0.1) 30%
			),
			linear-gradient(
				to bottom,
				rgba(lighten($red-1, 20), 0.25),
				rgba($red-1, 0.1) 30%
			),
			radial-gradient(transparent 70%, rgba($red-1, 0.5)),
			linear-gradient(
				to bottom,
				rgba($red-1, 0.75),
				rgba($red-2, 0.75) 40%,
				rgba($red-3, 0.75)
			);
		background-repeat: no-repeat;
	}
	&__top {
		background-color: $green-5;
	}
	&__bottom {
		background-color: $green-5;
	}
}
.floor-d {
	left: 31 * $unit;

	&__front {
		background-color: $green-5;
	}
	&__back {
		background-color: $green-5;
	}
	&__left {
		background-color: $green-5;
		background-image: linear-gradient(
				to top,
				rgba(lighten($red-1, 20), 0.25),
				rgba($red-1, 0.1) 30%
			),
			linear-gradient(
				to bottom,
				rgba(lighten($red-1, 20), 0.25),
				rgba($red-1, 0.1) 30%
			),
			radial-gradient(transparent 70%, rgba($red-1, 0.5)),
			linear-gradient(
				to bottom,
				rgba($red-1, 0.75),
				rgba($red-2, 0.75) 40%,
				rgba($red-3, 0.75)
			);
		background-repeat: no-repeat;
	}
	&__right {
		background-color: $green-5;
		background-image: linear-gradient(
			to right,
			transparent 10%,
			rgba($blue-1, 0.05) 20%,
			transparent 50%
		);
	}
	&__top {
		background-color: $green-5;
	}
	&__bottom {
		background-color: $green-5;
	}
}
.wall-left {
	$width-el: 2 * $unit;
	$height-el: 26 * $unit;
	$depth-el: 18 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(2.5 * $unit);

	&__front {
		background-image: linear-gradient(to bottom, $green-3, $green-5);
	}
	&__back {
		background-color: $green-5;
	}
	&__left {
		background-color: $green-5;
	}
	&__right {
		background-color: $green-3;
		background-image: linear-gradient(to bottom, $neon, $light-3),
			linear-gradient(
				to right,
				rgba($green-5, 0.1) 55%,
				rgba($green-5, 0.65) 95%,
				rgba($green-5, 0.85)
			),
			linear-gradient(
				to bottom,
				rgba($green-5, 0.5),
				$green-2 20%,
				$green-3 90%,
				rgba($green-5, 0.5)
			),
			linear-gradient(to left, $green-2, $green-3);

		background-position: 0 0, 0 100%, 0 0, 0 0;
		background-size: 22.25% 4%, 11% 90%, 100% 100%, 100% 100%;
		background-repeat: no-repeat;
		border-bottom: 0.2 * $unit solid rgba($light-3, 0.9);
	}
	&__top {
		background-color: $green-5;
		border-left: 0.1 * $unit solid rgba($light-1, 0.1);
		border-top: 0.1 * $unit solid rgba($light-1, 0.1);
	}
	&__bottom {
		background-color: $green-5;
	}
}
.wall-left0 {
	$width-el: 1 * $unit;
	$height-el: 2 * $unit;
	$depth-el: 17 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 2 * $unit;
	left: 2 * $unit;
	transform: translateZ(25.5 * $unit);

	&__front {
		background-color: darken($green-3, 1);
	}
	&__back {
		background-color: $green-3;
	}
	&__left {
		background-color: $green-3;
	}
	&__right {
		background-color: $green-4;
		background-image: linear-gradient(
			to left,
			rgba($light-1, 0.075),
			rgba($light-2, 0.075),
			transparent 30%
		);
		border-bottom: 0.2 * $unit solid rgba($light-3, 0.9);
	}
	&__top {
		background-color: $green-5;
		background-image: linear-gradient(
			to right,
			rgba($neon, 0.4),
			rgba($neon, 0.2)
		);
	}
	&__bottom {
		background-color: $green-5;
	}
}
.wall-left1 {
	$width-el: 1 * $unit;
	$height-el: 1 * $unit;
	$depth-el: 13 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 2 * $unit;
	left: 2 * $unit;
	transform: translateZ(27.5 * $unit);

	&__front {
		background-color: $green-4;
		background-image: linear-gradient(
			to right,
			rgba($neon, 0.4),
			rgba($neon, 0.2)
		);
	}
	&__back {
		background-color: $green-3;
	}
	&__left {
		background-color: red;
	}
	&__right {
		background-color: $green-4;
		background-image: linear-gradient(
			to left,
			rgba($light-1, 0.075),
			rgba($light-2, 0.075),
			transparent 38%
		);
	}
	&__top {
		background-color: $green-5;
	}
	&__bottom {
		background-color: $green-5;
	}
}
.wall-left2 {
	$width-el: 0.5 * $unit;
	$height-el: 23 * $unit;
	$depth-el: 16 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 0;
	left: 2 * $unit;
	transform: translateZ(2.5 * $unit);

	&__front {
		background-color: $green-5;
		border-bottom: 0.2 * $unit solid rgba($light-3, 0.9);
	}
	&__back {
		background-color: $green-3;
	}
	&__left {
		background-color: $green-3;
	}
	&__right {
		background-color: $green-3;
		background-image: linear-gradient(
				-45deg,
				rgba($green-5, 0.5) 63%,
				transparent 65%
			),
			linear-gradient(
				to bottom,
				rgba(darken($green-4, 5), 0.6),
				transparent 12% 68%,
				rgba(darken($green-4, 5), 0.6)
			);
		background-position: 0% 100%, 0 0, 0 0;
		background-size: 100% 20.5 * $unit, 100% 100%, 100% 100%;
		background-repeat: no-repeat;
		border-bottom: 0.2 * $unit solid rgba($light-3, 0.9);

		&::before {
			content: "";
			position: absolute;
			bottom: 8 * $unit;
			right: 3 * $unit;
			width: 7 * $unit;
			height: 1.5 * $unit;
			// border-radius: 50%;
			background-image: linear-gradient(
				to left,
				rgba($neon, 0.15),
				rgba($neon, 0.05)
			);
			filter: blur(1 * $unit);
		}

		.lightl2l {
			position: absolute;
			filter: blur(0.75 * $unit);

			&-01 {
				right: 1 * $unit;
				width: 10 * $unit;
				height: 4 * $unit;
				background-image: radial-gradient(
					rgba($light-1, 0.9),
					rgba($light-2, 0.5),
					transparent
				);
			}
			&-02 {
				top: 6 * $unit;
				right: 2 * $unit;
				width: 100%;
				height: 17 * $unit;
				background-image: linear-gradient(
					to left,
					rgba(lighten($light-3, 6), 0.5),
					rgba($light-3, 0.35) 20%,
					rgba($light-3, 0.25),
					rgba($light-3, 0.025)
				);
			}
			&-03 {
				right: 8 * $unit;
				width: 8 * $unit;
				height: 4 * $unit;
				background-image: radial-gradient(
					rgba($light-1, 0.25),
					rgba($light-2, 0.1),
					transparent
				);
				border-radius: 50%;
			}
			&-04 {
				right: 10 * $unit;
				width: 14 * $unit;
				height: 4 * $unit;
				background-image: linear-gradient(
					to left,
					rgba($light-1, 0.2),
					rgba($light-2, 0.1) 80%,
					transparent
				);
			}
		}
	}
	&__top {
		background-color: $green-4;
		background-image: radial-gradient(transparent 70%, rgba($green-5, 0.5)),
			linear-gradient(
				to right,
				rgba($light-1, 0.2),
				transparent 30% 80%,
				rgba($green-5, 0.5)
			);
	}
	&__bottom {
		background-color: $green-5;
	}
}
.wall-back {
	$width-el: 34 * $unit;
	$height-el: 26 * $unit;
	$depth-el: 1 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 0;
	right: 0;
	transform: translateZ(2.5 * $unit);

	&__front {
		background-image: linear-gradient(to bottom, $neon, $light-3),
			linear-gradient(45deg, rgba($green-5, 0.45) 37%, transparent 37%),
			linear-gradient(to bottom, $green-3, $green-5);
		border-bottom: 0.2 * $unit solid rgba($light-3, 0.9);
		background-size: 15.5% 4%, 9% 100%, 100% 100%;
		background-position: 3% 0, 100% 100%, 0 0;
		background-repeat: no-repeat;
	}
	&__back {
		background-color: $green-5;
	}
	&__left {
		background-color: $green-5;
	}
	&__right {
		background-image: linear-gradient(to bottom, $green-4, $green-5);
	}
	&__top {
		background-color: $green-5;
		border-top: 0.1 * $unit solid rgba($light-1, 0.1);
	}
	&__bottom {
		background-color: $green-5;
	}
}
.wall-back0 {
	$width-el: 33 * $unit;
	$height-el: 2 * $unit;
	$depth-el: 0.5 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 2 * $unit;
	right: 0;
	transform: translateZ(25.5 * $unit);

	&__front {
		background-image: linear-gradient(to bottom, $green-2, $green-3);
		border-bottom: 0.2 * $unit solid rgba($light-3, 0.9);
	}
	&__back {
		background-color: $green-3;
	}
	&__left {
		background-color: $green-3;
	}
	&__right {
		background-color: darken($green-4, 1);
	}
	&__top {
		background-color: $green-5;
		background-image: linear-gradient(
			to bottom,
			rgba($neon, 0.4),
			rgba($neon, 0.25)
		);
	}
	&__bottom {
		background-color: $green-5;
	}
}
.wall-back1 {
	$width-el: 28 * $unit;
	$height-el: 1 * $unit;
	$depth-el: 0.5 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 2 * $unit;
	right: 0;
	transform: translateZ(27.5 * $unit);

	&__front {
		background-image: linear-gradient(to bottom, $green-2, $green-2);
	}
	&__back {
		background-color: $green-3;
	}
	&__left {
		background-color: $green-3;
		background-image: linear-gradient(
			to right,
			rgba($neon, 0.4),
			rgba($neon, 0.2)
		);
	}
	&__right {
		background-color: darken($green-4, 1);
	}
	&__top {
		background-color: $green-5;
	}
	&__bottom {
		background-color: $green-5;
	}
}
.wall-back2 {
	$width-el: 30.5 * $unit;
	$height-el: 23 * $unit;
	$depth-el: 0.25 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 2 * $unit;
	right: 2.75 * $unit;
	transform: translateZ(2.5 * $unit);

	&__front {
		background-color: $green-3;
		background-image: linear-gradient(
				to right,
				rgba($light-3, 0.25),
				transparent 20% 80%,
				rgba($light-3, 0.25)
			),
			linear-gradient(to bottom, rgba($light-3, 0.5), rgba($light-3, 0.25)),
			linear-gradient(45deg, rgba($green-5, 0.6) 69%, transparent 71%),
			linear-gradient(
				to bottom,
				rgba($green-5, 0.4),
				transparent 10% 90%,
				rgba($green-5, 0.4)
			),
			linear-gradient(to bottom, $green-3, $green-5);
		background-size: 73% 74%, 73% 74%, 25% 82%, 100% 100%, 100% 100%;
		background-position: 0 100%, 0 100%, 100% 100%, 0 0, 0 0;
		background-repeat: no-repeat;
		border-bottom: 0.2 * $unit solid rgba($light-3, 0.9);

		.lightb2b {
			position: absolute;
			filter: blur(0.75 * $unit);

			&-01 {
				left: -0.5 * $unit;
				width: 10 * $unit;
				height: 4 * $unit;
				background-image: radial-gradient(
					rgba($light-1, 0.9),
					rgba($light-2, 0.5),
					transparent
				);
				border-top-right-radius: 50%;
				border-bottom-right-radius: 50%;
			}
			&-02 {
				left: 6 * $unit;
				width: 8 * $unit;
				height: 4 * $unit;
				background-image: radial-gradient(
					rgba($light-1, 0.25),
					rgba($light-2, 0.1),
					transparent
				);
				border-radius: 50%;
			}
		}
	}
	&__back {
		background-color: $green-3;
	}
	&__left {
		background-image: linear-gradient(to bottom, $green-5, darken($green-5, 10));
	}
	&__right {
		background-image: linear-gradient(to bottom, $green-5, darken($green-5, 10));
		border-bottom: 0.2 * $unit solid rgba($light-3, 0.9);
	}
	&__top {
		background-color: $green-4;
		background-image: radial-gradient(transparent 70%, rgba($green-5, 0.5)),
			linear-gradient(
				to bottom,
				rgba($light-1, 0.2),
				transparent 30% 80%,
				rgba($green-5, 0.5)
			);
	}
	&__bottom {
		background-color: $green-5;
	}
}
.door {
	position: absolute;
	bottom: 0;
	left: 5 * $unit;
	width: 7.5 * $unit;
	height: 17.5 * $unit;
	background-color: $green-4;
	z-index: 2;
	background-image: linear-gradient(
			-45deg,
			rgba(darken($green-5, 10), 0.35) 53%,
			transparent 56%
		),
		linear-gradient(rgba($blue-1, 0.05) 0.1 * $unit, transparent 0.1 * $unit),
		linear-gradient(
			to right,
			rgba($blue-1, 0.05) 0.1 * $unit,
			transparent 0.1 * $unit
		);
	background-size: 100% 100%, 1 * $unit 1 * $unit, 1 * $unit 1 * $unit;
	background-repeat: no-repeat, repeat, repeat;
	border: 0.25 * $unit solid rgba($light-3, 0.9);
	border-bottom: none;
	box-shadow: inset 0 0 2 * $unit rgba($blue-1, 0.125);

	&::before {
		content: "";
		position: absolute;
		top: 5%;
		left: 1 * $unit;
		width: 3 * $unit;
		height: 90%;
		background-image: linear-gradient(
			to right,
			rgba(lighten($neon, 10), 0.035),
			transparent
		);
		filter: blur(0.25 * $unit);
	}
}
.door-left {
	$width-el: 0.5 * $unit;
	$height-el: 18 * $unit;
	$depth-el: 0.25 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 27 * $unit;
	left: 2.5 * $unit;
	transform: translateZ(2 * $unit);

	&__front {
		background-color: $green-5;
	}
	&__back {
		background-color: $green-5;
		background-image: linear-gradient(
			to right,
			rgba($blue-1, 0.3),
			rgba($blue-1, 0.1)
		);
	}
	&__left {
		background-color: $green-5;
	}
	&__right {
		background-color: $green-4;
		background-image: linear-gradient(
			to top,
			rgba($green-5, 0.85),
			rgba($light-1, 0.15),
			rgba($light-1, 0.05)
		);
	}
	&__top {
		background-color: $green-5;
	}
	&__bottom {
		background-color: $green-5;
	}
}
.door-right {
	$width-el: 0.5 * $unit;
	$height-el: 18 * $unit;
	$depth-el: 0.25 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 19 * $unit;
	left: 2.5 * $unit;
	transform: translateZ(2 * $unit);

	&__front {
		background-color: $green-5;
		background-image: linear-gradient(
			to right,
			rgba($blue-1, 0.2),
			rgba($blue-1, 0.1)
		);
	}
	&__back {
		background-color: $green-5;
	}
	&__left {
		background-color: $green-5;
	}
	&__right {
		background-color: $green-4;
		background-image: linear-gradient(
			to top,
			rgba($green-5, 0.85),
			rgba($light-1, 0.1)
		);
	}
	&__top {
		background-color: $green-5;
	}
	&__bottom {
		background-color: $green-5;
	}
}
.door-top {
	$width-el: 0.5 * $unit;
	$height-el: 0.5 * $unit;
	$depth-el: 4.25 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 19 * $unit;
	left: 2.5 * $unit;
	transform: translateZ(20 * $unit);

	&__front {
		background-color: $green-5;
	}
	&__back {
		background-color: $green-5;
		background-image: linear-gradient(
			to right,
			rgba($blue-1, 0.2),
			rgba($blue-1, 0.1)
		);
	}
	&__left {
		background-color: $green-5;
	}
	&__right {
		background-color: $green-4;
		background-image: linear-gradient(
			to left,
			rgba($light-1, 0.15),
			rgba($light-1, 0.05)
		);
	}
	&__top {
		background-color: $green-5;
		background-image: linear-gradient(
			to bottom,
			rgba($light-1, 0.275),
			rgba($light-1, 0.1)
		);
	}
	&__bottom {
		background-color: $green-5;
	}
}
.control {
	$width-el: 0.5 * $unit;
	$height-el: 2.25 * $unit;
	$depth-el: 0.85 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 28.75 * $unit;
	left: 2.5 * $unit;
	transform: translateZ(13 * $unit);

	&__front {
		background-color: $green-4;
	}
	&__back {
		background-color: $green-4;
	}
	&__left {
		background-color: $green-4;
	}
	&__right {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.1 * $unit;
		padding: 0.25 * $unit;

		background-color: $green-3;
		background-image: linear-gradient(
			to right,
			rgba($blue-1, 0.125),
			rgba($blue-1, 0.35)
		);

		.screen {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: repeat(4, 1fr);
			gap: 0.1 * $unit;

			&__button {
				width: 100%;
				height: 100%;
				background-color: lighten($blue-1, 15);
				box-shadow: 0 0 0.5 * $unit rgba($blue-1, 0.25);

				&--orange {
					background-color: $orange;
				}
				&--yellow {
					background-color: $yellow;
				}
				&--red {
					background-color: $red-1;
				}
			}
		}
	}
	&__top {
		background-color: $green-3;
	}
	&__bottom {
		background-color: $green-4;
	}
}
.bed {
	$width-el: 23 * $unit;
	$height-el: 2 * $unit;
	$depth-el: 6 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 2.5 * $unit;
	left: 2.5 * $unit;
	transform: translateZ(19.5 * $unit);

	&__front {
		background-color: $green-4;
		background-image: linear-gradient(
				to top,
				rgba($blue-1, 0.25),
				rgba($blue-1, 0.05)
			),
			linear-gradient(to bottom, rgba($white-1, 0.1), transparent 80%);
	}
	&__back {
		background-color: $green-5;
	}
	&__left {
		background-color: $green-5;
	}
	&__right {
		background-color: $green-5;
		background-image: linear-gradient(
				to top,
				rgba($blue-1, 0.1),
				rgba($blue-1, 0.05)
			),
			linear-gradient(to bottom, rgba($white-1, 0.1), transparent 80%);

		&::before {
			content: "";
			position: absolute;
			right: 0;
			width: 5 * $unit;
			height: 100%;
			background-image: linear-gradient(to left, rgba($neon, 0.1), transparent);
		}
	}
	&__top {
		background-color: $green-3;
		background-image: linear-gradient(
			to right,
			rgba($white-1, 0.1),
			rgba($white-1, 0.1)
		);
	}
	&__bottom {
		background-color: $green-4;
		background-image: linear-gradient(
				to right,
				rgba($light-3, 0.75),
				transparent 30% 70%,
				rgba($light-3, 0.75)
			),
			linear-gradient(to right, rgba($light-3, 0.5), transparent),
			linear-gradient(to bottom, rgba($light-3, 0.5), rgba($light-3, 0.25));

		&::before {
			content: "";
			position: absolute;
			top: 6 * $unit;
			right: 0.125 * $unit;
			width: 12 * $unit;
			height: 6 * $unit;
			border-top: 0.75 * $unit solid rgba($neon, 0.1);
			border-left: 0.75 * $unit solid rgba($neon, 0.1);
		}
	}
}
.mattress {
	$width-el: 22.5 * $unit;
	$height-el: 1 * $unit;
	$depth-el: 5.75 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 2.5 * $unit;
	left: 2.5 * $unit;
	transform: translateZ(21.5 * $unit);

	&__front {
		background-color: $white-2;
		background-image: linear-gradient(
			to right,
			transparent 25%,
			$green-2 25%,
			darken($green-2, 10)
		);
	}
	&__back {
		background-color: $white-3;
	}
	&__left {
		background-color: $white-3;
	}
	&__right {
		background-color: darken($green-3, 5);
	}
	&__top {
		background-color: $white-1;
		background-image: linear-gradient(
			to right,
			transparent 25%,
			$green-1 25%,
			darken($green-1, 15)
		);

		&::after {
			content: "";
			position: absolute;
			right: 0;
			width: 75%;
			height: 100%;
			background-image: linear-gradient(
				45deg,
				rgba($green-1, 0.5) 50%,
				transparent 50%
			);
			background-size: 1 * $unit 1 * $unit;
		}
	}
	&__bottom {
		background-color: $white-3;
	}
}
.stairs {
	$width-el: 1 * $unit;
	$height-el: 17 * $unit;
	$depth-el: 4.5 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 2.5 * $unit;
	left: 24.5 * $unit;
	transform: translateZ(2.5 * $unit);

	&__front {
		background-color: $green-4;
		background-image: linear-gradient(
				to bottom,
				rgba($blue-1, 0.425),
				rgba($blue-1, 0.15) 30%,
				rgba($blue-1, 0.1)
			),
			linear-gradient(to top, rgba($green-5, 0.5), transparent 30%);
		border-bottom: 0.2 * $unit solid rgba($light-3, 0.9);
		border-left: 0.1 * $unit solid darken($light-3, 20);
		border-right: 0.1 * $unit solid darken($light-3, 20);
	}
	&__back {
		background-color: $green-5;
	}
	&__left {
		background-color: $green-5;
		background-image: linear-gradient(to right, rgba($light-3, 0.75), transparent),
			linear-gradient(to bottom, rgba($light-3, 0.5), rgba($light-3, 0.25));
		border-bottom: 0.2 * $unit solid rgba($light-3, 0.9);
	}
	&__right {
		background-color: $green-5;
		background-image: linear-gradient(
			to bottom,
			rgba($blue-1, 0.02),
			rgba($blue-1, 0.02)
		);
		border-bottom: 0.2 * $unit solid rgba($light-3, 0.9);

		&::before {
			content: "";
			position: absolute;
			right: 0;
			width: 5 * $unit;
			height: 8.5 * $unit;
			background-image: radial-gradient(rgba($neon, 0.05), transparent);
			filter: blur(0.35 * $unit);
		}
	}
	&__top {
		background-color: $green-3;
	}
	&__bottom {
		background-color: $green-4;
	}
}
.column {
	$width-el: 1 * $unit;
	$height-el: 17.25 * $unit;
	$depth-el: 0.5 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 13.35 * $unit;
	left: 24.5 * $unit;
	transform: translateZ(2.25 * $unit);

	&__front {
		background-color: $green-4;
		background-image: linear-gradient(
				to bottom,
				rgba($blue-1, 0.425),
				rgba($blue-1, 0.15) 30%,
				rgba($blue-1, 0.1)
			),
			linear-gradient(to top, rgba($green-5, 0.5), transparent 30%);
		border-left: 0.1 * $unit solid darken($light-3, 20);
		border-right: 0.1 * $unit solid darken($light-3, 20);
	}
	&__back {
		background-color: $green-5;
	}
	&__left {
		background-color: $green-5;
		background-image: linear-gradient(
			to bottom,
			rgba($light-3, 0.5),
			rgba($light-3, 0.25)
		);
	}
	&__right {
		background-color: $green-5;
		background-image: linear-gradient(
				to bottom,
				rgba($blue-1, 0.05),
				rgba($blue-1, 0.035)
			),
			linear-gradient(to top, rgba($green-5, 0.5), transparent 30%);
	}
	&__top {
		background-color: $green-3;
	}
	&__bottom {
		background-color: $green-4;
	}
}
.step {
	$width-el: 0.5 * $unit;
	$height-el: 1.5 * $unit;
	$depth-el: 3.5 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 3.5 * $unit;
	left: 25.51 * $unit;

	&__front {
		background-color: $green-5;
		background-image: linear-gradient(
			to bottom,
			rgba($blue-1, 0.125),
			rgba($blue-1, 0.125)
		);
		border-left: 0.1 * $unit solid rgba($blue-1, 0.9);
		border-right: 0.1 * $unit solid rgba($blue-1, 0.9);
	}
	&__back {
		background-color: $green-5;
		background-image: linear-gradient(
			to bottom,
			rgba($blue-1, 0.125),
			rgba($blue-1, 0.125)
		);
		border-left: 0.1 * $unit solid rgba($blue-1, 0.9);
		border-right: 0.1 * $unit solid rgba($blue-1, 0.9);
	}
	&__left {
		background-color: $green-5;
		box-shadow: 0 0 0.5 * $unit rgba($blue-1, 0.2);
	}
	&__right {
		background-color: $green-5;
		background-image: linear-gradient(
			to bottom,
			rgba($blue-1, 0.025),
			rgba($blue-1, 0.025)
		);
	}
	&__top {
		background-color: $green-5;
		background-image: linear-gradient(
			to bottom,
			rgba($blue-1, 0.35),
			rgba($blue-1, 0.35)
		);
		border-left: 0.1 * $unit solid rgba($blue-1, 0.9);
		border-right: 0.1 * $unit solid rgba($blue-1, 0.9);
	}
	&__bottom {
		background-color: $green-5;
		background-image: linear-gradient(
			to bottom,
			rgba($blue-1, 0.125),
			rgba($blue-1, 0.125)
		);

		border-left: 0.1 * $unit solid rgba($blue-1, 0.9);
		border-right: 0.1 * $unit solid rgba($blue-1, 0.9);
	}
}

.step {
	&:nth-of-type(1) {
		transform: translateZ(17 * $unit);
	}
	&:nth-of-type(2) {
		transform: translateZ(14.5 * $unit);
	}
	&:nth-of-type(3) {
		transform: translateZ(12 * $unit);
	}
	&:nth-of-type(4) {
		transform: translateZ(9.5 * $unit);
	}
	&:nth-of-type(5) {
		transform: translateZ(7 * $unit);
	}
	&:nth-of-type(6) {
		transform: translateZ(4.5 * $unit);
	}
}
.kitchen-bottom {
	$width-el: 21.75 * $unit;
	$height-el: 8 * $unit;
	$depth-el: 0.5 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 2.5 * $unit;
	left: 2.5 * $unit;

	transform: translateZ(2.25 * $unit);

	&__front {
		background-color: $gray-3;
		background-image: linear-gradient(
			to bottom,
			rgba($light-3, 0.65),
			rgba($light-3, 0.1)
		);

		&::before {
			content: "";
			position: absolute;
			top: 0.5 * $unit;
			left: 6 * $unit;
			width: 7 * $unit;
			height: 1 * $unit;
			border-radius: 50%;
			background-color: rgba($neon, 0.225);
			filter: blur(0.325 * $unit);
		}
	}
	&__back {
		background-color: $green-4;
	}
	&__left {
		background-color: $green-4;
	}
	&__right {
		background-color: $green-4;
	}
	&__top {
		background-color: $bg-1;
		background-image: linear-gradient(
				to right,
				rgba($light-3, 0.4),
				rgba($light-3, 0.2) 2%,
				transparent 11%
			),
			linear-gradient(to bottom, rgba($light-3, 0.125), rgba($light-3, 0.075));
		border-left: 0.2 * $unit solid rgba($light-3, 0.9);
		border-right: 0.2 * $unit solid rgba($light-3, 0.9);
		border-top: 0.2 * $unit solid rgba($light-3, 0.9);
	}
	&__bottom {
		background-color: $green-4;
	}
}
.kitchen-top {
	$width-el: 21.75 * $unit;
	$height-el: 8 * $unit;
	$depth-el: 0.5 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 10 * $unit;
	left: 2.5 * $unit;
	transform: translateZ(2.25 * $unit);

	&__front {
		background-color: $bg-1;
		background-image: linear-gradient(
				to right,
				transparent 0 15%,
				rgba($neon, 0.025) 30%,
				transparent 40%
			),
			linear-gradient(45deg, rgba($light-3, 0.01) 50%, transparent 70%),
			repeating-linear-gradient(
				to bottom,
				transparent 0,
				transparent 0.9 * $unit,
				darken(black, 12) 0.9 * $unit,
				darken(black, 5) 1 * $unit,
				darken(black, 5) 1.1 * $unit
			),
			linear-gradient(to top, rgba($bg-1, 0.5), transparent 30%),
			linear-gradient(
				to right,
				rgba($light-3, 0.3),
				rgba($light-3, 0.1) 2%,
				transparent 11%
			),
			linear-gradient(to bottom, rgba($light-3, 0.125), rgba($light-3, 0.075));
		border-left: 0.2 * $unit solid rgba($light-3, 0.9);
		border-right: 0.2 * $unit solid rgba($light-3, 0.9);

		&::before {
			content: "";
			position: absolute;
			top: 2 * $unit;
			left: 14 * $unit;
			width: 2 * $unit;
			height: 2 * $unit;
			background-color: rgba($blue-1, 0.035);
			transform: skewX(-20deg);
			filter: blur(0.4 * $unit);
		}
	}
	&__back {
		background-color: $gray-3;
		background-image: linear-gradient(
			to bottom,
			rgba($light-3, 0.5),
			rgba($light-3, 0.1)
		);
	}
	&__left {
		background-color: $green-4;
	}
	&__right {
		background-color: $green-4;
	}
	&__top {
		background-color: $bg-1;
		background-image: linear-gradient(
				to right,
				rgba($light-3, 0.4),
				rgba($light-3, 0.2) 2%,
				transparent 11%
			),
			linear-gradient(to bottom, rgba($light-3, 0.075), rgba($light-3, 0.075));
		border-left: 0.2 * $unit solid rgba($light-3, 0.9);
		border-right: 0.2 * $unit solid rgba($light-3, 0.9);
	}
	&__bottom {
		background-color: $green-4;
	}
}
.kitchen-left {
	$width-el: 7 * $unit;
	$height-el: 8 * $unit;
	$depth-el: 3.25 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 3.5 * $unit;
	left: 2.5 * $unit;
	transform: translateZ(2.25 * $unit);

	&__front {
		background-color: $green-2;
	}
	&__back {
		background-color: $green-4;
	}
	&__left {
		background-color: $green-4;
	}
	&__right {
		background-color: $gray-2;
		background-image: linear-gradient(
			to bottom,
			rgba($light-3, 0.5),
			rgba($light-3, 0.1)
		);

		&::before {
			content: "";
			position: absolute;
			top: 0.5 * $unit;
			right: -0.5 * $unit;
			width: 5 * $unit;
			height: 1 * $unit;
			border-radius: 50%;
			background-color: rgba($neon, 0.235);
			filter: blur(0.325 * $unit);
		}
	}
	&__top {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-items: center;
		padding: 1 * $unit;
		gap: 0.65 * $unit;

		background-color: $bg-1;
		background-image: linear-gradient(
				to right,
				rgba($light-3, 0.4),
				rgba($light-3, 0.1) 10%,
				transparent 30%
			),
			linear-gradient(to bottom, rgba($light-3, 0.15), rgba($light-3, 0.1));
		border-left: 0.2 * $unit solid rgba($light-3, 0.9);

		.circle-k {
			width: 1.4 * $unit;
			height: 1.4 * $unit;

			background-color: black;
			border: 0.15 * $unit solid rgba($neon, 0.5);
			outline: 0.15 * $unit solid rgba($neon, 0.75);
			outline-offset: 0.2 * $unit;
			border-radius: 50%;
		}
	}
	&__bottom {
		background-color: $green-4;
	}
}
.kitchen-right {
	$width-el: 7 * $unit;
	$height-el: 8 * $unit;
	$depth-el: 3.25 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 3.5 * $unit;
	left: 17.25 * $unit;
	transform: translateZ(2.25 * $unit);

	&__front {
		background-color: $green-2;
	}
	&__back {
		background-color: $green-4;
	}
	&__left {
		background-color: $gray-2;
		background-image: linear-gradient(
			to bottom,
			rgba($light-3, 0.5),
			rgba($light-3, 0.1)
		);
	}
	&__right {
		background-color: $green-4;
	}
	&__top {
		background-color: $bg-1;
		background-image: linear-gradient(
			to bottom,
			rgba($light-3, 0.15),
			rgba($light-3, 0.1)
		);
		border-right: 0.2 * $unit solid rgba($light-3, 0.9);

		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1 * $unit;

		.circle-k {
			width: 4 * $unit;
			height: 4.5 * $unit;

			background-color: rgba(black, 0.5);
			border: 0.15 * $unit solid rgba($neon, 0.5);
			outline: 0.15 * $unit solid rgba($neon, 0.75);
			outline-offset: 0.2 * $unit;
			border-radius: 10%;
		}
	}
	&__bottom {
		background-color: $green-4;
	}
}
.kitchen-center {
	$width-el: 7.75 * $unit;
	$height-el: 6 * $unit;
	$depth-el: 3.25 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 3.5 * $unit;
	left: 9.5 * $unit;
	transform: translateZ(2.25 * $unit);

	&__front {
		background-color: $green-2;
	}
	&__back {
		background-color: $green-4;
	}
	&__left {
		background-color: $green-4;
	}
	&__right {
		background-color: $green-4;
	}
	&__top {
		background-color: $gray-1;
		background-image: linear-gradient(
				to bottom,
				rgba($light-3, 0.15),
				rgba($light-3, 0.15)
			),
			linear-gradient(to bottom, rgba($light-3, 0.15), rgba($light-3, 0.1));

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 5 * $unit;
			height: 5 * $unit;
			background-image: linear-gradient(
				to right,
				rgba(lighten($neon, 10), 0.5),
				transparent
			);
			filter: blur(0.325 * $unit);
		}
		&::after {
			content: "";
			position: absolute;
			top: 0.25 * $unit;
			left: 0.5 * $unit;
			width: 5 * $unit;
			height: 1 * $unit;
			background-image: linear-gradient(
				to right,
				rgba(lighten($neon, 20), 0.4),
				rgba(lighten($neon, 20), 0.1)
			);
			filter: blur(0.35 * $unit);
		}
	}
	&__bottom {
		background-color: $green-4;
	}
}

.block-a {
	$width-el: 5 * $unit;
	$height-el: 11 * $unit;
	$depth-el: 0.125 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 2.55 * $unit;
	right: 4 * $unit;
	transform: translateZ(11.25 * $unit);
	cursor: pointer;

	&__front {
		background-color: $neon;
		box-shadow: 0 0 1.25 * $unit rgba($neon, 0.15);

		background-image: repeating-linear-gradient(
				to bottom,
				transparent 0 0.35 * $unit,
				rgba($blue-2, 0.01) 0.35 * $unit 0.7 * $unit
			),
			linear-gradient(45deg, rgba(darken($neon, 5), 0.5) 52%, transparent 54%);

		overflow: hidden;

		&::before {
			content: "";
			position: absolute;
			top: 5%;
			left: 0.5 * $unit;
			width: 1 * $unit;
			height: 90%;
			background-color: rgba(lighten($neon, 15), 0.25);
			filter: blur(0.5 * $unit);
		}
	}
	&__back {
		background-color: black;
		box-shadow: 0 0 1 * $unit rgba($blue-1, 0.35);
	}
	&__left {
		background-color: $blue-1;
	}
	&__right {
		background-color: $blue-1;
	}
	&__top {
		background-color: $blue-1;
	}
	&__bottom {
		background-color: $blue-1;
	}
}
.s1,
.s2 {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0.5 * $unit;

	span {
		text-transform: uppercase;
		font-size: 1 * $unit;
	}
	small {
		font-size: 0.75 * $unit;
	}
	small,
	svg {
		position: absolute;
		bottom: 0.5 * $unit;
		right: 0.5 * $unit;
	}
	svg {
		width: 2 * $unit;
		height: 2 * $unit;
		animation: svg 8000ms steps(4, start) infinite;
	}
}

.s2 {
	animation: s2-a linear 1750ms, s2-b linear 750ms infinite 1750ms;
}
.is-screen-hidden {
	display: none;
}

@keyframes svg {
	to {
		transform: rotateZ(90deg);
	}
}
@keyframes s2-a {
	0%,
	45% {
		transform: scale(0);
	}
	60%,
	100% {
		transform: scale(1);
	}
}
@keyframes s2-b {
	0%,
	20% {
		opacity: 1;
	}
	100% {
		opacity: 0.5;
	}
}

.block-b {
	$width-el: 0.25 * $unit;
	$height-el: 6.5 * $unit;
	$depth-el: 3 * $unit;

	@include cube($width-el, $height-el, $depth-el);
	width: $width-el;
	height: $depth-el * 2;
	position: absolute;
	top: 12 * $unit;
	left: 2.55 * $unit;
	transform: translateZ(3.5 * $unit);

	&__front {
		background-color: $green-5;
	}
	&__back {
		background-color: $green-1;
	}
	&__left {
		background-color: $green-4;
		box-shadow: 0 0 1 * $unit rgba($light-3, 0.5);
	}
	&__right {
		display: flex;
		justify-content: center;
		align-items: center;

		background-color: darken($green-3, 5);
		background-image: linear-gradient(
			to left,
			rgba($light-3, 0.35),
			rgba($light-3, 0.2)
		);

		&::before {
			content: "";
			position: absolute;
			width: 80%;
			height: 80%;
			background-image: repeating-linear-gradient(
				$neon 0 0.1 * $unit,
				darken($neon, 10) 0.3 * $unit,
				transparent 0.3 * $unit 0.6 * $unit
			);
		}
	}
	&__top {
		background-color: $green-1;
		background-image: linear-gradient(
			to left,
			rgba($light-3, 0.55),
			rgba($light-3, 0.35)
		);
	}
	&__bottom {
		background-color: $green-5;
	}
}

              
            
!

JS

              
                /*
	Designed by: Alex Harris 
	Original Image: https://www.artstation.com/artwork/vBYdY
*/

const b = document.body;
const h = document.querySelector("#h");
const a = document.querySelector("#a");
const block = document.querySelector("#block");
const s1 = document.querySelector(".s1");
const s2 = document.querySelector(".s2");
const unit = 1.75;
/*****************/
const mouseDownFunc = () => b.addEventListener("mousemove", moveFunc);
const mouseUpFunc = () => b.removeEventListener("mousemove", moveFunc);
const moveFunc = (e) => {
	let x = e.pageX / window.innerWidth - 0.5;
	let y = e.pageY / window.innerHeight - 0.5;

	h.style.transform = `
        perspective(${400 * unit}vmin)
        rotateX(${y * 30 + 66}deg)
        rotateZ(${-x * 420 + 40}deg)
        translateZ(${-14 * unit}vmin)
    `;
};
const playFunc = () => {
	s1.classList.toggle("is-screen-hidden");
	s2.classList.toggle("is-screen-hidden");
	h.classList.toggle("is-main-active");

	a.loop = true;
	if (a.paused) {
		a.play();
	} else {
		a.pause();
		a.currentTime = 0;
	}
};
/*****************/
h.addEventListener("mousedown", mouseDownFunc);
b.addEventListener("mouseup", mouseUpFunc);
block.addEventListener("click", playFunc);

              
            
!
999px

Console