main{
  background: rgb(195,234,255);
  background: linear-gradient(0deg, rgba(195,234,255,1) 35%, rgba(0,212,255,1) 100%);

  position:relative;
  height:600px; width:800px;
  text-align:center;
}

.character{
  background:purple;
  height:14rem;
  width:22rem;
  bottom:4rem;
  position:absolute;
  left:30%;
  margin-left:-3rem;
  border-radius:0 50% 50% 67%;
  border-bottom:3rem solid black;
  box-shadow:inset 0 -2rem 0 0 rgba(0,0,0,.33),
    -1rem 4rem 2rem 1rem rgba(0,0,0,.1);
  transform:scale(.5, .5);
    
}
*:before,*:after{
  display:block;
  content:"";
  position:absolute;
}
.character:before{
  background:white;
  height:6rem; 
  width:6rem;
  right:1rem;
  top:-2rem;
  border-radius:50%;
  box-shadow:-1rem 2rem 0 .5rem rgba(0,0,0,.33);
  border-bottom:3rem solid black;
}
.character:after{
  background:rgba(0,0,0,.5);
  height:7rem; width:9rem;
  border-radius:0% 60% 40% 60%;
  border:2rem solid black;
  border-left:3rem solid white;
  border-right-width:1.5rem;
  left:-2rem;
  top:-1rem;
}


.character.gone{
  background:red;
  animation-duration:3s;
  animation-name:move;
  animation-fill-mode:forwards;
}
@keyframes move{
  from{
    left:50%;
  }
  to{
    left:100%;
  }
}

.character > .head{
  border-radius:50% 20% 100% 33%;
  width:12rem; height:12rem;
  background:yellow;
  position:absolute;
  top:-9.5rem;
  right:-6rem;
  transform:rotate(30deg);
  box-shadow:rgba(0,0,255,.5) 1rem 2rem 3rem -1rem;
  border-right:3rem solid orange;
}
.character > .head:before{
  content:"";
  display:block;
  height:2rem;
  width:2rem;
  background:rgba(255,255,255,.9);
  z-index:3;
  position:absolute;
  border-radius:50%;
  bottom:7.5rem;
  left:3.5rem;
}
.character > .head:after{
  border-radius:50%;
  height:2rem; width:2rem;
  background:black;
  z-index:1;
  content:"";
  display:block;
  border:2rem solid rgba(240,240,240,1);
  box-shadow:orange .25rem 1rem .25rem;
}