body{
background-color: #82dbff;

}

.suelo {
background-color: #3eb700;
height: 370px;
margin-top: 100px;
bottom: -22em;
z-index: 10;
margin-left: -1em;
margin-right: -1em;

}


.cuerpo {
position: relative;
width: 30em;
height: 30em;
background-color: #b06528;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
margin: 0 auto;
top: 10em;
}

.ojos {
  position: absolute;
  height: 150px;
  left: 0;
  right: 0;
  margin: 0 auto;
  margin-top: 3em;
}

.ojo {
  position: relative;
  width: 120px;
  height: 120px;
  background-color: white;
  border: thin solid black;
  border-radius: 50%;
  margin-top: 2em;
}

.ojo-izq {
  position: absolute;
  left: 7.3em;
  border-radius: 55% 55% 55% 55% / 65% 65% 70% 70%;
}

.ojo-der {
  position: absolute;
  right: 7.3em;
  border-radius: 55% 55% 55% 55% / 65% 65% 70% 70%;
}

.pupila {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: black;
  border: thin solid black;
  border-radius: 50%;
  width: 33px;
  height: 33px;
}

.boca-pou {
  position: absolute;
    top: -2em;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    margin: auto;
    height: 100px;
    width: 110px;
    background-color: #932e10;
}


.cuerpo2 {
  position: absolute;
  width: 30em;
  height: 10em;
  background-color: black;
  border-radius: 10% 10% 40% 40% / 50% 50% 40% 50%;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1em solid white;
}

.sombrero-arriba {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 3px solid #000000;
  background: #000000;
  margin: 0 auto;
  right: 0;
  left: 0;
  top: -8em;
}

.sombrero-abajo {
  position: absolute;
  width: 250px;
  height: 100px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #000000;
  margin: 0 auto;
  right: 0;
  left: 0;
  top: -4em;
}

.boton1 {
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #ffffff;
  margin-left: 7em;
  margin-top: 2em;
}

.boton2 {
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #ffffff;
  margin-left: 7em;
  margin-top: 1em;
}

.boton3 {
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #ffffff;
  margin-left: 7em;
  margin-top: 1.2em;
}

.pajarilla {
  position: absolute;
  margin: 0 auto;
  left: 12.7em;
  right: 0;
  top: -3em;

}
.pajarilla img {
  width: 90px;
}

.cuerpo {
  animation-name: color;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes color {
  0%   {background-color:blue;}
  25%  {background-color:red;}
  50%  {background-color:yellow;}
  75%  {background-color:green;}
  100% {background-color:blue;}
}