* {
margin:0;
padding:0;
}
.center {
width:350px;
height:450px;
margin:0 auto;
/* border:1px solid red;
*/
position:relative;
transition:all 5s ease;
}
.center:hover {
opacity:.01;
background-color:aquamarine;
}
.head-left,.head-right {
width:50px;
height:5px;
background-color:greenyellow;
position:absolute;
top:30px;
}
.head-left {
left:60px;
transform:rotate(45deg);
}
.head-right {
right:60px;
transform:rotate(-45deg);
}
.face {
position:absolute;
top:10px;
left:calc(50% - 100px);
width:200px;
height:100px;
background-color:greenyellow;
border-radius:100px 100px 0 0;
}
.eyes-left,.eyes-right {
width:15px;
height:15px;
background-color:black;
border-radius:50%;
position:absolute;
top:60px;
}
.eyes-left {
left:100px;
}
.eyes-right {
right:100px;
}
.belly {
width:200px;
height:230px;
background-color:greenyellow;
position:absolute;
top:120px;
left:75px;
border-radius:0 0 20px 20px
}
.hand-left,.hand-right {
width:50px;
height:180px;
background-color:greenyellow;
border-radius:30px 30px 30px 30px;
position:absolute;
top:130px;
}
.hand-right {
right:0;
}
.foot-left,.foot-right {
width:50px;
height:100px;
background-color:greenyellow;
position:absolute;
bottom:25px;
border-radius:30px 30px 30px 30px;
}
.foot-left {
left:110px;
}
.foot-right {
right:110px;
}