styles.scss

$skin: #fa8;
$eyes: #000;
$hair: #533;
$hair-shadow: #411;
$skin-shadow: #d64;
$sweat-shirt: #c34;
$sweat-shirt-shadow: #800;
$anim-shadow: #333;

/* Mixin: Reusable Extra Box */
@mixin extraBloc {
	position: relative;
	content: "";
	display: block;
}



/* Animation: Float */
@keyframes float {
	from { transform: translatey(0px);}
	50% { transform: translatey(20px);}
};

// Animation: Text Shadow
@keyframes shadow {
	from { 
		transform: translate(0, 20px) scale(.5);
		filter: blur(0);
		opacity: 0;
	}
	50% { 
		transform: translate(0, 0) scale(1);
		filter: blur(.5);
		opacity: .8;
		border-radius: 50%;

	}
	to { 
		transform: translate(0, 20px) scale(.5);
		filter: blur(0);		opacity: 0;

	}
};
/********************************************************
 --------------------  ANIMATION --------------------- */

// Animation: Text Hello
@keyframes hello {
	from {
		transform: translate(0, 30px);
		opacity: 0;
	}
	to {
		transform: translate(0, 0);
		opacity: 1;
	}
}

@keyframes fromAway {
	from { transform: translate3d(0px, -50px, -135px)}
}

.main {
	height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card {
    display: flex;
    flex-direction: column;
	height: 400px;
    padding: 30px;
	box-shadow: 1px 1px 10px 2px #DDD;
	border-radius: 3px;
}

#hello {
	font-family: 'Lato', 'Arial';
	font-weight: 200;
	margin: 10px auto 100px auto;
	animation: hello 1.2s ease-out;
}


/******************************************************
 --------------------  CHARACTER --------------------- */
.character {
	&-wrapper {
		display: flex;
		justify-content: center;
		animation: fromAway 1.5s ease-out,
	}
	animation: float 2.2s infinite ease-in-out;
   	max-width: 130px;
	align-self: center;
   
   /******************* HAIRCUT *******************/
	.haircut {
		position: absolute;
      .hair {
         position: relative;
         top: -40px;
         height: 170px;
         width: 160px;
         background: $hair;
         clip-path: polygon(
            0 50%,
            0 20%,
            15% 10%,
            20% 5%,
            50% 0,
            80% 15%,
            100% 40%,
            90% 70%,
            95% 90%,
            100% 80%,
            100% 90%,
            90% 100%,
            65% 80%,
            75% 50%,
            45% 30%,
            10% 30%
         );

         &::before {
            /*hair right side shadow*/
            @include extraBloc;
            top: 40px;
            height: 60px;
            width: 120px;
            background: $hair-shadow;
            border-radius: 85% 40% 25% 0;
         }
      }

      .bun {
         position: relative;
         height: 40px;
         width: 50px;
         background: $hair;
         top: - 218px;
         left: -25px;
         transform: rotate(25deg);
         padding: 50px 0 0 0;
         border-radius: 25px 0 0 20px;
         &::after {
            @include extraBloc;
            top: 0px;
            left: 10px;
            height: 40px;
            width: 40px;
            background: $hair-shadow;
            border-radius: 200% 15% 40% 95%;
         }
      }
	}
   
   /******************* HEAD *******************/
	.head {
		background-color: $skin;
		height: 100px;
		width: 130px;
		border-radius: 35% 35% 40% 35%;
		border-right: solid 15px $skin-shadow;
		border-bottom: solid 3px $skin-shadow;

		.ear {
			height: 40px;
			width: 30px;
			background: $skin;
			position: relative;
			left: -23px;
			top: -40px;
			border-radius: 50px 0 0 50px;
			&::after {
				/*piercing*/
				@include extraBloc;
				height: 15px;
				width: 15px;
				border-radius: 50%;
				border: solid 1px #fff;
				background: #000;
				top: 22px;
				left: 13px;
			}

			/*ear-shadow*/
			&::before {
				position: absolute;
				content: "";
				height: 20px;
				width: 20px;
				bottom: 10px;
				left: 10px;
				$skin: #fa8;
				border-radius: 25px 10px 10px;
				background-color: $skin-shadow;
			}
		}

		.eye {
			&-left,
			&-right {
				height: 35px;
				width: 35px;
				background: #000;
				border: 3px solid #fff;
				position: relative;
				margin: 0 5px;
				border-radius: 25px;
				&::before {
					@include extraBloc;
					content: "";
					height: 10px;
					width: 10px;
					background: #fff;
					border-radius: 25px;
					left: 5px;
				}
			}
			&-left {
				top: 40px;
				left: 10px;
			}
			&-right {
				top: 0px;
				left: 53%;
			}
		}
	}

   /******************* NECK *******************/
	.neck {
		height: 35px;
		width: 30px;
		background: $skin;
		border-radius: 0 0 50px 10px;
		position: relative;
		left: 50px;
		top: -20px;
		z-index: -9;
		&::after {
			@include extraBloc;
			height: 15px;
			width: 30px;
			background: $skin-shadow;
			border-radius: 0 0 25px 50px;
		}
	}

   /******************* TORSO *******************/
	.torso {
		height: 100px;
		width: 115px;
		background: $sweat-shirt;
		position: relative;
		z-index: -10;
		left: 5px;
		top: 5px;
		border-radius: 55px 55px 20px 45%;
		border-right: solid 5px $sweat-shirt-shadow;
		border-bottom: solid 2px $sweat-shirt-shadow;
	}

	&::after {
		@include extraBloc;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 3px;
		width: 55%;
		background-color: #DDD;
		background-image: radial-gradient(#777, #EEE);
		margin: 35px;
		opacity: 0;
		animation: shadow 2.2s infinite ease-in-out;
	}
}

/*****************************************************
*****************************************************/