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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                doctype html
html(lang="es", dir="ltr")
    head
        meta(name="viewport", content="width=device-width, user-scalable=no, initial-scale=1.0")
        meta(charset="utf-8")
        link(rel="stylesheet", type="text/css", href="main.css")

    body
        div.filter
        div.light
        div.main
            div.face
                - var n = 1
                while n < 14
                    div.face-i
                    - n++
            div.hair
                - var n = 1
                while n < 9
                    div.hair-i
                    - n++
            div.neck
                - var n = 1
                while n < 6
                    div.neck-i
                    - n++
            div.fc
                - var n = 1
                while n < 41
                    div.fc-i
                    - n++
            div.shirt
                - var n = 1
                while n < 10
                    div.shirt-i
                    - n++
            div.body
                - var n = 1
                while n < 16
                    div.body-i
                    - n++
            div.arm
                - var n = 1
                while n < 6
                    div.arm-i
                    - n++
            div.hand
                - var n = 1
                while n < 31
                    div.hand-i
                    - n++
                    
            div.micro-a
            div.micro-b
            
                
                
    
            

              
            
!

CSS

              
                $white-1: #ECE8D6;
$white-2: #F0EDD8;

$blue-1: #1a156e;
$blue-2: #070437;

$pink-1: #E1006D;
$pink-2: #C30065;
$pink-3: #a70659;

*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	user-select: none;
	-webkit-tap-highlight-color: transparent;

}
/* Generic */
body {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	overflow: hidden;
	background-image: linear-gradient(135deg, $blue-2, darken($blue-2, 20));
}

.main {
	position: relative;
	width: 60vw;
	height: 45vw;
}

.filter {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(110deg, darken($blue-2, 5) 32%, transparent 50%);
	z-index: 4000;
}

.light {
	position: absolute;
	top: 0;
	left: 50vw;
	width: 50vw;
	height: 100vh;
	z-index: 2000;
	transform: skewX(20deg) translate(-30%);
	background-image: linear-gradient(to bottom, rgba($white-1, .15),rgba($white-1, .035), transparent);
	filter: blur(2vw);
	z-index: 5000;

	@media(max-width: 600px){
		left: 30vw;
		width: 70vw;
	}
}

.micro-a {
	position: absolute;
	top: 10.5vw;
	right: 27vw;
	height: 5vw;
	width: 5vw;
	border-radius: 50%;
	border-top: 0.2vw solid $white-1;
	background-image: linear-gradient(to bottom, $blue-2, darken($blue-2, 10));
	z-index: 50;
}

.micro-b {
	position: absolute;
	top: 12vw;
	right: 30vw;
	height: 2.8vw;
	width: 15vw;
	background-image: linear-gradient(-5deg, darken($blue-2, 10), $blue-2 3.3vw, $white-1 3.3vw,$white-1 3.5vw, transparent 3.5vw);
	border-top-left-radius: 1vw;
	border-bottom-left-radius: 1vw;
}

.face {
	position: absolute;
	right: 7vw;
	top: 6.5vw;
	width: 21vw;
	height: 17vw;
	z-index: 50;
	// display: none;
	&-i {
		position: absolute;
		transform-origin: bottom right;

		&:nth-of-type(1) {
			top: 0.1vw;
			right: 1.2vw;
			width: 4vw;
			height: 2.4vw;
			transform: skewX(55deg);
			background-image: linear-gradient(to bottom, $white-1 .6vw , $pink-1 .6vw);
			border-right: 0.3vw solid $pink-3;
			z-index: 100;
		}

		&:nth-of-type(2) {
			top: 2.4vw;
			right: -.2vw;
			width: 4.4vw;
			height: 1.6vw;
			transform: skewX(45deg);
			background-image: linear-gradient(45deg, $pink-2 .6vw , $pink-1 .6vw);
			border-right: 0.3vw solid $pink-3;
			z-index: 100;
		}

		&:nth-of-type(3) {
			top: 4vw;
			right: 0vw;
			width: 4.5vw;
			height: 1.6vw;
			transform: skewX(-10deg);
			background-color: $pink-2;
			border-right: 0.3vw solid $pink-3;
			z-index: 100;
		}

		&:nth-of-type(4) {
			top: 5.6vw;
			right: 6.3vw;
			width: 4.5vw;
			height: 9vw;
			transform: skewX(-35deg);
			overflow: hidden;
			background-color: $pink-1;
			z-index: 100;

			&::before {
				content: '';
				position: absolute;
				bottom: 0;
				right: 0;
				width: 80%;
				height: 100%;
				transform-origin: top right;
				transform: skewY(35deg);
				background-color: darken($pink-2, 5);
			}

			&::after {
				content: '';
				position: absolute;
				bottom: 20%;
				left: 10%;
				width: 30%;
				height: 100%;
				transform-origin: bottom right;
				transform: skewX(-20deg) skewY(-50deg);
				background-color: darken($pink-2, 5);
			}
		}

		&:nth-of-type(5) {
			top: 1.7vw;
			right: 9.6vw;
			width: 7vw;
			height: 12.9vw;
			transform: skewX(-30deg);
			overflow: hidden;
			background-color: $pink-1;

			&::before {
				content: '';
				position: absolute;
				bottom: 40%;
				right: -20%;
				width: 90%;
				height: 15%;
				transform-origin: top right;
				transform: skewX(-30deg);
				background-color: $pink-2;
			}
		}

		&:nth-of-type(6) {
			top: 0.1vw;
			right: 5.4vw;
			width: 4vw;
			height: 1vw;
			transform: skewX(-40deg);
			border-left: 0.8vw solid $white-1;
			background-image: linear-gradient(to bottom, $white-1 .6vw , $pink-1 .6vw);
		}

		&:nth-of-type(7) {
			top: 1vw;
			right: 8.3vw;
			width: 5.2vw;
			height: 1.5vw;
			transform: skewX(10deg);
			border-top-left-radius: 0.4vw;
			border-top: 0.15vw solid $white-1;
			border-left: 0.2vw solid $white-1;
			background-image: linear-gradient(-45deg, $pink-1 3vw , $white-1 3vw);
			z-index: 100;
		}

		&:nth-of-type(8) {
			top: 1vw;
			right: 15.4vw;
			width: 4vw;
			height: 11.8vw;
			transform: skewX(-30deg);
			border-top-left-radius: 0.4vw;
			background-color: $pink-1;
		}

		&:nth-of-type(9) {
			top: 12.2vw;
			right: 16.4vw;
			width: 4.1vw;
			height: 2.5vw;
			transform: skewY(30deg);
			border-top-left-radius: 0.4vw;
			background-image: linear-gradient(5deg, $white-1 10%, $pink-3 10%, $pink-3 20%, darken($pink-3, 5));
		}

		&:nth-of-type(10) {
			top: 10.4vw;
			right: 17.15vw;
			width: 3.5vw;
			height: 1.9vw;
			transform: skewX(20deg);
			border-top-left-radius: 1.1vw;
			border-bottom-left-radius: 0.2vw;
			background-image: linear-gradient(to right, $white-1 15%, $pink-3 15%);
		}

		&:nth-of-type(11) {
			top: 8.5vw;
			right: 16.93vw;
			width: 4vw;
			height: 1.6vw;
			transform: skewY(-20deg);
			border-top-left-radius: 0.4vw;
			background-color: $pink-1;
			border-top-right-radius: 0.5vw;
			background-image: linear-gradient(-30deg, $pink-1 40%, $white-1 40%);
		}

		&:nth-of-type(12) {
			top: 12.1vw;
			right: 12.3vw;
			width: 4.2vw;
			height: 2.5vw;
			transform: skewX(20deg);
			background-color: $pink-3;

			&::before {
				content: '';
				position: absolute;
				top: -1.6vw;
				height: 2.5vw;
				width: 5vw;
				background-color: $pink-1;
			}
		}

		&:nth-of-type(13) {
			top: 1vw;
			right: 5vw;
			width: 4vw;
			height: 1vw;
			background-color: $pink-1;
		}
	}
}

