.body{
    z-index: 0;
}
.cabeza{
    height: 400px;
    width: 500px;
    margin: 0 auto;
}
.cara{
    background-color: #f5d0b0;
    margin: 0 auto;
    width: 300px;
    height: 400px;
    border-radius: 200px 400px 400px 400px;
    position: relative;
    top: 40px;
}

.pelo{
    background-color: rgb(87, 47, 23);
    width: 350 px;
    height: 200px;
    border-radius: 20px 100px 0 0;
}
.tupe{
    background-color: rgb(87, 47, 23); 
    height: 50px;
    width: 100px;
    position: relative;
    right: 0px;
    bottom: 30px;
    border-radius: 100px 100px 0 0;
}
.entradasxd{
    background-color: rgb(87, 47, 23);
    height: 50px;
    width: 100px;
    position: relative;
    bottom: 40px;
    left: 80px;
    border-radius: 100%;
}

.frente{
    background-color: #f5d0b0;
    width: 270px;
    height: 120px;
    position: relative;
    bottom: 120px;
    left: 15px;
    border-radius: 100px 100px 0 0;
}
.orejas{
    margin: 110px;
    position: relative;
    bottom: 240px;
}
.orejaizq{
    background-color: #f5d0b0;
    width: 40px;
    height: 60px;
    border-radius: 500px 400px 100px 700px;
    float: left;
    position: relative;
    right: 140px;
}
.orejaizq2{
    background-color: #f5d0b0;
    width: 20px;
    height: 40px;
    border-radius: 500px 400px 100px 700px;
    float: left;
    position: relative;
    top:10px;
    left: 12px;
    box-shadow:  -5px -2px #e0ba99;
}

.orejader{
    background-color: #f5d0b0;
    width: 40px;
    height: 60px;
    border-radius: 400px 500px 700px 100px;
    float: left;
    position: relative;
    left: 140px;
}
.orejader2{
    background-color: #f5d0b0;
    width: 20px;
    height: 40px;
    border-radius: 500px 400px 100px 700px;
    position: relative;
    top:10px;
    left: 10px;
    box-shadow:  -5px -2px #e0ba99;
    transform: rotateY(180deg);
}
.ojos{
    margin: 120px;
    position: relative;
    bottom: 300px;
}
.ojoizq{
    background-color: black;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    float: left;
    position: relative;
    right: 45px;
}
.ojoder{
    background-color: black;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    float: left;
    position: relative;
    left: 60px;
}
.cejaizq{
    position: relative;
    right: 10px;
    transform: rotate(-20deg);

}
.ceja1{
    background-color: rgb(87, 47, 23);
    position: relative;
    bottom: 40px;
    height: 17px;
    width: 40px;
    border-radius: 200px 200px 0 0;
}
.ceja2{
    background-color: rgb(87, 47, 23);
    position: relative;
    top: 10px;
    height: 12px;
    width: 12px;
    border-radius: 100%;
}
.ceja3{
    background-color: rgb(87, 47, 23) ;
    position: relative;
    bottom: 2px;
    left: 28px;
    height: 12px;
    width: 12px;
    border-radius: 100%;
}
.ceja4{
    background-color: #f5d0b0;
    position: relative;
    bottom: 15px;
    left: 12px;
    height: 12px;
    width: 16px;
    border-radius: 100px 100px 0 0;
}
.cejader{
    position: relative;
    bottom: 4px;
    transform: rotate(15deg);
}
.boca{
    background-color: white;
    height: 50px;
    width: 90px;
    position: relative;
    bottom: 190px;
    left: 110px;
    border-radius: 100px 100px 400px 400px;
}
.nariz1{
    background-color: #f5d0b0;
    height: 40px;
    width: 10px;
    position: relative ;
    left: 150px;
    bottom: 240px;
    box-shadow: 5px 2px #e0ba99;
}
.nariz2{
    background-color: #f5d0b0;
    height: 20px;
    width: 20px;
    position: relative ;
    left: 150px;
    bottom: 245px;
    border-radius: 100%;
    box-shadow: 5px -1px #e0ba99;
}
.block{
    height: 120px;
    width: 500px;
    margin: 0 auto;
}
.cuello{
    background-color: #f5d0b0;
    height: 120px;
    width: 80px;
    margin: 0 auto;
    border-radius: 0 0 400px 400px;

}
.sombra{
    background-color: #e0ba99;
    height: 50px;
    width: 80px;
}
.chaqueta{
    margin: 0 auto;
    background-color: rgb(155, 25, 25);
    height: 200px;
    width: 500px;
    border-radius: 500px 500px 0 0;
    position: relative;
    bottom: -50px;
    
}
.cuello{
    background-color: #f5d0b0;
    height: 120px;
    width: 80px;
    margin: 0 auto;
    border-radius: 0 0 400px 400px;
}
.interior{
    margin: auto;
    background-color: rgb(231, 228, 228);
    height: 200px;
    width: 150px;
    border-radius: 50px 50px 0 0;
    position: relative;
  
}
.ropa{
    position: relative;
    bottom: 100px;
    z-index: -99;
}
.lazoizq{
    background-color: #7e4412;
    height: 50px;
    width: 28px;
    border-radius: 100px 100px 100px 100px;
    position: relative;
    left: 130px;
    bottom: 170px;
}
.cuerdaizq{
    background-color: rgb(255, 255, 255);
    height: 30px;
    width: 12px;
    border-radius: 100px 100px 100px 100px;
    position: relative;
    top: 9px;
    left: 8px;
}
.lineasizq1{
    background-color: rgb(128, 19, 19);
    height: 5px;
    width: 12px;
    position: relative;
    top: 3px;
}
.lineasizq2{
    background-color: rgb(128, 19, 19);
    height: 5px;
    width: 12px;
    position: relative;
    top: 8px;

}
.lineasizq3{
    background-color: rgb(128, 19, 19);
    height: 5px;
    width: 12px;
    position: relative;
    top: 13px;
}
.lazoder{
    background-color: #7e4412;
    height: 50px;
    width: 28px;
    border-radius: 100px 100px 100px 100px;
    position: relative;
    left: 340px;
    bottom: 220px;
}
.cuerdader{
    background-color: rgb(255, 255, 255);
    height: 30px;
    width: 12px;
    border-radius: 100px 100px 100px 100px;
    position: relative;
    top: 9px;
    left: 8px;
}
.lineasder1{
    background-color: rgb(128, 19, 19);
    height: 5px;
    width: 12px;
    position: relative;
    top: 3px;
}
.lineasder2{
    background-color: rgb(128, 19, 19);
    height: 5px;
    width: 12px;
    position: relative;
    top: 8px;

}
.lineasder3{
    background-color: rgb(128, 19, 19);
    height: 5px;
    width: 12px;
    position: relative;
    top: 13px;

}

