* {
  box-sizing: border-box;
}

body{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  /* A la imagen le he cortado el fondo es decir que esta en png asi que si cambias el color de background se le cambiara el color del fondo a la imagen : ) 10/10  */
  background-color: lightgrey;
  z-index: -3;
}

#fondo{
  position: absolute;
  background-image: url(FOTOS/gool.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 63.3em;
  z-index: -3;
}

.batimacaco{
/* QUERIA HACER EL MUÑECO MAS PEQUEÑO PERO NO ME HA DEJADO */
}

.orejader {
  position: absolute;
  right:-1px;
  top: -70px;
  width: 0;
  height: 0;
  border-left: 55px solid transparent;
  border-top: 60px solid transparent;
  border-right: 55px solid black;
  border-bottom: 50px solid black;
}

.orejaizq {
  position: absolute;
  left: -1px;
  top: -70px;
  width: 0;
  height: 0;
  border-right: 55px solid transparent;
  border-top: 60px solid transparent;
  border-left: 55px solid black;
  border-bottom: 50px solid black;
}

.cabeza {
  position: relative;
  border-radius: 3em;
  position: relative;
  top: 15em;
  margin: auto;
  border: thin solid black;
  height: 30em;
  width: 30em;
  background-color: black;
}

.ojos {
  position: absolute;
  border-radius: 6em;
  top: 12em;
  height: 6em;
  width: 6em;
  background-color: white;
}

.izquierda {
  position: absolute;
  left:2em;
}

.derecha {
  position: absolute;
  right: 2em;
  animation-name: mover-ojo;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes mover-ojo {
from {background-color: black;}
to {background-color: white;}
}


/* @keyframes mover-ojo {

0% { left: 2em; }
50% { left: 1.5em;}
100% { left: 1em; }

} */


.nariz {
  position: absolute;
  left: 12em;
  bottom: 7.9em;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 50px solid #434142;
}

.nsombra{
  position: absolute;
  z-index: 1;
  left: 15.1em;
  bottom: 7.9em;
  border-right: 50px solid transparent;
  border-bottom: 50px solid white;
}

.mandubula {
  position: absolute;
  border-radius: 3em;
  position: absolute;
  right: -1px;
  height: 8em;
  width: 30em;
  bottom: -1px;
  background-color: #fdddca;
}

.pecho {
  position: relative;
  z-index: -1;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: -12em;
  width: 35em;
  height: 50em;
  border-radius: 40%;
  background: #626167;
}

.hot{
  position: absolute;
  left: 12.5em;
  top: 10em;
}

.barazode {
  position: absolute;
  border-radius: 10em;
  z-index: 1;
  width: 6em;
  height: 22em;
  left: -3em;
  top: 8em;
  transform: rotate(30deg);
  background: black;
}

.barazoiz {
  position: absolute;
  border-radius: 10em;
  z-index: 1;
  width: 6em;
  height: 22em;
  left: 32em;
  top: 8em;
  transform: rotate(150deg);
  background: black;
}

.manod img{
  position: absolute;
  z-index: 2;
  width: 12em;
  height: 12em;
  transform: rotate(10deg);
  top: 25em;
  left: 36.4em;
}

.cinturon {
  position: absolute;
  width: 548px;
  height: 40px;
  bottom: 13em;
  left: 6px;
  border: 2px solid #555;
  background: yellow;
  border-radius: 0em;
}

.batiropa{
  position: absolute;
  width: 531px;
  height: 209.3px;
  left: 0.9em;
  top: 36.9em;
  background-color: black;
}

.piernad {
  position: absolute;
  border-radius: 10em;
  z-index: 1;
  width: 8em;
  height: 22em;
  left: 0.9em;
  top: 40em;
  background: #626167;
}

.piernai{
  position: absolute;
  border-radius: 10em;
  z-index: 1;
  width: 8em;
  height: 22em;
  left: 26.1em;
  top: 40em;
  background: #626167;
}