.hair {
	top: 5vw;
	right: 1.5vw;
	position: absolute;
	height: 21vw;
	width: 14vw;
	// display: none;
	&-i {
		position: absolute;
		transform-origin: bottom right;

		&:nth-of-type(1) {
			top: 1vw;
			right: 2.5vw;
			width: 5.1vw;
			height: 2.4vw;
			transform: skewX(55deg);
			border-bottom-right-radius: 0.5vw;
			background-color: $blue-2;
		}

		&:nth-of-type(2) {
			top: 3.4vw;
			right: 2vw;
			width: 3vw;
			height: 2.4vw;
			transform: skewX(45deg);
			background-color: $blue-2;
		}

		&:nth-of-type(3) {
			top: 0.3vw;
			right: -.9vw;
			width: 19vw;
			height: 17vw;
			transform: rotateZ(-11deg);
			border-top-left-radius: 5.5vw;
			border-top-right-radius: 5.5vw;
			border-bottom-right-radius: 7vw;
			border-bottom: 0.1vw solid darken($white-1, 10);
			background-image: linear-gradient(to bottom, $blue-2 60%, darken($blue-2, 5));
		}

		&:nth-of-type(4) {
			top: 0vw;
			right: 6vw;
			width: 5.2vw;
			height: 2vw;
			border-top-left-radius: 5vw;
			border-top-right-radius: 5vw;
			border-left: 0.7vw solid $white-1;
			border-top: 0.3vw solid $white-1;
			border-right: 0.3vw solid $blue-2;
			background-image: linear-gradient(to bottom, $blue-1 , $blue-2);
		}

		&:nth-of-type(5) {
			top: 1vw;
			right: 4vw;
			width: 3vw;
			height: 2vw;
			border-top-left-radius: 50%;
			border-top-right-radius: 50%;
			transform: skewX(20deg) skewY(20deg);
			border-left: 0.3vw solid transparent;
			border-top: 0.2vw solid $white-1;
			background-image: linear-gradient(to bottom, $blue-1 .5vw , $blue-2);
		}

		&:nth-of-type(6) {
			top: 6.7vw;
			right: 5.4vw;
			width: 5.5vw;
			height: 4vw;
			transform: skewX(-35deg);
			background-color: $blue-2;
			z-index: 200;
		}

		&:nth-of-type(7) {
			top: 8.8vw;
			right: 6vw;
			width: 3vw;
			height: 4vw;
			z-index: 300;
			transform: skewX(30deg);
			background-color: $blue-2;
		}

		&:nth-of-type(8) {
			top: 8.8vw;
			right: 8.9vw;
			width: 4vw;
			height: 2.2vw;
			transform: skewX(-35deg);
			background-color: $blue-2;
			z-index: 300;
		}
	}
}

.neck {
	position: absolute;
	top: 18.5vw;
	right: 15.1vw;
	width: 13.8vw;
	height: 7.5vw;
	z-index: 1;
	// display: none;
	&-i {
		position: absolute;
		transform-origin: bottom right;

		&:nth-of-type(1) {
			bottom: 0;
			right: 0.5vw;
			width: 10.5vw;
			height: 9vw;
			transform: skewX(-15deg);
			background-image: linear-gradient(to left, $white-1 .1vw, $pink-1 .1vw, darken($pink-3, 2) .1vw);
		}

		&:nth-of-type(2) {
			bottom: 0;
			left: 0;
			width: 10.5vw;
			height: 9vw;
			transform: skewX(-30deg);
			background-image: linear-gradient(to right, darken($pink-3, 5), $pink-3 55%, $pink-1 55%);
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				bottom: 0vw;
				left: 1vw;
				border-bottom: 4vw solid darken($pink-1, 1);
				border-top: 1vw solid transparent;
				border-left: 1.6vw solid transparent;
				border-right: 5vw solid transparent;
				z-index: 100;
			}

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: -1.5vw;
				border-top: 9vw solid rgba($white-1, .8);
				border-bottom: 1vw solid transparent;
				border-left: 1.6vw solid transparent;
				border-right: 3vw solid transparent;
			}
		}
	}
}

