$bg: #0F1316;

$yellow-1: #FFDC97;

$red-1: #600004;

$black-1: #423352;
$black-2: #2E2250;
$white-1: #FFFFFF;
$white-2: #dae4ed;

$skin-1: #FFC4C5;
$skin-2: #FFB1B4;
$skin-3: #FFA0A5;

$cyan-1: #005788;
$cyan-2: #00467F;

$purple-1: #351C77;
$purple-2: #2B165D;

$green-1: #04798c;
$green-2: #008C9A;

$orange-1: #FF9B5A;
$orange-2: #FF552E;
$orange-3: #FF4624;
$orange-4: #FF371B;

$blue-1: #2764cc;
$blue-2: #001B7A;
$blue-3: #001682;
$blue-4: #001164;
$blue-5: #010a2a;
$blue-6: #010109;

/* Reset */
*, *::after, *::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
    transform-style: preserve-3d;
}
/* Generic */
body{
    width: 100%;
    height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: $bg;
}
.main{
	position: relative;
	width: 55vmax;
	height: 45vmax;
	// background-image: url("bg.jpg");
	background-size: cover;
}

/**/
.human{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	position: absolute;
	bottom: 2.5vmax;
	left: 27.5%;
	width: 21vmax;
	height: 30vmax;
	z-index: 1000;

	&__head{
		position: relative;
		display: flex;
		justify-content: center;
		width: 25%;
		height: 6vmax;

		z-index: 6000;

		&::before{
			content: '';
			position: absolute;
			width: .2vmax;
			height: .4vmax;
			bottom: 13%;
			border-radius: 50%;
			background-color: $black-2;
			z-index: 2000;
		}
	}

	&__hair-b{
		position: absolute;
		top: -4%;
		width: 7vmax;
		height: 6vmax;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		border-bottom-left-radius: 40%;
		border-bottom-right-radius: 40%;
		background-color: $black-2;

		&::before,
		&::after{
			content: '';
			position: absolute;
			width: 7vmax;
			height: 7vmax;
			border-top-left-radius: 40%;
			border-top-right-radius: 40%;
			border-bottom-left-radius: 30%;
			border-bottom-right-radius: 30%;
			background-color: $black-2;
			border-left: 1vmax solid $black-1;
			animation: hair 1s infinite alternate;
		}
		&::before{ transform: rotateZ(-20deg); }
		&::after{ transform: rotateZ(20deg); }
	}
	&__hair-c{
		position: absolute;
		top: -5%;
		z-index: -1;
		width: 110%;
		height: 1.5vmax;
		overflow: hidden;
		border-radius: 50%;
	}
	&__hair{
		width: 100%;
		height: 3vmax;
		background-color: $black-2;
		border-radius: 50%;
	}

	&__face{
		position: absolute;
		display: flex;
		justify-content: center;
		top: 7%;
		height: 90%;
		width: 65%;
		border-radius: 45%;
		background-color: $skin-1;
		border-bottom: .6vmax solid $black-2;
		border-left: .15vmax solid $black-2;
		border-right: .15vmax solid $black-2;
	}
		&__eye-l,
		&__eye-r{
			position: absolute;
			top: 45%;
			width: .3vmax;
			height: .5vmax;
			background-color: $black-2;
			border-radius: 50%;
			animation: eye 4s infinite alternate;
		}
		&__eye-l{ left: 22%; }
		&__eye-r{ right: 22%; }

		&__nose{
			position: absolute;
			width: .5vmax;
			height: 1.5vmax;
			bottom: 20%;
			border-radius: 50%;
			background-color: $skin-3;
		}
		&__cheeks-l,
		&__cheeks-r{
			position: absolute;
			bottom: 8%;
			width: .8vmax;
			height: .9vmax;
			background-color: $skin-2;
			border-radius: 50%;
		}
		&__cheeks-l{ left: 10%; }
		&__cheeks-r{ right: 10%; }

		&__mouth{
			position: absolute;
			bottom: 10%;
			width: .8vmax;
			height: 1vmax;
			border-bottom: .15vmax solid $red-1;
			border-radius: 50%;
		}

		&__eyebrow-l,
		&__eyebrow-r{
			position: absolute;
			top: 30%;
			width: 1vmax;
			height: .8vmax;
			border-top: .15vmax solid $black-2;
			border-radius: 50%;
		}
		&__eyebrow-l{ left: 10%; }
		&__eyebrow-r{ right: 10%; }

		&__ears{
			position: absolute;
			justify-content: space-between;
			top: 8%;
			width: 21%;
		}

			&__ear-l,
			&__ear-r{

				position: absolute;
				top: 30%;
				width: 1vmax;
				height: 1vmax;
				border-radius: 50%;
				background-color: $skin-3;
			}
			&__ear-l{ left: 0%; }
			&__ear-r{ right: 0%; }

	&__body-c{
		display: flex;
		justify-content: center;
		position: absolute;
		top: 17%;
		width: 100%;
		height: 11vmax;
		overflow: hidden;
		z-index: -1;

	}
		&__body{
			position: relative;
			display: flex;
			justify-content: center;

			width: 96%;
			height: 22vmax;
			border-radius: 50%;
			border-left: .9vmax solid $orange-1;
			border-right: 1vmax solid $orange-3;

			background:
				linear-gradient(135deg, $orange-3 25%, transparent 25%) -1vmax 0,
				linear-gradient(225deg, $orange-3 25%, transparent 25%) -1vmax 0,
				linear-gradient(315deg, $orange-3 25%, transparent 25%),
				linear-gradient(45deg, $orange-3 25%, transparent 25%);
			background-size: 2vmax 2vmax;
			background-color: $orange-2;
			overflow: hidden;

			&::before{
				content: '';
				position: absolute;
				top: -2vmax;
				width: 4vmax;
				height: 4vmax;
				border-radius: 50%;
				background-color: $skin-1;
				border: .5vmax solid $orange-4;
			}

		}
	&__arm-l,
	&__arm-r{
		position: absolute;
		bottom: 48%;
		width: 10vmax;
		height: 2.7vmax;

		background-color: $skin-1;
		z-index: 2000;
	}
	&__arm-l{
		left: 0;
		border-right: 4vmax solid $skin-2;
		border-bottom: .7vmax solid $skin-2;
		border-radius: 2vmax;
		animation: arm-l 1s ease infinite alternate;
	}
	&__arm-r{
		right: 2vmax;


		width: 2.25vmax;
		height: 1.5vmax;

		background-color: $white-2;
		border-top-left-radius: 2vmax;
		border-top-right-radius: 2vmax;
		animation: eye 2s infinite alternate;
		&::before{
			content: '';
			position: absolute;
			width: 3.25vmax;
			height: 2vmax;
			background-color: $skin-2;
			bottom: 0;
			left: .5vmax;

			border-bottom: .7vmax solid $skin-2;
			border-top-left-radius: 2vmax;
			border-top-right-radius: 2vmax;

		}
	}
	&__legs{
		position: absolute;
		bottom: 1.3vmax;
		width: 100%;
		height: 10vmax;
		overflow: hidden;
	}
	&__leg-l,
	&__leg-r{
		position: absolute;
		bottom: -2vmax;
		width: 4.5vmax;
		height: 130%;
	}
	&__leg-l{

		left: 3.3vmax;
		transform: rotateZ(-20deg);
		background-image:
			linear-gradient(
				80deg,
				transparent,
				transparent 35%,
				$blue-3 35%,
				$blue-3 40%,
				$blue-4 40%,
				$blue-4 90%
			);
		border-right: .5vmax solid $blue-5;
	}
	&__leg-r{

		right: 3.3vmax;
		transform: rotateZ(20deg);
		background-image:
			linear-gradient(
				-80deg,
				transparent,
				transparent 35%,
				$blue-3 35%,
				$blue-3 40%,
				$blue-4 40%,
				$blue-4 90%
			);
		border-left: .5vmax solid $blue-5;
	}

	&__shoes{
		display: flex;
		justify-content: space-between;
		position: absolute;
		bottom: 0;
		width: 45%;
		height: 2vmax;
	}
		&__shoe-c{
			bottom: 0;
			height: 1.8vmax;
			width: 4.2vmax;
			overflow: hidden;
			&:nth-of-type(1){ animation: shoe-l .125s ease infinite alternate ; }
		}
		&__shoe-l,
		&__shoe-r{
			position: relative;
			height: 200%;
			width: 100%;
			border-radius: 50%;
			overflow: hidden;
			background-color: $purple-2;

			&::before{
				content: '';
				position: absolute;
				width: 2.5vmax;
				height: 2vmax;
				top: -10%;
				background-color: $purple-1;
				border-radius: 50%;
			}
		}
		&__shoe-l{ &::before{ left: -15%; }}
		&__shoe-r{ &::before{ right: -15%; } }
}
/*==================*/
.table{
	display: flex;
	justify-content: center;
	align-content: flex-start;
	flex-wrap: wrap;
	position: absolute;
	width: 33vmax;
	height: 15vmax;
	bottom: 2vmax;
	left: 7vmax;

	z-index: 1000;

	&__top{
		width: 100%;
		height: 1vmax;
		border-top: .1vmax solid $yellow-1;
		background-color: $blue-1;
	}
	&__bottom{
		width: 95%;
		height: 2.5vmax;
		border-top: .75vmax solid $blue-4;
		background-color: $blue-2;
	}
	&__legs{
		position: relative;
		display: flex;
		width: 90%;
		height: 11vmax;
	}
	&__leg{
		position: absolute;
		top: 0;
		width: .6vmax;
		height: 100%;
		border-top: .75vmax solid $blue-4;
		background-color: $blue-2;
		&:nth-of-type(1){ left: 1%;}
		&:nth-of-type(2){ left: 9%;}
		&:nth-of-type(3){ left: 88%;}
		&:nth-of-type(4){ left: 96%;}
	}
}
/*==================*/

