style.css

html,
body {
	overflow: hidden;
	/* Pattern ARGYLE   */
	background-color: #6d695c;
	background-image: repeating-linear-gradient(
			120deg,
			rgba(255, 255, 255, 0.1),
			rgba(255, 255, 255, 0.1) 1px,
			transparent 1px,
			transparent 60px
		),
		repeating-linear-gradient(
			60deg,
			rgba(255, 255, 255, 0.1),
			rgba(255, 255, 255, 0.1) 1px,
			transparent 1px,
			transparent 60px
		),
		linear-gradient(
			60deg,
			rgba(0, 0, 0, 0.1) 25%,
			transparent 25%,
			transparent 75%,
			rgba(0, 0, 0, 0.1) 75%,
			rgba(0, 0, 0, 0.1)
		),
		linear-gradient(
			120deg,
			rgba(0, 0, 0, 0.1) 25%,
			transparent 25%,
			transparent 75%,
			rgba(0, 0, 0, 0.1) 75%,
			rgba(0, 0, 0, 0.1)
		);
	background-size: 70px 120px;
}

.cartoon {
	position: absolute;
	bottom: 8vmin;
	left: 30%;
	transform: translate(-50%, 0%);
	width: 80vmin;
	height: 80vmin;
	background: radial-gradient(#0002, transparent 70%);
}
.cartoons {
	position: absolute;
	bottom: 8vmin;
	left: 70%;
	transform: translate(-50%, 0%);
	width: 80vmin;
	height: 80vmin;
	background: radial-gradient(#0002, transparent 70%);
}

.cartoon div {
	position: absolute;
	box-sizing: border-box;
}

.cartoons div {
	position: absolute;
	box-sizing: border-box;
}
.b {
	border: 0.5vmin solid;
}

.r {
	border-radius: 20%;
}

.hb::before,
.ha::after {
	content: "";
	display: block;
	position: absolute;
	box-sizing: border-box;
}

/****/
.cartoon {
	--skin: #feb;
	--glasses: #444;
	--shadow: #fca;
	--line: #222;
	--freckle: #ca7;
	--eye: brown;
	--hair: black;
	--shirt: white;
	--shirt-contrast: #000;
	color: var(--line);
}

.cartoons {
	--skin: #fdb;
	--glasses: #222;
	--shadow: #fca;
	--line: #222;
	--freckle: #ca7;
	--eye: #0ce;
	--hair: brown;
	--shirt: white;
	--shirt-contrast: #a00;
	color: var(--line);
}
.head {
	width: 45%;
	height: 55%;
	background: var(--skin);
	border-radius: 100% / 120% 120% 60% 60%;
	top: 10%;
	left: 50%;
	transform: translate(-50%, 0);
	box-shadow: 0 -5vmin 0 -0.5vmin var(--hair);
}

.glasses {
	width: 6%;
	height: 6%;
	border: 1vmin solid transparent;
	border-top-color: var(--glasses);
	top: 35%;
	left: 50%;
	transform: translate(-50%, 0);
}

.glasses::before,
.glasses::after {
	width: 750%;
	height: 750%;
	border: 1vmin solid var(--glasses);
	border-radius: 40%;
	top: -350%;
	left: -725%;
	/*  Pattern HOUNDSTOOTH */
	background: linear-gradient(
				-45deg,
				white 25%,
				transparent 25%,
				transparent 75%,
				black 75%,
				black
			)
			0 0,
		linear-gradient(
				-45deg,
				black 25%,
				transparent 25%,
				transparent 75%,
				white 75%,
				white
			)
			1em 1em,
		linear-gradient(
				45deg,
				black 17%,
				transparent 17%,
				transparent 25%,
				black 25%,
				black 36%,
				transparent 36%,
				transparent 64%,
				black 64%,
				black 75%,
				transparent 75%,
				transparent 83%,
				black 83%
			)
			1em 1em;
	background-color: white;
	background-size: 2em 2em;
}

.glasses::after {
	left: 75%;
	border-right: 0.75vmin solid var(--glasses);
	border-top: 1vmin solid var(--glasses);
}

.freckles {
	width: 0.75vmin;
	height: 0.75vmin;
	background: var(--freckle);
	color: var(--freckle);
	top: 55%;
	left: 23%;
	box-shadow: -2vmin 2vmin, 2.25vmin 2vmin, 19vmin 0, 17vmin 1.75vmin,
		21.25vmin 2vmin;
	opacity: 0.5;
}

.cheeks {
	width: 90%;
	height: 17%;
	background: #ff00002a;
	top: 50%;
	left: 5%;
	filter: blur(2vmin);
}

.eye {
	width: 25%;
	height: 20%;
	background: #fff;
	border-radius: 90% / 120% 90% 20% 30%;
	top: 33%;
	left: 14%;
	transform: rotate(-2deg);
	box-shadow: 0 -3vmin 3vmin var(--shadow);
	overflow: hidden;
}

@keyframes blink {
	0%,
	5%,
	100% {
		transform: translate(-50%, 20%) rotate(1deg);
	}
	2.5% {
		transform: translate(-50%, 100%) rotate(1deg);
	}
}

.eye::after {
	width: 150%;
	height: 100%;
	border-radius: 50%;
	left: 50%;
	transform: translate(-50%, 20%) rotate(1deg);
	box-shadow: 0 0 0 13vmin rgba(180, 0, 0, 0.05), 0 0 0 13vmin var(--skin);
	animation: blink 7s infinite;
}

.eye::before {
	width: 3vmin;
	height: 3vmin;
	background: #fff;
	box-shadow: inset 0.75vmin -0.75vmin 0 1vmin var(--line),
		1.5vmin -0.75vmin 0 -1.25vmin white, 0 0 0 1.5vmin var(--eye);
	border-radius: 50%;
	top: 40%;
	left: 55%;
	transform: translate(-50%, 0);
}

.eye + .eye {
	transform: scaleX(-1) rotate(-2deg);
	left: auto;
	right: 14%;
}

.eye + .eye::before {
	box-shadow: inset -0.75vmin -0.75vmin 0 1vmin var(--line),
		-1.5vmin -1vmin 0 -1.25vmin white, 0 0 0 1.5vmin var(--eye);
}

.nose {
	width: 15%;
	height: 10%;
	border: 0.125vmin solid transparent;
	border-top: 0.5vmin solid var(--freckle);
	top: 65%;
	left: 50%;
	transform: translate(-50%, 0%);
	background: var(--skin);
	background: linear-gradient(var(--skin), transparent 70%);
}

.mouth {
	width: 60%;
	height: 25%;
	left: 20%;
	top: 60%;
	border: 0.5vmin solid transparent;
	border-right: 0.125vmin solid transparent;
	border-bottom: 0.5vmin solid var(--freckle);
	transform: rotate(6deg);
}

.mouth::after {
	width: 4vmin;
	height: 4vmin;
	border-radius: 50%;
	border: 0.25vmin solid transparent;
	border-left: 0.5vmin solid var(--freckle);
	transform: rotate(35deg);
	top: 71%;
	left: 6%;
}

.eyebrow {
	width: 30%;
	height: 18%;
	border: 0.5vmin solid transparent;
	border-left: 1vmin solid transparent;
	border-top: 1.75vmin solid var(--hair);
	top: 23%;
	left: 11%;
}

.eyebrow + .eyebrow {
	left: auto;
	right: 11%;
	border-right: 1vmin solid transparent;
	height: 20%;
	top: 22.5%;
}

.ear {
	width: 20%;
	height: 30%;
	background: var(--skin);
	border-radius: 100% 100% 0% 90%;
	background-image: linear-gradient(to right, transparent 20%, var(--shadow));
	transform: rotate(-10deg);
	top: 21%;
	left: 17%;
}

.ear::before {
	width: 70%;
	height: 65%;
	top: 22%;
	left: 15%;
	border-radius: 50%;
	border: 0.5vmin solid var(--freckle);
	border-left: 0.125vmin solid transparent;
	opacity: 0.5;
}

.ear::after {
	width: 30%;
	height: 20%;
	border-radius: 50%;
	border: 0.5vmin solid var(--freckle);
	top: 50%;
	left: 40%;
	opacity: 0.7;
	box-shadow: 0 0 3vmin 0vmin var(--shadow);
}

.ear + .ear {
	transform: scaleX(-1) rotate(-12deg);
	left: auto;
	right: 17.5%;
}

.hair-top {
	width: 5vmin;
	height: 5vmin;
	background: var(--hair);
	color: var(--hair);
	left: 50%;
	top: -2.25%;
	transform: translate(-50%, 0);
	box-shadow: 4vmin 1vmin 0 -0.25vmin, 3vmin -1vmin, 9vmin 0.75vmin 0 0.5vmin,
		-4vmin 0.5vmin, -8vmin 0.25vmin 0 -0.5vmin;
}

.hair-back {
	top: -3%;
	left: 50%;
	transform: translate(-50%, 0);
	width: 10%;
	height: 10%;
	background: var(--hair);
	color: var(--hair);
	box-shadow: 6vmin 2vmin 0 1vmin, 12vmin 4vmin 0 -0.5vmin,
		15vmin 10vmin 0 1.5vmin, 18.75vmin 15vmin 0 -0.5vmin, -5vmin 1vmin,
		-9vmin 1vmin 0 -0.5vmin, -12.5vmin 6vmin 0 2vmin, -17vmin 9vmin,
		-17.5vmin 13.5vmin 0 0.25vmin;
}

.neck {
	width: 20%;
	height: 25%;
	top: 52%;
	left: 50%;
	background: var(--skin);
	transform: translate(-50%, 0);
	background-image: linear-gradient(var(--shadow), transparent 70%);
	border-radius: 100% / 0 0 30% 30%;
}
/* Pattern ZIGZAG */
.shirt {
	width: 80%;
	height: 100%;
	border-radius: 30vmin;
	/*   background: var(--shirt); */
	background: linear-gradient(135deg, #eceddc 25%, transparent 25%) -50px 0,
		linear-gradient(225deg, #eceddc 25%, transparent 25%) -50px 0,
		linear-gradient(315deg, #eceddc 25%, transparent 25%),
		linear-gradient(45deg, #eceddc 25%, transparent 25%);
	background-size: 100px 100px;
	background-color: #ec173a;
	top: 72%;
	left: 50%;
	transform: translate(-50%, 0);
	font-family: Cooper, "Cooper Black", Copper, "Copper Black", monospace,
		monospace;
	font-weight: bold;
	font-size: 8vmin;
	text-align: center;
	line-height: 7.5vmin;
	padding-top: 13vmin;
	color: var(--shirt-contrast);
	overflow: hidden;
}

.shirt::before {
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 36%;
	height: 18%;
	background: var(--shirt-contrast);
	border-radius: 50%;
}
/* second shirt */
.shirts {
	width: 80%;
	height: 100%;
	border-radius: 30vmin;
	/* Pattern MADRAS */
	background-color: hsl(34, 53%, 82%);
	background-image: repeating-linear-gradient(
			45deg,
			transparent 5px,
			hsla(197, 62%, 11%, 0.5) 5px,
			hsla(197, 62%, 11%, 0.5) 10px,
			hsla(5, 53%, 63%, 0) 10px,
			hsla(5, 53%, 63%, 0) 35px,
			hsla(5, 53%, 63%, 0.5) 35px,
			hsla(5, 53%, 63%, 0.5) 40px,
			hsla(197, 62%, 11%, 0.5) 40px,
			hsla(197, 62%, 11%, 0.5) 50px,
			hsla(197, 62%, 11%, 0) 50px,
			hsla(197, 62%, 11%, 0) 60px,
			hsla(5, 53%, 63%, 0.5) 60px,
			hsla(5, 53%, 63%, 0.5) 70px,
			hsla(35, 91%, 65%, 0.5) 70px,
			hsla(35, 91%, 65%, 0.5) 80px,
			hsla(35, 91%, 65%, 0) 80px,
			hsla(35, 91%, 65%, 0) 90px,
			hsla(5, 53%, 63%, 0.5) 90px,
			hsla(5, 53%, 63%, 0.5) 110px,
			hsla(5, 53%, 63%, 0) 110px,
			hsla(5, 53%, 63%, 0) 120px,
			hsla(197, 62%, 11%, 0.5) 120px,
			hsla(197, 62%, 11%, 0.5) 140px
		),
		repeating-linear-gradient(
			135deg,
			transparent 5px,
			hsla(197, 62%, 11%, 0.5) 5px,
			hsla(197, 62%, 11%, 0.5) 10px,
			hsla(5, 53%, 63%, 0) 10px,
			hsla(5, 53%, 63%, 0) 35px,
			hsla(5, 53%, 63%, 0.5) 35px,
			hsla(5, 53%, 63%, 0.5) 40px,
			hsla(197, 62%, 11%, 0.5) 40px,
			hsla(197, 62%, 11%, 0.5) 50px,
			hsla(197, 62%, 11%, 0) 50px,
			hsla(197, 62%, 11%, 0) 60px,
			hsla(5, 53%, 63%, 0.5) 60px,
			hsla(5, 53%, 63%, 0.5) 70px,
			hsla(35, 91%, 65%, 0.5) 70px,
			hsla(35, 91%, 65%, 0.5) 80px,
			hsla(35, 91%, 65%, 0) 80px,
			hsla(35, 91%, 65%, 0) 90px,
			hsla(5, 53%, 63%, 0.5) 90px,
			hsla(5, 53%, 63%, 0.5) 110px,
			hsla(5, 53%, 63%, 0) 110px,
			hsla(5, 53%, 63%, 0) 140px,
			hsla(197, 62%, 11%, 0.5) 140px,
			hsla(197, 62%, 11%, 0.5) 160px
		);
	top: 72%;
	left: 50%;
	transform: translate(-50%, 0);
	font-family: Cooper, "Cooper Black", Copper, "Copper Black", monospace,
		monospace;
	font-weight: bold;
	font-size: 8vmin;
	text-align: center;
	line-height: 7.5vmin;
	padding-top: 13vmin;
	color: var(--shirt-contrast);
	overflow: hidden;
}

.shirts::before {
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 36%;
	height: 18%;
	background: var(--shirt-contrast);
	border-radius: 50%;
}

/***/