.fc {
	position: absolute;
	right: 7vw;
	top: 6.5vw;
	width: 21vw;
	height: 17vw;
	z-index: 200;

	&-i {
		position: absolute;
		transform-origin: top left;

		&:nth-of-type(1) {
			top: 2.6vw;
			right: 6.6vw;
			border-top: 10vw solid $blue-2;
			border-bottom: 1vw solid transparent;
			border-left: 1vw solid transparent;
			border-right: 1vw solid transparent;
			transform: scale(.2) skewX(10deg) rotateZ(-40deg);
			z-index: 200;
		}

		&:nth-of-type(2) {
			top: 1.4vw;
			right: 7.1vw;
			width: 0.9vw;
			height: 0.9vw;
			transform: rotateZ(10deg);
			background-color: $blue-2;
			z-index: 200;
		}

		&:nth-of-type(3) {
			top: 1.6vw;
			right: 4.8vw;
			width: 2.3vw;
			height: 0.7vw;
			transform: rotateZ(40deg);
			background-image: linear-gradient(12deg, $blue-2 55%, transparent 55%);
			z-index: 200;
		}

		&:nth-of-type(4) {
			top: 3.3vw;
			right: 5.8vw;
			border-top: 1.5vw solid $blue-2;
			border-bottom: 1vw solid transparent;
			border-left: 0.2vw solid transparent;
			border-right: 0.2vw solid transparent;
			transform: rotateZ(-20deg);
			z-index: 200;
		}

		&:nth-of-type(5) {
			top: 2vw;
			right: 7.5vw;
			width: 1.6vw;
			height: 2vw;
			background-color: $pink-3;
			transform: skewX(40deg) skewY(0deg) rotateZ(30deg);
		}

		&:nth-of-type(6) {
			top: 3.5vw;
			right: 7vw;
			border-top: 3vw solid $pink-3;
			border-bottom: 1vw solid transparent;
			border-left: 0.3vw solid transparent;
			border-right: 0.3vw solid transparent;
			transform: rotateZ(-50deg);
		}

		&:nth-of-type(7) {
			top: 3.8vw;
			right: 7vw;
			border-top: 2.6vw solid $pink-3;
			border-bottom: 1vw solid transparent;
			border-left: 0.3vw solid transparent;
			border-right: 0.3vw solid transparent;
			transform: rotateZ(-30deg);
		}

		&:nth-of-type(8) {
			top: 2.5vw;
			right: 12.4vw;
			border-top: 2vw solid $pink-3;
			border-bottom: 1vw solid transparent;
			border-left: 0.3vw solid transparent;
			border-right: 0.3vw solid transparent;
			transform: rotateZ(-65deg) skewY(-30deg);
		}

		&:nth-of-type(9) {
			top: 3.5vw;
			right: 10.4vw;
			border-top: 2vw solid $pink-3;
			border-bottom: 1vw solid transparent;
			border-left: 0.4vw solid transparent;
			border-right: 0.4vw solid transparent;
			transform: rotateZ(15deg) skewY(-40deg);
		}

		&:nth-of-type(10) {
			top: 3vw;
			right: 7.4vw;
			border-top: 2vw solid $pink-3;
			border-bottom: 1vw solid transparent;
			border-left: 0.3vw solid transparent;
			border-right: 0.3vw solid transparent;
			transform: rotateZ(140deg);
		}

		&:nth-of-type(11) {
			top: 8.5vw;
			right: 10.8vw;
			border-top: 3vw solid $pink-2;
			border-bottom: 1vw solid transparent;
			border-left: 0.3vw solid transparent;
			border-right: 0.3vw solid transparent;
			transform: rotateZ(55deg);
		}

		&:nth-of-type(12) {
			top: 0.6vw;
			right: 4vw;
			width: 4.2vw;
			height: 1vw;
			background-color: $pink-3;
			transform: skewX(-35deg);

			&::before {
				content: '';
				position: absolute;
				bottom: -.1vw;
				left: 0.9vw;
				height: 80%;
				width: 30%;
				background-color: $white-1;
				z-index: 200;
				transform: rotateZ(-20deg);
			}
		}

		&:nth-of-type(13) {
			top: 1.2vw;
			right: 7.8vw;
			width: 1vw;
			height: 2.5vw;
			background-color: $pink-3;
			transform: skewY(35deg);
		}
		/**/
		&:nth-of-type(14) {
			top: 6vw;
			right: 12vw;
			width: 1vw;
			height: 1vw;
			background-color: $blue-2;
			transform: skewY(-30deg) rotateZ(-25deg);
			z-index: 200;
		}

		&:nth-of-type(15) {
			top: 5.3vw;
			right: 12vw;
			width: 1.2vw;
			height: 1.2vw;
			background-color: $blue-2;
			transform: skewY(-30deg) rotateZ(-20deg);
			z-index: 200;
		}

		&:nth-of-type(16) {
			top: 4vw;
			right: 11.3vw;
			width: 1vw;
			height: 1.8vw;
			background-color: $blue-2;
			transform: skewY(20deg) rotateZ(50deg);
			z-index: 200;
		}

		&:nth-of-type(17) {
			top: 3.4vw;
			right: 12.6vw;
			width: 0.6vw;
			height: 1.5vw;
			background-color: $blue-2;
			transform: skewX(20deg) rotateZ(30deg);
			z-index: 200;
		}

		&:nth-of-type(18) {
			top: 2.5vw;
			right: 11vw;
			width: 3vw;
			height: 1.2vw;
			background-color: $blue-2;
			transform: skewX(-20deg) rotateZ(40deg);
			z-index: 200;
		}

		&:nth-of-type(19) {
			top: 2.4vw;
			right: 12.7vw;
			width: 1vw;
			height: 1.1vw;
			border-left: 0.2vw solid $white-1;
			transform: skewX(-30deg) rotateZ(59deg);
			background-image: linear-gradient(to right , $blue-1, $blue-2);
			border-top-left-radius: 50%;
			z-index: 200;
		}
		/**/
		&:nth-of-type(20) {
			top: 6.3vw;
			right: 12.2vw;
			width: 0.8vw;
			height: 0.8vw;
			transform: rotateZ(30deg) skewY(-10deg);
			background-color: $white-2;
			z-index: 100;
		}

		&:nth-of-type(21) {
			top: 5.6vw;
			right: 12.2vw;
			width: 0.8vw;
			height: 0.8vw;
			transform: rotateZ(60deg) skewY(-10deg);
			background-color: $white-2;
			z-index: 100;
		}

		&:nth-of-type(22) {
			top: 5.1vw;
			right: 12.4vw;
			width: 0.8vw;
			height: 1vw;
			transform: rotateZ(60deg) skewY(0deg);
			background-color: $white-2;
			z-index: 100;
		}

		&:nth-of-type(23) {
			top: 4.5vw;
			right: 12.6vw;
			width: 1vw;
			height: 1.2vw;
			transform: rotateZ(60deg) skewY(0deg);
			background-color: $white-2;
			z-index: 100;
		}

		&:nth-of-type(24) {
			top: 3.8vw;
			right: 12.5vw;
			width: 1vw;
			height: 2.5vw;
			transform: rotateZ(80deg) skewY(20deg);
			background-color: $white-2;
			z-index: 100;
		}
		/**/
		&:nth-of-type(25) {
			top: 5vw;
			right: 12vw;
			width: 3vw;
			height: 3.9vw;
			transform: skewX(-30deg);
			border-bottom-right-radius: 2vw;
			background-color: $pink-3;
			border-left: 0.2vw solid $white-1;
		}
		/**/
		&:nth-of-type(26) {
			top: 7.7vw;
			right: 15vw;
			width: 2vw;
			height: 0.5vw;
			transform: skewX(30deg);
			background-color: $white-2;
		}

		&:nth-of-type(27) {
			top: 7vw;
			right: 16.2vw;
			width: 1vw;
			height: 1vw;
			transform: skewX(40deg);
			background-color: $white-2;
			z-index: 100;
		}

		&:nth-of-type(28) {
			top: 7.2vw;
			right: 15.8vw;
			border-top: 1vw solid $white-2;
			border-bottom: 1vw solid transparent;
			border-left: 0.3vw solid transparent;
			border-right: 0.3vw solid transparent;
			transform: rotateZ(180deg);
		}

		&:nth-of-type(29) {
			top: 7.2vw;
			right: 16.2vw;
			border-top: 1vw solid $white-2;
			border-bottom: 1vw solid transparent;
			border-left: 0.3vw solid transparent;
			border-right: 0.3vw solid transparent;
			transform: rotateZ(180deg);
		}

		&:nth-of-type(30) {
			top: 7.2vw;
			right: 16.2vw;
			height: 1.8vw;
			width: 1.8vw;
			background-color: $pink-3;
			border-top-left-radius: 50%;
			border-top-right-radius: 40%;
			border-bottom-left-radius: 40%;
			border-bottom-right-radius: 40%;
			transform: skewX(-10deg);
			border-left: 0.1vw solid $white-1;
			z-index: 200;

			&::before {
				content: '';
				position: absolute;
				bottom: 0;
				height: 1vw;
				width: 1vw;
				background-color: $pink-3;
			}

			&::before {
				content: '';
				position: absolute;
				left: 0.3vw;
				bottom: -.3vw;
				height: 0.5vw;
				width: 0.9vw;
				background-color: $pink-3;
				transform: skewX(40deg);
				border-left: 0.1vw solid $white-1;
			}
		}

		&:nth-of-type(31) {
			top: 6.4vw;
			right: 13vw;
			width: 1vw;
			height: 0.5vw;
			background-color: $white-2;
			transform: rotateZ(50deg) skewY(5deg);
		}

		&:nth-of-type(32) {
			top: 5.8vw;
			right: 13.4vw;
			width: 1.1vw;
			height: 0.5vw;
			background-color: $white-2;
			transform: rotateZ(70deg) skewY(-20deg);
		}

		&:nth-of-type(33) {
			top: 6.3vw;
			right: 14.1vw;
			border-top: 0.7vw solid $white-2;
			border-bottom: 0.7vw solid transparent;
			border-left: 0.3vw solid transparent;
			border-right: 0.3vw solid transparent;
			transform: rotateZ(230deg);
		}

		&:nth-of-type(34) {
			top: 6vw;
			right: 14.4vw;
			border-top: 0.7vw solid $white-2;
			border-bottom: 0.7vw solid transparent;
			border-left: 0.3vw solid transparent;
			border-right: 0.3vw solid transparent;
			transform: rotateZ(230deg);
		}

		&:nth-of-type(35) {
			top: 4.8vw;
			right: 14.5vw;
			width: 1vw;
			height: 0.5vw;
			background-color: $white-2;
			transform: rotateZ(50deg) skewY(-10deg);
		}
		/**/
		&:nth-of-type(36) {
			top: 15vw;
			right: 11vw;
			border-top: 4vw solid $pink-3;
			border-bottom: 4vw solid transparent;
			border-left: 0.4vw solid transparent;
			border-right: 0.4vw solid transparent;
			transform: skewY(-30deg);
		}

		&:nth-of-type(37) {
			top: 7.7vw;
			right: -.9vw;
			width: 6.5vw;
			height: 2.1vw;
			background-image: linear-gradient(to top, $pink-1, $pink-2 50%, darken($pink-2,5));
			transform: skewY(-40deg) rotateZ(60deg);
			border-bottom-right-radius: 1vw;
		}

		&:nth-of-type(38) {
			top: 10.5vw;
			right: 3.1vw;
			width: 4vw;
			height: 2vw;
			background-image: linear-gradient(-40deg, transparent .9vw, $pink-1 .9vw);
			transform: rotateZ(25deg);
			border-bottom-right-radius: 2vw;

			&::before {
				content: '';
				position: absolute;
				left: 10%;
				bottom: 0.5vw;
				width: 80%;
				height: 2vw;
				background-image: linear-gradient(to bottom, $pink-1, $pink-2, darken($pink-2,5));
				border-top-left-radius: 1vw;
				border-bottom-right-radius: 2vw;
			}
		}
	}
}

