Filemón CSS

by JuanMa

HTML

<div class="filemon">
	<div class="camisa1"></div>
	<div class="camisa2"></div>
	<div class="pelos"></div>
	<div class="oreja oreja-dch"></div>
	<div class="cabeza">
		<div class="boca"></div>
	</div>
	<div class="cejas"></div>
	<div class="ojo-iz"></div>
	<div class="ojo-dch"></div>
	<div class="nariz"></div>
	<div class="oreja oreja-izq"></div>
	<div class="firma">OLMID</div>
</div>

CSS

.filemon{
	position: relative;
	width: 31.5em;
	height: 31.5em;
	top: .6em;
	left: .6em;
	border: 0em solid #000;
	overflow:hidden;
}
.filemon .cabeza{
	position: absolute;
	width: 16em;
	height: 24em;
	top: 3.25em;
	left: 7.25em;
	border-left: 1em solid #000;
	border-top: .7em solid #000;
	border-right: .15em solid #000;
	border-bottom: .4em solid #000;
	border-radius: 100% 100% 110% 90% / 100% 100% 110% 90%;
	overflow:hidden;
	background: #fcd798;
	background: -moz-linear-gradient(top,  #fcd798 0%, #ee8e54 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcd798), color-stop(100%,#ee8e54));
	background: -webkit-linear-gradient(top,  #fcd798 0%,#ee8e54 100%);
	background: -o-linear-gradient(top,  #fcd798 0%,#ee8e54 100%);
	background: -ms-linear-gradient(top,  #fcd798 0%,#ee8e54 100%);
	background: linear-gradient(to bottom,  #fcd798 0%,#ee8e54 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd798', endColorstr='#ee8e54',GradientType=0 );
}
.filemon .cejas{
	position: absolute;
	width: 12em;
	height: 5em;
	top: .5em;
	left: 11.5em;
}
.filemon .cejas:before, .filemon .cejas:after{
	content:"";
	position: absolute;
	width: 4.5em;
	height: 3.5em;
	top: 1.5em;
	left: 5.5em;
	border-left: .5em solid transparent;
	border-top: 1.25em solid #000;
	border-right: .2em solid transparent;
	border-bottom: .2em solid transparent;
	border-radius: 100% 100% 100% 100% / 100% 60% 80% 80%;
	-webkit-transform: rotate(55deg);
	-moz-transform: rotate(55deg);
	-ms-transform: rotate(55deg);
	-o-transform: rotate(55deg);
	transform: rotate(55deg);
}
.filemon .cejas:after{
	width: 6em;
	height: 5em;
	top: .25em;
	left: 1em;
	border-right: .5em solid transparent;
	border-top: 1.75em solid #000;
	border-left: .5em solid transparent;
	border-bottom: .2em solid transparent;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform:...