.laptop{
	display: flex;
	justify-content: center;
	align-items: center;

	position: absolute;
	top: -6.1vmax;
	left: 13vmax;
	width: 11vmax;
	height: 6vmax;
	background-color: $white-2;
	border-top: .2vmax solid $yellow-1;
	border-left: .2vmax solid $yellow-1;
	overflow: hidden;
	&::before{
		content: '';
		position: absolute;
		height: 1vmax;
		width: 1vmax;
		border-radius: 50%;
		background-color: $white-2;
		z-index: 100;
	}
	&::after{
		content: '';
		position: absolute;
		right: 20%;
		bottom: -40%;
		height: 300%;
		width: 300%;
		border-radius: 50%;
		background-color: $white-1;

	}
}
/*==================*/

.cup{

	position: absolute;
	top: -2.6vmax;
	left: 5vmax;
	width: 2vmax;
	height: 2.5vmax;
	background-image: linear-gradient(
		to bottom,
			$green-2,
			$green-2 10%,
			$green-1 10%,
			$green-1 20%,
			$green-2 20%,
			$green-2 80%,
			$green-1 80%,
			$green-1 90%,
			$green-2 90%,
		);

	&::before{
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(-135deg, rgba($yellow-1, .5) , rgba($yellow-1, .1), rgba($yellow-1, .0));
	}
	&::after{
		content: '';
		position: absolute;
		right: -.7vmax;
		top: .25vmax;
		width: .9vmax;
		height: 1.5vmax;
		border-top: .2vmax solid $green-1;
		border-bottom: .2vmax solid $green-2;
		border-right: .2vmax solid $green-2;
		border-left: .2vmax solid transparent;
		border-radius: 45%;
		z-index: -1;

	}
}
/*==================*/
.chair{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;

	position: absolute;
	width: 12vmax;
	height: 14vmax;
	bottom: 2vmax;
	left: calc(50% - 8vmax);

	&__top{
		position: relative;
		width: 100%;
		height: 5vmax;
		border-bottom: .7vmax solid $cyan-1;
		background-color: $blue-6;

		&::before{
			content: '';
			position: absolute;
			bottom: .1vmax;
			right: 0;
			width: 80%;
			height: 35%;
			border-radius: 100% 0% 100% 0% / 82% 100% 0% 18%  ;
			background-color: $blue-5;
		}
	}
	&__line{
		width: .7vmax;
		height: 7.2vmax;
		border-top: .7vmax solid $cyan-2;
		border-left: .15vmax solid $cyan-1;
		border-right: .15vmax solid $cyan-1;
		background-image: repeating-linear-gradient(to bottom, $cyan-1, $cyan-1 4%, $cyan-2 4%, $cyan-2 6%);

	}
	&__base{
		position: relative;
		width: 100%;
		height: .7vmax;
		border-bottom: .2vmax solid $cyan-2;
		background-color: $cyan-1;
	}
	&__wheels{
		position: absolute;
		bottom: 1vmax;
		width: 100%;
		height: .7vmax;
		z-index: -1;
	}
	&__wheel{
		position: absolute;
		height: .8vmax;
		width: .8vmax;
		top: .4vmax;
		border-radius: 50%;
		background-color: $blue-4;
		&:nth-of-type(1){ left: .4vmax; }
		&:nth-of-type(2){ right: .4vmax; }
	}
}
/*==================*/
.trashcan{
	position: absolute;
	width: 3.5vmax;
	height: 6vmax;
	bottom: 2.5vmax;
	left: 13.5vmax;
	background-image: repeating-linear-gradient(to bottom, $blue-5 0vmax, $blue-5 .4vmax, $blue-4 .4vmax, $blue-4 .45vmax );

	transform: perspective(350px) rotateX(-40deg);
	transform-origin: bottom center;

	&::before{
		content: '';
		position: absolute;
		left: calc(0%  - .2vmax);
		width: 115%;
		height: .2vmax;
		background-color: $blue-3;
	}
}
/*==================*/
.window{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 2.5vmax;
	right: 2.5vmax;
	width: 23.5vmax;
	height: 28vmax;

	border: .1vmax solid $blue-4;


	&__container{
		width: 98%;
		height: 98%;
		border: .2vmax solid $bg;
		background-image: linear-gradient(-45deg , $blue-6, darken($blue-5, 4));
		box-shadow: inset -.1vmax -.1vmax 0 $yellow-1;

		&::before{
			content: '';
			position: absolute;
			top: 30%;
			width: 100%;
			height: .5vmax;
			background-color: $bg;
		}
		&::after{
			content: '';
			position: absolute;
			left: calc(50% - .25vmax);
			height: 100%;
			width: .5vmax;
			background-color: $bg;
		}
	}
}
.building{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	position: absolute;
	bottom: .1vmax;
	right: .1vmax;
	width: 20%;
	height: 40%;

	padding: .75vmax .3vmax;
	border-top: .1vmax solid darken($yellow-1, 77);

	z-index: -1;
	overflow: hidden;

	&__window,
	&__window-f{
		height: 1.5vmax;
		width: .75vmax;
		margin: .45vmax;
		border-top-left-radius: 40%;
		border-top-right-radius: 40%;
		background-color: darken($blue-5, 0);
		border-bottom: .15vmax solid darken($blue-6, 2);
		border-left: .15vmax solid darken($blue-6, 2);
		&--active{ background-color: darken($black-2, 100); }
	}
	&__window-f{
		width: 39%;
		border-radius: 0;
		height: 1vmax;
	}
	&__window-on-1{ animation: win 20s infinite alternate; }
	&__window-on-2{ animation: win 12s infinite alternate; }
	&__window-on-3{ animation: win 10s infinite alternate; }
	&__window-on-4{ animation: win 15s infinite alternate; }

	&:nth-of-type(1){
		right: .1vmax;
		width: 25%;
		height: 65%;
		background-color: lighten($blue-6, 2);
	}
	&:nth-of-type(2){
		left: 15%;
		width: 36%;
		height: 30%;
		background-color: lighten($blue-6, 2);
	}
	&:nth-of-type(3){
		left: 40%;
		width: 40%;
		height: 50%;
		z-index: -2;
		background-color: $blue-6;
	}
	&:nth-of-type(4){
		left: 5%;
		width: 40%;
		height: 60%;
		background-color: darken($blue-6, 5);
		z-index: -3;
	}
}