.shirt {
	position: absolute;
	top: 22vw;
	right: 4vw;
	width: 43vw;
	height: 23vw;

	&-i {
		position: absolute;
		transform-origin: bottom right;

		&:nth-of-type(1) {
			top: 4.5vw;
			right: 3vw;
			width: 25vw;
			height: 10vw;
			transform: skewX(40deg);
			background-image: linear-gradient(40deg, $blue-2 10vw, darken($blue-2, 5) 17vw);
		}

		&:nth-of-type(2) {
			top: 14.5vw;
			right: -.1vw;
			width: 25vw;
			height: 8.5vw;
			transform: skewX(20deg);
			background-image: linear-gradient(to bottom, $blue-2 60%, darken($blue-2, 10) );
		}

		&:nth-of-type(3) {
			bottom: 0;
			left: 4vw;
			width: 25vw;
			height: 18.4vw;
			transform: skewX(-5deg);
			background-image: linear-gradient(to bottom, $blue-2 12vw, darken($blue-2, 10));
		}

		&:nth-of-type(4) {
			top: 1vw;
			left: 10vw;
			width: 21vw;
			height: 4vw;
			transform: skewX(-15deg);
			background-color: $blue-2;
		}

		&:nth-of-type(5) {
			top: -.2vw;
			left: 7.5vw;
			width: 5.8vw;
			height: 4vw;
			transform: skewX(-15deg) rotateZ(-15deg);
			background-image: linear-gradient(to bottom, $white-1 .75vw, $pink-2 .75vw);
			z-index: 100;
		}

		&:nth-of-type(6) {
			top: -.7vw;
			left: 3vw;
			width: 3.5vw;
			height: 12vw;
			transform: skewX(-25deg) rotateZ(30deg);
			background-image: linear-gradient(-18deg, $pink-2 10.55vw, $white-1 10.55vw, $white-1 11.4vw, transparent 11.4vw);
			border-bottom-left-radius: 50%;
			z-index: 100;

			&::before {
				content: '';
				position: absolute;
				top: 1.1vw;
				left: -.5vw;
				width: 2vw;
				height: 2vw;
				transform: rotateZ(-18deg);
				background-image: linear-gradient(to bottom, $white-1 .8vw, $pink-2 .8vw);
			}

			&::after {
				content: '';
				position: absolute;
				right: 0;
				bottom: -1.5vw;
				width: 1.1vw;
				height: 101%;
				background-color: $pink-3;
				border-top-left-radius: 50%;
				z-index: 200;
				transform: skewY(45deg);
			}
		}

		&:nth-of-type(7) {
			top: 0.3vw;
			left: 5.5vw;
			width: 3.2vw;
			height: 8.8vw;
			transform: skewX(-25deg) rotateZ(-15deg);
			border-bottom-right-radius: 50%;
			z-index: 100;
			background-image: linear-gradient(to bottom, $white-1 .8vw, $pink-2 .8vw);

			&::before {
				content: '';
				position: absolute;
				bottom: -1.75vw;
				left: 0;
				width: 1.5vw;
				height: 2vw;
				background-image: linear-gradient(130deg, $pink-2 1.5vw, transparent 1.5vw);
			}
		}

		&:nth-of-type(8) {
			bottom: 0;
			left: 2vw;
			width: 5vw;
			height: 10vw;
			transform: skewX(-15deg);
			background-color: darken($blue-2, 10);
			z-index: -1;
		}
	}
}

