body {
  background: black;
}
.box {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 5%;
  width: 500px;
  height: 500px;
  background: none;
 animation: bounce 0.5s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  animation-iteration-count: infinite;
}

@keyframes bounce {
  from { transform: translate3d(0, 0px, 0);     }
  to   { transform: translate3d(0px, 200px, 0px); }
}
.head{
	position:absolute;
     margin:auto;
    display:block;
    margin:auto;
    top:25%;
    right:39%;
    height:25%;
    width:25%;
    border-radius:50%;
    background:#6495ED;


}
.earleft{
	position:absolute;
     margin:auto;
    display:block;
    margin:auto;
    top:29%;
    right:61%;
    height:9%;
    width:5%;
    border-radius:50%;
    background:#6495ED;


}

.earright{
	position:absolute;
    top:29%;
    right:37%;
    height:9%;
    width:5%;
    border-radius:50%;
    background:#6495ED;


}
.earright{
	position:absolute;
     margin:auto;
    display:block;
    margin:auto;
    top:29%;
    right:37%;
    height:9%;
    width:5%;
    border-radius:50%;
    background:#6495ED;


}

.hair1{
	position:absolute;
 	 margin:auto;
    display:block;
    margin:auto;
    top:21%;
  	right:47%;
    width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid #6495ED;
}
.hair2{
	position:absolute;
 	 margin:auto;
    display:block;
    margin:auto;
    top:22%;
  	right:51%;
    width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid #6495ED;
}
.eyecircleright{
	position:absolute;
     margin:auto;
    display:block;
    margin:auto;
    top:29%;
    right:43%;
    height:12%;
    width:9%;
    border-radius:50%;
    background:#FFE4C4;


}
.eyecircleleft{
	position:absolute;
     margin:auto;
    display:block;
    margin:auto;
    top:29%;
    right:50%;
    height:12%;
    width:9%;
    border-radius:50%;
    background:#FFE4C4;


}
.eyeblackleft{
	position:absolute;
     margin:auto;
    display:block;
    margin:auto;
    top:31%;
    right:52%;
    height:3.5%;
    width:3.5%;
    border-radius:50%;
    background:black;


}
.eyeblackright{
	position:absolute;
     margin:auto;
    display:block;
    margin:auto;
    top:31%;
    right:46%;
    height:3.5%;
    width:3.5%;
    border-radius:50%;
    background:black;


}
.eyewhiteright{
	position:absolute;
     margin:auto;
    display:block;
    margin:auto;
    top:31.5%;
    right:46%;
    height:1.5%;
    width:1.5%;
    border-radius:50%;
    background:white;
    animation: whiteeye 1s infinite alternate;


}

.eyewhiteleft{
	position:absolute;
     margin:auto;
    display:block;
    margin:auto;
    top:31.5%;
    right:52%;
    height:1.5%;
    width:1.5%;
    border-radius:50%;
    background:white;


}
.leftcheek{
	position:absolute;
     margin:auto;
    display:block;
    margin:auto;
    top:37%;
    right:50%;
    height:11%;
    width:13%;
    border-radius:50%;
    background:#FFE4C4;


}
.rightcheek{
	position:absolute;
     margin:auto;
    display:block;
    margin:auto;
    top:37%;
    right:40%;
    height:11%;
    width:13%;
    border-radius:50%;
    background:#FFE4C4;


}
.rightcheekpink{
	position:absolute;
     margin:auto;
    display:block;
    margin:auto;
    top:38%;
    right:42%;
    height:3%;
    width:4%;
    border-radius:50%;
    background:#FF1493;

}

.leftcheekpink{
	position:absolute;
     margin:auto;
    display:block;
    margin:auto;
    top:38%;
    right:56%;
    height:3%;
    width:4%;
    border-radius:50%;
    background:#FF1493;


}
.nose{
	position:absolute;
     margin:auto;
    display:block;
    margin:auto;
    top:38%;
    right:47.5%;
    height:4%;
    width:7%;
    border-radius:50%;
    background:#6495ED;


}
.smile {
  position:absolute;
  
 top:37%;
  right:44%;
  width: 60px; 
  height: 40px;  
  border: solid 5px #000;
  border-color: transparent transparent black;
  border-radius: 100px/10% 30% 70px 70px;
}

.body{
	position:absolute;
     margin:auto;
    display:block;
    margin:auto;
    top:49%;
    right:44%;
    height:20%;
    width:15%;
    border-radius:50%;
    background:#6495ED;
    border-radius: 100px/190px 80px 50px 70px;


}
.lefthand{
	position:absolute;
     margin:auto;
    display:block;
    margin:auto;
    top:52%;
    right:50%;
    height:5%;
    width:20%;
    border-radius:50%;
    background:#6495ED;
   border-radius: 100px/180% 120% 50px 50px;
    -webkit-transform: rotate(150deg);
    -moz-transform: rotate(150deg);
     -ms-transform: rotate(150deg);
      -o-transform: rotate(150deg);
      animation:left 0.1s infinite alternate;

}
@keyframes left{

0%{transform:rotate(140deg);}
100%{transform:rotate(150deg);}

}
.righthand {
  
	position:absolute;
    top:54%;
    right:33%;
    height:5%;
    width:20%;
    border-radius:50%;
    background:#6495ED;
    border-radius: 100px/180% 120% 50px 50px;
    -webkit-transform: rotate(50deg);
    -moz-transform: rotate(50deg);
     -ms-transform: rotate(50deg);
      -o-transform: rotate(50deg);
      animation:right 0.1s infinite alternate;


}
 @keyframes right{

0%{transform:rotate(50deg);}
100%{transform:rotate(40deg);}

}
.leftleg {
  
	position:absolute;
    top:66%;
    right:50%;
    height:5%;
    width:20%;
   
    background:#6495ED;
    border-radius: 180px/180% 120% 90px 90px;
    -webkit-transform: rotate(170deg);
    -moz-transform: rotate(170deg);
     -ms-transform: rotate(170deg);
      -o-transform: rotate(170deg);
   


}
.rightleg {
  
	position:absolute;
    top:67%;
    right:44%;
    height:5%;
    width:20%;
   
    background:#6495ED;
    border-radius: 180px/180% 120% 90px 90px;
    -webkit-transform: rotate(160deg);
    -moz-transform: rotate(160deg);
     -ms-transform: rotate(160deg);
      -o-transform: rotate(160deg);
   


}
.tail {
  
	position:absolute;
    top:69%;
    right:32%;
    height:5%;
    width:20%;
   
    background:#6495ED;
    
    
  background-color: #6495ED;
  border-radius: 100% 20% 600%;
  border-bottom-leftt-radius:50%;
  
  -webkit-transform: rotate(50deg);
  animation: mtail .07s infinite alternate;
 
}
@keyframes mtail{
100%{transform:rotate(40deg);}

10%{transform:rotate(50deg);}


}