.capucha{
    background-color: rgb(133, 30, 30);
    height: 100px;
    width: 220px;
    border-radius: 70px 70px 0 0;
    position: relative;
    left: 140px;
    bottom: 350px;
    z-index: -100;
}
.pelito{
    background-color: rgb(231, 229, 204);
    height: 80px;
    width: 200px;
    border-radius: 70px 70px 0 0;
    position: relative;
    left: 10px;
    top: 10px;
}
img{
    height: 110px;
    width: auto;
    position: relative;
    right: 20px;
    top: 50px;
}
.guino{
    background-color: #f5d0b0;
    width: 23px;
    height: 23px;
    border-radius: 100%;
    margin: 0 auto;
    position: relative;
    bottom: 713px;
    right: 63px;
    animation-name: guino;
    animation-duration: 0.5s;
    animation-iteration-count: initial;
    animation-delay: 1.3s;
}
@keyframes guino {
    0%{bottom: 713px; right: 63px;}
    100%{bottom: 695px; right: 63px;}
}
.brillo1{
    background-color: black;
    height: 30px;
    width: 30px;
    clip-path: polygon(51% 0, 65% 39%, 100% 51%, 65% 65%, 51% 100%, 34% 65%, 0 51%, 34% 39%);
    animation-name: rotation;
	animation-duration: 3s;
	animation-iteration-count: initial;
	animation-timing-function: linear;
}
.brillo{
    height: 30px;
    width: 30px;
    margin: 0 auto;
    position: relative;
    bottom: 610px;
    left: 45px;
    animation-name: scale;
	animation-duration: 3s;
	animation-iteration-count: initial;
	animation-timing-function: linear;
    visibility:hidden !important;
}
.brillo2{
    background-color: white;
    height: 25px;
    width: 25px;
    position: relative;
    left: 2.5px;
    top: 2.5px;
    clip-path: polygon(51% 0, 65% 39%, 100% 51%, 65% 65%, 51% 100%, 34% 65%, 0 51%, 34% 39%);
}
.animacion{
    width: 500px;
    height: 300px;
    margin: 0 auto;
    position: relative;
    top: 200px;
}
@keyframes rotation {
    0% {
      transform: rotate(0deg); visibility: visible;}
    100% {
      transform:rotate(360deg)}
  }
@keyframes scale {
    0% {
      transform: scale(0)}
    50% {
      transform:scale(100%)}
    100% {
     transform: scale(0)}
  }