.body {
	position: absolute;
	top: 22vw;
	right: 4vw;
	width: 43vw;
	height: 23vw;

	&-i {
		position: absolute;
		transform-origin: bottom right;

		&:nth-of-type(1) {
			top: 0.5vw;
			right: 8.8vw;
			width: 8vw;
			height: 7vw;
			transform: rotateZ(-40deg);
			border-right: 0.1vw solid $white-1;
			background-color: $pink-3;

			&::before {
				content: '';
				position: absolute;
				bottom: 0;
				width: 70%;
				height: 100%;
				background-image: linear-gradient(to bottom, $pink-1, $pink-2 , $pink-3 5.6vw);
			}
		}

		&:nth-of-type(2) {
			top: 5.2vw;
			right: 14.8vw;
			width: 11vw;
			height: 7.5vw;
			transform: rotateZ(-17deg);
			background-color: $pink-2;
			background-image: linear-gradient(to bottom, $pink-1, $pink-2 5.8vw, $pink-3 5.8vw);
		}

		&:nth-of-type(3) {
			top: 12.1vw;
			right: 25.2vw;
			width: 3.4vw;
			height: 3.8vw;
			transform: skewX(15deg);
			background-image: linear-gradient(to left, $pink-1 1.5vw, $pink-3 1.5vw);

			&::before {
				content: '';
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 1.6vw;
				background-color: $pink-3;
			}
		}

		&:nth-of-type(4) {
			top: 8.3vw;
			right: 26.2vw;
			width: 3.4vw;
			height: 3.8vw;
			transform: skewX(-15deg);
			background-image: linear-gradient(to left, $pink-1 1.5vw, $pink-3 1.5vw);
		}

		&:nth-of-type(5) {
			top: 0.85vw;
			right: 18.6vw;
			width: 10vw;
			height: 7.5vw;
			transform: skewX(-40deg);
			background-image: linear-gradient(80deg, $pink-3 1.8vw, $pink-1 1.8vw);
		}

		&:nth-of-type(6) {
			top: 5vw;
			right: 20vw;
			border-top: 4vw solid $pink-3;
			border-bottom: 4vw solid transparent;
			border-left: 1vw solid transparent;
			border-right: 1vw solid transparent;
			transform: skewY(40deg);
		}
		/**/
		&:nth-of-type(7) {
			top: 14.4vw;
			right: 3vw;
			width: 4vw;
			height: 4vw;
			transform: skewY(50deg);
			background-color: $pink-3;
		}

		&:nth-of-type(8) {
			top: 14.35vw;
			right: 0.2vw;
			width: 4vw;
			height: 7.8vw;
			background-color: $pink-3;
			transform: skewX(20deg);
		}

		&:nth-of-type(9) {
			top: 14.1vw;
			right: 4vw;
			width: 6vw;
			height: 8vw;
			transform: skewX(-5deg);
			background-image: linear-gradient(35deg, darken($pink-2, 5) 2vw, $pink-3 2vw);
		}

		&:nth-of-type(10) {
			top: 9.7vw;
			right: 6.9vw;
			width: 2.6vw;
			height: 4vw;
			transform: skewY(-50deg);
			background-color: $pink-3;

			&::before {
				content: '';
				position: absolute;
				width: 1vw;
				height: 1vw;
				bottom: -1vw;
				right: -.5vw;
				background-color: $pink-2;
			}
		}

		&:nth-of-type(11) {
			bottom: 0.8vw;
			right: 0;
			width: 6.5vw;
			height: 2vw;
			z-index: 200;
			transform: skewX(-20deg);
			background-image: linear-gradient(52deg, darken($blue-2, 5) 5.2vw, transparent 5.2vw);
		}

		&:nth-of-type(12) {
			top: -.2vw;
			left: 7.5vw;
			width: 5.8vw;
			height: 4vw;
			transform: skewX(-15deg) rotateZ(-15deg);
			background-color: $blue-2;
		}

		&:nth-of-type(13) {
			top: 1.1vw;
			left: 10.8vw;
			width: 5.8vw;
			height: 4vw;
			transform: skewX(-15deg) rotateZ(12deg);
			background-color: $blue-2;
		}
	}
}

