body
	.mario
		.hat
			.logo
				span
				span
				span
				span
			.peak
		.face
			#overlay
			.brow
				span
			.brow-right
				span
		.chin
			.nose
				span
				span
				span
				span
				span
				span
				.tash
			.mouth
				span
			.eye 
				span 
				span
				span
			.eye-right
				span 
				span
				span
		#hair-left
		#hair-right
		#ear-left
			span
			span
		#ear-right
			span
			span
View Compiled
* {
	box-sizing: border-box;
}

:root {
	--size: 150;
	--unit: calc((var(--size) / 383) * 1vmin);
}

body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mario {
	height: calc(383 * var(--unit));
	width: calc(250 * var(--unit));
	position: fixed;
	top: 15%;

	* {
		position: absolute;
	}

	.hat {
		height: 26%;
		width: 52%;
		background: rgb(255, 129, 133);
		background: linear-gradient(
			90deg,
			rgba(255, 129, 133, 1) 0%,
			rgba(252, 28, 35, 1) 17%,
			rgba(205, 29, 34, 1) 100%
		);

		top: 0%;
		left: 24%;
		border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;
		z-index: 4;

		.logo {
			width: 34%;
			height: 38%;
			background: linear-gradient(180deg, white 60%, rgb(117, 117, 117) 100%);
			left: 33%;
			top: 12%;
			border-radius: 50%;
			box-shadow: inset 1px 1px 5px rgb(117, 117, 117);
			border: 2px solid rgb(204, 204, 204);

			span:nth-of-type(1) {
				width: 45%;
				height: 65%;
				background: rgba(205, 29, 34, 1);
				left: 11%;
				top: 10%;
				z-index: 10;
				transform: rotate(30deg);
				clip-path: polygon(25% 100%, 20% 10%, 40% 20%, 65% 100%);
				-webkit-clip-path: polygon(25% 100%, 20% 10%, 40% 20%, 65% 100%);
			}
			span:nth-of-type(2) {
				width: 45%;
				height: 65%;
				background: rgba(205, 29, 34, 1);
				left: 30%;
				top: 0%;
				z-index: 10;
				transform: rotate(-30deg);
				clip-path: polygon(25% 80%, 15% 20%, 34% 5%, 54% 67%);
				-webkit-clip-path: polygon(29% 80%, 12% 24%, 33% 5%, 59% 70%);
			}

			span:nth-of-type(3) {
				width: 45%;
				height: 65%;
				background: rgba(205, 29, 34, 1);
				left: 35%;
				top: 0%;
				z-index: 10;
				transform: rotate(30deg);
				clip-path: polygon(60% 85%, 30% 75%, 49% 11%, 74% 30%);
				-webkit-clip-path: polygon(60% 85%, 30% 72%, 50% 13%, 74% 30%);
			}
			span:nth-of-type(4) {
				width: 45%;
				height: 65%;
				background: rgba(205, 29, 34, 1);
				right: 6%;
				top: 10%;
				z-index: 10;
				transform: rotate(-30deg);
				clip-path: polygon(70% 95%, 30% 100%, 50% 30%, 75% 5%);
				-webkit-clip-path: polygon(70% 95%, 30% 100%, 50% 30%, 72% 5%);
			}
		}

		.peak {
			height: 38%;
			width: 86%;
			top: 43%;
			left: 7%;
			background: linear-gradient(
				90deg,
				rgb(248, 94, 99) 2%,
				rgb(189, 23, 29) 10%,
				rgba(205, 29, 34, 1) 100%
			);
			border-top: solid 5px rgb(255, 85, 85);
			border-radius: 50% 50% 0% 0%/ 100% 100% 0% 0%;
		}
	}

	.face {
		width: 38%;
		height: 27%;
		background: rgb(179, 121, 99);
		background: linear-gradient(
			276deg,
			rgba(179, 121, 99, 1) 25%,
			rgba(251, 188, 164, 1) 54%,
			rgba(255, 212, 195, 1) 80%
		);
		left: 31%;
		top: 14.5%;
		border-radius: 50% 50% 50% 50% / 22% 22% 70% 70%;
		z-index: 5;
		overflow: hidden;
		box-shadow: inset 0px 2px 2px rgb(134, 91, 73);

		#overlay {
			width: 100%;
			height: 20%;
			background: rgba(48, 37, 33, 0.2);
			filter: blur(1px);
			// opacity: .3;
			top: 0%;
			z-index: 20;
		}

		.brow {
			width: 26%;
			height: 18%;
			left: 12%;
			top: 0%;
			background: rgb(15, 6, 19);
			border-radius: 32% 80% 0% 0% / 100% 100% 0% 0%;

			span:nth-of-type(1) {
				width: 94%;
				height: 76%;
				border-radius: 50%;
				left: 3%;
				top: 70%;
				background: rgb(179, 121, 99);
				background: linear-gradient(
					276deg,
					rgba(251, 188, 164, 1) 54%,
					rgba(255, 212, 195, 1) 80%
				);
			}
		}

		.brow-right {
			width: 26%;
			height: 18%;
			right: 12%;
			top: 0%;
			background: rgb(15, 6, 19);
			border-radius: 32% 80% 0% 0% / 100% 100% 0% 0%;
			transform: scaleX(-1);

			span:nth-of-type(1) {
				width: 94%;
				height: 76%;
				border-radius: 50%;
				right: 3%;
				top: 70%;
				background: rgb(179, 121, 99);
				background: linear-gradient(
					-276deg,
					rgba(179, 121, 99, 1) 86%,
					rgb(233, 173, 150) 100%
				);
			}
		}
	}

	.chin {
		width: 42%;
		height: 20%;
		background: rgb(179, 121, 99);
		background: linear-gradient(
			276deg,
			rgba(179, 121, 99, 1) 25%,
			rgba(251, 188, 164, 1) 54%,
			rgba(255, 212, 195, 1) 80%
		);
		top: 21%;
		left: 29%;
		border-radius: 100% 100% 100% 100%;
		z-index: 5;

		.nose {
			width: 45%;
			height: 50%;
			top: 14%;
			left: 28%;
			border: calc(var(--unit) * 0.3) rgb(248, 198, 178) solid;
			background: rgb(179, 121, 99);
			background: radial-gradient(
				circle at 32% 22%,
				rgba(255, 212, 195, 1) 1%,
				rgba(251, 188, 164, 1) 54%,
				rgb(179, 121, 99) 80%
			);
			border-radius: 50%;

			.tash {
				width: 170%;
				height: 100%;
				top: -38%;
				left: -35%;
				background: rgb(179, 121, 99);
				background: linear-gradient(
					276deg,
					rgba(179, 121, 99, 1) 25%,
					rgba(251, 188, 164, 1) 54%,
					rgba(255, 212, 195, 1) 80%
				);

				z-index: -2;
				border-radius: 50%;
			}

			span:nth-of-type(1) {
				width: 49%;
				height: 78%;
				border-radius: 50%;
				left: -38%;
				top: 11%;
				transform: rotate(50deg);
				background: linear-gradient(
					0deg,
					rgb(15, 6, 19) 3%,
					rgb(44, 26, 29) 25%,
					rgb(15, 6, 19) 100%
				);
				z-index: -10;
			}

			span:nth-of-type(2) {
				width: 49%;
				height: 78%;
				border-radius: 50%;
				left: -18%;
				top: 33%;
				transform: rotate(30deg);
				background: linear-gradient(
					5deg,
					rgb(15, 6, 19) 18%,
					rgb(44, 26, 29) 29%,
					rgb(15, 6, 19) 90%
				);
				z-index: -10;
			}

			span:nth-of-type(3) {
				width: 49%;
				height: 78%;
				border-radius: 50%;
				left: 10%;
				top: 42%;
				transform: rotate(0deg);
				background: linear-gradient(
					0deg,
					rgb(15, 6, 19) 18%,
					rgb(44, 26, 29) 35%,
					rgb(15, 6, 19) 90%
				);
				z-index: -10;
			}

			span:nth-of-type(4) {
				width: 49%;
				height: 78%;
				border-radius: 50%;
				left: 40%;
				top: 42%;
				transform: rotate(0deg);
				background: rgb(15, 6, 19);
				z-index: -10;
			}

			span:nth-of-type(5) {
				width: 40%;
				height: 70%;
				border-radius: 50%;
				right: -13%;
				top: 40%;
				transform: rotate(-30deg);
				background: linear-gradient(
					0deg,
					rgb(15, 6, 19) 48%,
					rgb(44, 26, 29) 80%,
					rgb(15, 6, 19) 50%
				);
				z-index: -10;
			}

			span:nth-of-type(6) {
				width: 49%;
				height: 78%;
				border-radius: 50%;
				right: -38%;
				top: 11%;
				transform: rotate(-50deg);
				background: radial-gradient(
					circle at 100% 0%,
					rgb(15, 6, 19) 18%,
					rgb(44, 26, 29) 25%,
					rgb(15, 6, 19) 90%
				);
				z-index: -11;
			}
		}

		.mouth {
			width: 40%;
			height: 30%;
			top: 47%;
			left: 30%;
			border-radius: 0% 0% 35% 35%;
			border-bottom: 2px rgb(143, 85, 64) solid;
			filter: blur(0.4px);
			z-index: -11;

			span:nth-of-type(1) {
				width: 80%;
				height: 56%;
				border-radius: 0% 0% 35% 35%;
				left: 10%;
				top: 80%;
				border-bottom: 2px rgba(136, 93, 77, 0.3) solid;
				filter: blur(1px);
			}
		}

		.eye {
			width: 22%;
			height: 42%;
			border-radius: 50%;
			left: 20%;
			top: -10%;
			background: linear-gradient(0deg, white 87%, rgb(117, 117, 117) 100%);
			z-index: -1;
			overflow: hidden;
			box-shadow: -1px -1px 2px rgb(143, 85, 64), 1px 2px 2px rgb(143, 85, 64);

			span:nth-of-type(1) {
				width: 79%;
				height: 76%;
				border-radius: 50%;
				left: 25%;
				top: 13%;
				border: calc(var(--unit) * 0.5) rgb(78, 78, 190) solid;
				background: radial-gradient(
					circle at 70% 60%,
					rgba(46, 206, 255, 1) 50%,
					rgba(79, 54, 255, 1) 80%
				);
			}

			span:nth-of-type(2) {
				width: 45%;
				height: 46%;
				border-radius: 50%;
				left: 45%;
				top: 33%;
				background: radial-gradient(
					circle at 60% 70%,
					rgb(19, 8, 102) 20%,
					black 30%
				);
			}
			span:nth-of-type(3) {
				width: 12%;
				height: 10%;
				border-radius: 50%;
				left: 62%;
				top: 36%;
				background: white;
				filter: blur(1px);
			}
		}

		.eye-right {
			width: 22%;
			height: 42%;
			border-radius: 50%;
			top: -10%;
			background: linear-gradient(0deg, white 87%, rgb(117, 117, 117) 100%);
			z-index: -1;
			overflow: hidden;
			right: 20%;
			transform: scaleX(-1);
			box-shadow: -1px -1px 2px rgb(143, 85, 64), 1px 2px 2px rgb(143, 85, 64);

			span:nth-of-type(1) {
				width: 79%;
				height: 76%;
				border-radius: 50%;
				left: 25%;
				top: 13%;
				border: calc(var(--unit) * 0.5) rgb(78, 78, 190) solid;
				background: radial-gradient(
					circle at 70% 60%,
					rgba(46, 206, 255, 1) 50%,
					rgba(79, 54, 255, 1) 80%
				);
			}

			span:nth-of-type(2) {
				width: 45%;
				height: 46%;
				border-radius: 50%;
				left: 45%;
				top: 33%;
				background: radial-gradient(
					circle at 60% 70%,
					rgb(19, 8, 102) 20%,
					black 30%
				);
			}
			span:nth-of-type(3) {
				width: 12%;
				height: 10%;
				border-radius: 50%;
				left: 62%;
				top: 36%;
				background: white;
				filter: blur(1px);
			}
		}
	}

	%hair {
		height: 10%;
		width: 4%;
		background: rgb(128, 47, 43);
		background: linear-gradient(
			90deg,
			rgba(128, 47, 43, 1) 0%,
			rgba(85, 16, 12, 1) 48%,
			rgba(35, 7, 5, 1) 86%
		);

		z-index: 4;
		top: 19%;
		border-radius: 80% 0% 0% 50% / 80% 10% 0% 20%;
	}

	#hair-left {
		@extend %hair;
		left: 28%;
	}

	#hair-right {
		@extend %hair;
		right: 28%;
		transform: scaleX(-1);
	}

	%ear {
		height: 11%;
		width: 7%;
		background: rgb(179, 121, 99);

		top: 22%;
		z-index: -1;
		border-radius: 50% 0% 0% 100% / 22% 0% 0% 62%;
	}

	#ear-left {
		@extend %ear;
		left: 23%;
		background: linear-gradient(
			276deg,
			rgba(179, 121, 99, 1) 25%,
			rgba(251, 188, 164, 1) 54%,
			rgba(255, 212, 195, 1) 80%
		);

		span:nth-of-type(1) {
			width: 65%;
			height: 56%;
			border-radius: 50% 100% 0% 100%;
			left: 20%;
			top: 17%;
			background: linear-gradient(
				-150deg,
				rgba(179, 121, 99, 1) 25%,
				rgba(251, 188, 164, 1) 54%,
				rgba(255, 212, 195, 0.1) 80%
			);
			border-left: 2px rgba(143, 85, 64, 0.2) solid;
			filter: blur(0.4px);
		}

		span:nth-of-type(2) {
			width: 35%;
			height: 36%;
			border-radius: 50% 100% 0% 100%;
			left: 50%;
			top: 37%;
			background: linear-gradient(
				-150deg,
				rgba(179, 121, 99, 1) 25%,
				rgba(251, 188, 164, 1) 54%,
				rgba(255, 212, 195, 0.1) 80%
			);
			border-top: 2px rgba(143, 85, 64, 0.4) solid;
			border-left: 2px rgba(143, 85, 64, 0.4) solid;
			filter: blur(0.4px);
		}
	}

	#ear-right {
		@extend %ear;
		right: 23%;
		transform: scaleX(-1);
		background: linear-gradient(
			-276deg,
			rgba(179, 121, 99, 1) 25%,
			rgb(216, 157, 134) 54%
		);

		span:nth-of-type(1) {
			width: 65%;
			height: 56%;
			border-radius: 50% 100% 0% 100%;
			left: 20%;
			top: 17%;
			background: linear-gradient(
				-150deg,
				rgba(179, 121, 99, 1) 25%,
				rgba(251, 188, 164, 1) 54%,
				rgba(255, 212, 195, 0.1) 80%
			);
			border-left: 2px rgba(143, 85, 64, 0.2) solid;
			filter: blur(0.4px);
		}

		span:nth-of-type(2) {
			width: 35%;
			height: 36%;
			border-radius: 50% 100% 0% 100%;
			left: 50%;
			top: 37%;
			background: linear-gradient(
				-150deg,
				rgba(179, 121, 99, 1) 25%,
				rgba(251, 188, 164, 1) 54%,
				rgba(255, 212, 195, 0.1) 80%
			);
			border-top: 2px rgba(143, 85, 64, 0.4) solid;
			border-left: 2px rgba(143, 85, 64, 0.4) solid;
			filter: blur(0.4px);
		}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.