/*==================*/
.lamp{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	position: absolute;
	top: 2vmax;
	left: 15vmax;
	width: 5vmax;
	height: 12vmax;
	animation: lamp 1s ease infinite alternate;
	&::before{
		content: '';
		position: absolute;
		width: 1vmax;
		height: 1vmax;
		left: calc(50% - .5vmax);
		bottom: 0;
		border-radius: 50%;
		background-color: $yellow-1;
	}
	&__top{
		position: relative;
		display: flex;
		justify-content: center;
		width: .25vmax;
		height: 70%;
		background-color: $blue-4;

	}
	&__light{
		position: absolute;
		width: 5vmax;
		height: 15vmax;
		bottom: -17.5vmax;
		background-image: linear-gradient(to bottom, rgba($yellow-1, .0075) , rgba($yellow-1, .025) );
		z-index: 4000;
		animation: light 4s ease infinite alternate;

		&::before,
		&::after{
			content: '';
			position: absolute;
			width: 4vmax;
			height: 16vmax;
		}
		&::before{
			top: -1vmax;
			right: 2vmax;
			transform: rotateZ(10deg);
			background-image: linear-gradient(to right, rgba($yellow-1, .1) , rgba($yellow-1, .1), rgba($yellow-1, .0));
		}
		&::after{
			top: -1vmax;
			left: 2vmax;
			transform: rotateZ(-10deg);
			background-image: linear-gradient(to left, rgba($yellow-1, .1) , rgba($yellow-1, .1), rgba($yellow-1, .0));
		}
	}
	&__base-c{
		position: relative;
		width: 100%;
		height: 2.5vmax;
		overflow: hidden;
		border-bottom: .1vmax solid $yellow-1;
		padding-bottom: 1vmax;
	}
	&__base{
		position: relative;
		width: 100%;
		height: 5vmax;
		border-radius: 50%;
		background-color: $blue-2;
		border-right: 1vmax solid $blue-4;
	}
}
/*==================*/
.bricks{
	position: absolute;
	width: 100%;
	height: 100%;
}
.brick{
	position: absolute;
	width: 10vmax;
	height: 6vmax;
	top: 10%;
	left: 25%;
	z-index: -1;
	background-image: repeating-linear-gradient(to bottom, $blue-4, $blue-4 .1vmax , transparent .1vmax, transparent 2vmax);
	opacity: .75;
	&:nth-of-type(2){
		top: 75%;
		left: 75%;
	}
	&::before,
	&::after{
		content: '';
		position: absolute;
		height: 2vmax;
		width: .1vmax;
		background-color: $blue-4;
		left: 25%;
	}
	&::after{
		left: 50%;
		bottom: 2vmax;
	}

}
/**********************/
/**********************/
/**********************/
@keyframes lamp {
	0%{
		transform: rotate(-1deg);
		transform-origin: top center;
	}
	100%{
		transform: rotate(1deg);
		transform-origin: top center;
	}
}
@keyframes light {
	0%,70%,72%,100%{ opacity: 1; }
	71%{ opacity: .6; }
}
@keyframes eye {
	0%, 10%, 50%, 90%, 100%{ transform: translateX(-.1vmax);}
	30%, 60%{ transform: translateX(.1vmax); }
}
@keyframes hair {
	0%{ border-left: 1vmax solid $black-1; }
	100%{ border-left: .9vmax solid $black-1; }
}
@keyframes arm-l {
	0%, 45%, 60%, 80%{
		transform: rotateZ(0deg);
		transform-origin: bottom left;
	}
	50%, 100%{
		transform: rotateZ(-3deg);
		transform-origin: bottom left;
	}
}

@keyframes shoe-l {
	0%{
		transform: rotateZ(0deg);
		transform-origin: bottom right;
	}
	100%{
		transform: rotateZ(5deg);
		transform-origin: bottom right;
	}
}
@keyframes win {
	0%,50%, 91%{
		background-color: darken($black-2, 100);
	}
	60%,90%{
		background-color: darken($black-2, 5);
	}
}