.arm {
	position: absolute;
	bottom: 1vw;
	width: 30vw;
	height: 35vw;

	&-i {
		position: absolute;
		transform-origin: bottom right;

		&:nth-of-type(1) {
			top: 13.8vw;
			right: 7vw;
			width: 17vw;
			height: 8vw;
			border-bottom-right-radius: 50%;
			transform: rotateZ(-22deg);
			overflow: hidden;
			background-image: linear-gradient(50deg , darken($blue-2, 20), darken($blue-2, 15), darken($blue-2, 5) 9vw , $pink-2 9vw);
			border-top: 0.6vw solid $white-1;

			&::before {
				content: '';
				position: absolute;
				right: 2vw;
				top: 0.5vw;
				width: 8vw;
				height: 6vw;
				transform: rotateZ(25deg) skewX(-15deg);
				background-image: linear-gradient(to bottom, darken($pink-2, 10),darken($pink-2, 20));
			}

			&::after {
				content: '';
				position: absolute;
				right: 2vw;
				top: 1.25vw;
				width: 4vw;
				height: 2vw;
				transform: rotateZ(25deg) skewX(-15deg);
				background-image: linear-gradient(to bottom, darken($pink-2, 10),darken($pink-2, 20));
			}
		}

		&:nth-of-type(2) {
			top: 5vw;
			left: -3vw;
			width: 26vw;
			height: 9.5vw;
			transform: rotateZ(-45deg);
			border-top: 0.4vw solid $white-1;
			background-image: linear-gradient(-12deg, transparent 4vw, darken($pink-2, 20) 4vw, darken($pink-2, 10) 6vw);
			border-top-left-radius: 5vw;
			border-bottom-left-radius: 3vw;

			&::before {
				content: '';
				top: -.8vw;
				left: 75%;
				position: absolute;
				height: 6.8vw;
				width: 6vw;
				transform: skewX(20deg) rotateZ(-2deg);
				border-top: 0.4vw solid $white-1;
				background-image: linear-gradient(to bottom, darken($blue-2, 1), darken($blue-2, 10));
			}

			&::after {
				content: '';
				top: 0;
				left: 0;
				position: absolute;
				height: 105%;
				width: 9vw;
				border-bottom-right-radius: 4vw;
				border-top-left-radius: 5vw;
				border-bottom-left-radius: 3.5vw;
				background-image: linear-gradient(to right, darken($pink-2, 30), darken($pink-2, 10));
			}
		}

		&:nth-of-type(3) {
			top: 0vw;
			left: 9vw;
			transform: rotateZ(-140deg);
			border-top: 14vw solid darken($pink-3, 18);
			border-bottom: 1vw solid transparent;
			border-left: 0.8vw solid transparent;
			border-right: 0.8vw solid transparent;
			border-radius: 50%;

		}
	}
}

