Untitled

<html>
<head>
	<style>
		body {
			background: #accaf9;
		}

		.body {
			position: relative;
			margin: auto;
			display: block;
			width: 200px;
			height: 500px;
			background: none;
			margin-top: 1em
		}

		.head {
			position: absolute;
			top: 0;
			left: 50%;
			width: 50%;
			height: 17.5%;
			border-radius: 50%;
			transform: translateX(-50%);
			z-index: 21;
		}

		.face {
			position: absolute;
			z-index: 20;
			top: 10%;
			left: 50%;
			width: 70%;
			height: 100%;
			background: #F0BEAF;
			transform: translateX(-50%);
			border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
		}

		.hair {
			z-index: 3;
			top: 0;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 90%;
			height: 100%;
			border-radius: 100%;
			background: #424B54;
		}

		.fringe {
			z-index: 99;
			position: absolute;
			top: 1%;
			left: 50%;
			transform: translateX(-50%);
			width: 50%;
			height: 40%;
			background: #424B54;
			border-radius: 100% 0% 100% 100%;
		}

		.fringe:before, .fringe:after {
			position: absolute;
			content: '';
			top: 40%;
			width: 30%;
			height: 70%;
			background: #424B54;
			border-radius: 100%;
		}

		.fringe:before {
			left: -28%;
			transform: rotate(10deg);
		}

		.fringe:after {
			right: -28%;
			transform: rotate(-10deg);
		}

		.ear {
			z-index: 5;
			position: absolute;
			top: 41%;
			width: 25%;
			height: 30%;
			border-radius: 100%;
			background: #F0BEAF;
		}

		.ear:after {
			content: ' ';
			background: #D7A596;
			border-radius: 100%;
			position: absolute;
			width: 45%;
			height: 60%;
			top: 20%;
		}

		.ear.left {
			left: 8%;
		}

		.ear.left:after {
			left: 11%;
		}

		.ear.right {
			right: 8%;
		}

		.ear.right:after {
			right: 8%;
		}

		.eye {
			z-index: 30;
			top: 46%;
			width: 15%;
			height: 8%;
			background: #424B54;
			border-radius: 100%;
			position: absolute;
		}

		.eye.left {
			left: 22%;
		}


		.eye.right {
			right: 22%;
		}

		.glasses {
			z-index: 35;
			background-color: rgba(0, 0, 0, 0.2);
			border: solid 2px #0081AB;
			border-bottom-color: transparent;
			position: absolute;
			top: 42%;
			height: 13%;
			width: 24%;
		}

		.glasses.left {
			left: 15%;
			border-radius: 60% 40% 90% 80%;
		}


		.glasses:before {
			content: ' ';
			position: absolute;
			height: 19%;
			width: 92%;
			background-color: #0081AB;
			top: -50%;

		}

		.glasses.left:before {
			right: 84%;
			transform: rotate(38deg);
		}

		.glasses.right:before {
			left: 84%;
			transform: rotate(-38deg);

		}

		.glasses:after {
			content: ' ';
			position: absolute;
			height: 20%;
			width: 37%;
			background-color: #0081AB;
			top: -1px;
		}

		.glasses.left:after {
			left: 100%;
		}

		.glasses.right:after {
			right: 100%;
		}

		.glasses.right {
			right: 15%;
			border-radius: 40% 60% 80% 90%;
		}

		.nose {
			z-index: 20;
			top: 45%;
			left: 50%;
			width: 10%;
			height: 20%;
			background: #D7A596;
			border-radius: 100% 100% 50% 50%;
			position: absolute;
			transform: translateX(-50%);
		}

		.mouth {
			z-index: 20;
			top: 75%;
			left: 50%;
			transform: translateX(-50%);
			width: 40%;
			height: 15%;
			position: absolute;
			border-radius: 0 0 100px 100px;
			background: #424B54;
			overflow: hidden;
		}

		.tongue {
			position: absolute;
			bottom: -48%;
			right: 0;
			width: 60%;
			height: 107%;
			background: #F6828C;
			border-radius: 100%;
		}

		.neck {
			position: absolute;
			top: 17.5%;
			left: 50%;
			width: 10%;
			height: 2%;
			border-radius: 10%;
			transform: translateX(-50%);
			background: #F0BEAF;
			z-index: 20;
		}

		.shirt {
			position: absolute;
			top: 19.5%;
			left: 50%;
			width: 55%;
			height: 30%;
			border-radius: 20% 20% 5% 5%;
			transform: translateX(-50%);
			background: #fff;
			z-index: 19;
		}

		.collar {
			position: absolute;
			top: 0;
			left: 50%;
			width: 30%;
			height: 10%;
			border-radius: 0 0 100px 100px;
			border-color: black;
			border-style: solid;
			border-width: 1px;
			border-top-color: transparent;
			transform: translateX(-50%);
			background: #F0BEAF;
		}

		.sleeve {
			position: absolute;
			top: 20%;
			left: 50%;
			transform: translateX(-50%);
		}

		.logo {
			position: absolute;
			top: 20%;
			left: 50%;
			transform: translateX(-50%);
			font-size: 1em;
			background: #F0BEAF;
		}
	</style>
</head>
<body>
<!-- Begin Image -->

<!-- Circular Head-->
<div class="body">
	<div class="head">
		<div class="hair"></div>
		<div class="fringe"></div>
		<div class="ear left"></div>
		<div class="ear right"></div>
		<div class="face">
			<div class="eye left"></div>
			<div class="eye right"></div>
			<div class="glasses left"></div>
			<div class="glasses right"></div>
			<div class="nose">
			</div>
			<div class="mouth">
				<div class="tongue">

				</div>
			</div>
		</div>
	</div>
	<div class="neck"></div>
	<div class="shirt">
		<div class="collar">
		</div>
		<div class="logo">
			Capoeira
		</div>
		<div class="sleeve"></div>
	</div>
</div>
</body>
</html>