.hand {
	position: absolute;
	top: 9vw;
	left: 16.5vw;
	bottom: 1vw;
	width: 13vw;
	height: 11vw;

	&-i {
		position: absolute;
		transform-origin: top left;

		&:nth-of-type(1) {
			bottom: 0vw;
			left: 6vw;
			width: 5.2vw;
			height: 10vw;
			transform: rotateZ(40deg);
			background-color: darken($pink-2, 10);
			z-index: -1;
		}

		&:nth-of-type(2) {
			bottom: 1.2vw;
			left: 5vw;
			width: 3.2vw;
			height: 2vw;
			background-color: $pink-3;
		}

		&:nth-of-type(3) {
			bottom: 1vw;
			left: 7.1vw;
			width: 3.2vw;
			height: 2vw;
			transform: rotateZ(-30deg);
			background-color: $pink-3;
		}

		&:nth-of-type(4) {
			bottom: 2.1vw;
			left: 9.3vw;
			width: 3.2vw;
			height: 2vw;
			transform: rotateZ(-50deg);
			background-color: $pink-3;
		}

		&:nth-of-type(5) {
			top: 1vw;
			left: 10vw;
			width: 2.2vw;
			height: 3.5vw;
			transform: rotateZ(-15deg) skewX(15deg);
			border-top-right-radius: 40%;
			border-top-left-radius: 10%;
			border-bottom-left-radius: 30%;
			background-color: $pink-2;
			border-top: 0.15vw solid $white-1;
			overflow: hidden;
			z-index: 200;

			&::before {
				content: '';
				right: -5%;
				top: -5%;
				position: absolute;
				width: 40%;
				height: 110%;
				transform: rotateZ(-10deg);
				border-bottom-left-radius: 50%;
				background-color: $white-1;
			}

			&::after {
				content: '';
				left: 0;
				top: 0;
				position: absolute;
				width: 35%;
				height: 100%;
				transform: rotateZ(-10deg);
				border-top-right-radius: 50%;
				background-color: $pink-3;
			}
		}

		&:nth-of-type(6) {
			top: 0.5vw;
			left: 6.9vw;
			width: 2.8vw;
			height: 3.5vw;
			transform: rotateZ(-15deg) skewX(15deg);
			border-top-right-radius: 60%;
			border-top-left-radius: 0;
			background-color: $pink-2;
			border-top: 0.15vw solid $white-1;
			overflow: hidden;
			z-index: 201;

			&::before {
				content: '';
				right: -5%;
				top: -5%;
				position: absolute;
				width: 40%;
				height: 110%;
				transform: rotateZ(-10deg);
				border-bottom-left-radius: 50%;
				background-color: $white-1;
			}

			&::after {
				content: '';
				left: 0;
				top: 0;
				position: absolute;
				width: 35%;
				height: 100%;
				transform: rotateZ(-10deg);
				border-top-right-radius: 50%;
				background-color: $pink-3;
			}
		}

		&:nth-of-type(7) {
			top: 0.7vw;
			left: 4.8vw;
			width: 2.7vw;
			height: 3.5vw;
			transform: rotateZ(-15deg) skewX(15deg);
			border-top-right-radius: 70%;
			border-top-left-radius: 10%;
			background-color: $pink-2;
			border-top: 0.15vw solid $white-1;
			overflow: hidden;
			z-index: 202;

			&::before {
				content: '';
				right: -5%;
				top: -5%;
				position: absolute;
				width: 40%;
				height: 110%;
				transform: rotateZ(-10deg);
				border-bottom-left-radius: 50%;
				background-color: $white-1;
			}

			&::after {
				content: '';
				left: 0;
				top: 0;
				position: absolute;
				width: 35%;
				height: 100%;
				transform: rotateZ(-10deg);
				border-top-right-radius: 50%;
				background-color: $pink-3;
			}
		}

		&:nth-of-type(8) {
			top: 1vw;
			left: 3.3vw;
			width: 2.2vw;
			height: 3.5vw;
			transform: rotateZ(-15deg) skewX(15deg);
			border-top-right-radius: 70%;
			border-top-left-radius: 40%;
			background-color: $pink-2;
			z-index: 100;
			border-top: 0.3vw solid $white-1;
			border-left: 0.15vw solid transparent;
			overflow: hidden;
			z-index: 203;

			&::before {
				content: '';
				right: 0;
				top: 0;
				position: absolute;
				width: 40%;
				height: 100%;
				transform: rotateZ(-10deg);
				border-bottom-left-radius: 50%;
				background-color: $white-1;
			}
		}

		&:nth-of-type(9) {
			top: 0.8vw;
			left: 2vw;
			width: 5vw;
			height: 7.7vw;
			transform: skewX(-19deg);
			border-top-right-radius: 70%;
			border-top-left-radius: 20%;
			background-color: $pink-2;
			border-left: 0.4vw solid $white-1;
			border-top: 0.4vw solid $white-1;
		}

		&:nth-of-type(10) {
			top: 3vw;
			right: 1vw;
			width: 6vw;
			height: 5vw;
			border-bottom-right-radius: 40%;
			background-color: $pink-2;
		}
		/**/
		// &:nth-of-type(11) {
		// 	top: 2.6vw;
		// 	right: 1.4vw;
		// 	border-top: 2vw solid darken($pink-2, 10);
		// 	border-bottom: 1vw solid transparent;
		// 	border-left: 0.25vw solid transparent;
		// 	border-right: 0.25vw solid transparent;
		// 	border-radius: 40%;
		//
		// 	transform: rotateZ(15deg);
		// 	z-index: 350;
		// }
		&:nth-of-type(12) {
			top: 5vw;
			right: 3vw;
			width: 6vw;
			height: 2vw;
			background-color: darken($pink-2, 10);
			transform: skewX(25deg);
		}

		&:nth-of-type(13) {
			bottom: 2vw;
			right: 3.1vw;
			border-top: 2vw solid darken($pink-2, 10);
			border-bottom: 1vw solid transparent;
			border-left: 0.3vw solid transparent;
			border-right: 0.3vw solid transparent;
			transform: rotateZ(-15deg);
		}

		&:nth-of-type(14) {
			bottom: 1.7vw;
			right: 7.6vw;
			border-top: 2vw solid darken($pink-2, 10);
			border-bottom: 1vw solid transparent;
			border-left: 0.3vw solid transparent;
			border-right: 0.3vw solid transparent;
			transform: rotateZ(-25deg);
		}

		&:nth-of-type(15) {
			bottom: 1.2vw;
			right: 7.4vw;
			border-top: 1vw solid transparent;
			border-bottom: 1.5vw solid darken($pink-2, 10);
			border-left: 0.3vw solid transparent;
			border-right: 0.3vw solid transparent;
		}

		&:nth-of-type(16) {
			bottom: 1.7vw;
			left: 1.35vw;
			border-top: 3vw solid darken($pink-2, 10);
			border-bottom: 1vw solid transparent;
			border-left: 0.6vw solid transparent;
			border-right: 0.6vw solid transparent;
			transform: rotateZ(5deg);
		}
		// &:nth-of-type(17) {
		// 	top: 2.8vw;
		// 	left: 8.7vw;
		// 	border-top: 2vw solid darken($pink-2, 10);
		// 	border-bottom: 1vw solid transparent;
		// 	border-left: 0.25vw solid transparent;
		// 	border-right: 0.25vw solid transparent;
		// 	border-radius: 40%;
		//
		// 	transform: rotateZ(-5deg);
		// 	z-index: 350;
		//
		// }
		// &:nth-of-type(18) {
		// 	top: 3vw;
		// 	left: 6.25vw;
		// 	border-top: 3vw solid darken($pink-2, 10);
		// 	border-bottom: 1vw solid transparent;
		// 	border-left: 0.25vw solid transparent;
		// 	border-right: 0.25vw solid transparent;
		// 	z-index: 350;
		// 	border-radius: 40%;
		//
		// 	transform: rotateZ(-5deg);
		// }
		&:nth-of-type(19) {
			top: 2.5vw;
			left: 3.5vw;
			width: 2.5vw;
			height: 2.5vw;
			background-color: darken($pink-2, 10);
			transform: rotateZ(45deg) skewX(10deg);
		}

		&:nth-of-type(20) {
			top: 3.8vw;
			right: -1.2vw;
			width: 2.4vw;
			height: 2.3vw;
			z-index: 300;
			transform: rotateZ(-10deg) skewX(-20deg);
			border-radius: 35%;
			border-top: 0.4vw solid $white-1;
			background-image: linear-gradient(to bottom, $pink-2, darken($pink-2, 15));
			border-bottom: 0.4vw solid darken($pink-2, 15);
		}

		&:nth-of-type(21) {
			top: 2.9vw;
			right: 1.3vw;
			width: 2.2vw;
			height: 3.5vw;
			z-index: 300;
			border-bottom: 0.4vw solid darken($pink-2, 10);
			border-bottom-left-radius: 50%;
			border-bottom-right-radius: 30%;
			border-top-right-radius: 30%;
			overflow: hidden;
			background-image: linear-gradient(to bottom, $pink-2, darken($pink-2, 15));

			&::before {
				content: '';
				right: -5%;
				top: -5%;
				position: absolute;
				width: 20%;
				height: 110%;
				transform: rotateZ(-15deg);
				border-bottom-left-radius: 50%;
				background-color: $white-1;
			}

			&::after {
				content: '';
				left: 0;
				top: 0;
				position: absolute;
				width: 25%;
				height: 100%;
				transform: rotateZ(-5deg);
				border-top-right-radius: 50%;
				background-color: $pink-3;
			}
		}

		&:nth-of-type(22) {
			top: 3vw;
			right: 3.8vw;
			width: 2.4vw;
			height: 3.5vw;
			z-index: 300;
			border-bottom-left-radius: 50%;
			border-bottom-right-radius: 30%;
			border-top-right-radius: 10%;
			overflow: hidden;
			background-image: linear-gradient(to bottom, $pink-2, darken($pink-2, 15));

			&::before {
				content: '';
				right: -5%;
				top: -5%;
				position: absolute;
				width: 25%;
				height: 110%;
				transform: rotateZ(-5deg);
				border-bottom-left-radius: 50%;
				background-color: $white-1;
			}

			&::after {
				content: '';
				left: 0;
				top: 0;
				position: absolute;
				width: 32%;
				height: 100%;
				transform: rotateZ(5deg);
				border-top-right-radius: 50%;
				background-color: $pink-3;
			}
		}

		&:nth-of-type(23) {
			top: 3vw;
			right: 5.8vw;
			width: 2vw;
			height: 3.5vw;
			z-index: 300;
			border-bottom-left-radius: 50%;
			border-bottom-right-radius: 30%;
			border-top-right-radius:20%;
			overflow: hidden;
			background-image: linear-gradient(to bottom, $pink-2, darken($pink-2, 15));

			&::before {
				content: '';
				right: -2%;
				top: -5%;
				position: absolute;
				width: 27%;
				height: 110%;
				transform: rotateZ(-10deg);
				border-bottom-left-radius: 30%;
				background-color: $white-1;
			}

			&::after {
				content: '';
				left: 0;
				top: 0;
				position: absolute;
				width: 25%;
				height: 100%;
				transform: rotateZ(-5deg);
				border-top-right-radius: 50%;
				background-color: $pink-3;
			}
		}
	}
}

              
            
!

JS

              
                /*
	Designed by: MUTI
	Original image: https://dribbble.com/shots/6183956-The-Great-Pretender
*/
              
            
!
999px

Console