body {
  position: relative;
  background: #52b3d9;
}
#mario {
  position: absolute;
  top: 0;
}
#ghost {
  position: relative;
  background: #fff;
  box-shadow: inset -15px -25px 100px #888;
  margin: 0 auto;
  height: 500px;
  width: 520px;
  border: 8px #000 solid;
  border-radius: 50%;
  animation: float 2s infinite ease-in-out;
}
#ghost #brow {
  position: absolute;
  top: 70px;
  left: 70px;
  background: #fff;
  height: 100px;
  border-radius: 200px/100px;
  width: 200px;
  border-bottom: 10px solid #000;
  z-index: 5;
}
#ghost #eyeRight,
#ghost #eyeLeft {
  position: absolute;
  top: 150px;
  left: 110px;
  border: 5px #000 solid;
  height: 100px;
  width: 30px;
  border-radius: 30px;
}
#ghost #eyeLeft {
  left: 190px;
}
#ghost #mouth {
  background: #d91e18;
  position: absolute;
  top: 280px;
  left: 100px;
  width: 150px;
  height: 90px;
  border: 5px solid #000;
  border-radius: 40px/30px;
}
#ghost #mouth > div {
  position: absolute;
  overflow: hidden;
  width: 70px;
  height: 80px;
  background: #d91e18;
  border-radius: 120px/120px;
}
#ghost #mouth > div:nth-child(1) {
  top: -10px;
  left: 0px;
  border-top: 5px solid #000;
}
#ghost #mouth > div:nth-child(1) > span {
  top: -5px;
  transform: rotate(10deg);
}
#ghost #mouth > div:nth-child(2) {
  top: -10px;
  right: 0;
  border-top: 5px solid #000;
}
#ghost #mouth > div:nth-child(2) > span {
  transform: rotate(-10deg);
}
#ghost #mouth > div:nth-child(3) {
  bottom: -10px;
  right: 0;
  width: 75px;
  height: 60px;
  border-radius: 40px/40px;
  border-bottom: 5px solid #000;
}
#ghost #mouth > div:nth-child(3) > span {
  top: 5px;
  left: 25px;
  border-top: 30px solid transparent;
  border-bottom: 30px solid #fff;
  transform: rotate(15deg);
}
#ghost #mouth > div:nth-child(4) {
  bottom: -10px;
  left: 0;
  width: 75px;
  height: 60px;
  border-radius: 40px/40px;
  border-bottom: 5px solid #000;
}
#ghost #mouth > div:nth-child(4) > span {
  top: 5px;
  left: 25px;
  border-top: 30px solid transparent;
  border-bottom: 30px solid #fff;
  transform: rotate(-15deg);
}
#ghost #mouth > div:nth-child(5) {
  top: 0;
  left: 40px;
  height: 20px;
  width: 56px;
  border-radius: 0;
  z-index: 5;
}
#ghost #mouth > div:nth-child(6) {
  bottom: 0;
  left: 60px;
  height: 20px;
  width: 28px;
  border-radius: 0;
  z-index: 5;
}
#ghost #mouth > div span {
  position: absolute;
  display: block;
  height: 0;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 30px solid #fff;
  top: 0;
  left: 20px;
}
#ghost #armRight {
  position: absolute;
  background: #fff;
  border: 8px solid #000;
  top: 120px;
  left: -40px;
  width: 50px;
  height: 100px;
  border-radius: 50px/80px;
  transform: rotate(-15deg);
  z-index: -1;
}
#ghost #armLeft {
  position: absolute;
  background: #fff;
  border: 8px solid #000;
  top: 150px;
  left: 340px;
  width: 70px;
  height: 100px;
  border-radius: 70px/100px;
  transform: rotate(40deg);
  box-shadow: inset -5px 5px 15px #666;
}
#ghost #armLeft > span {
  position: absolute;
  background: #fff;
  bottom: -15px;
  left: -50px;
  width: 100px;
  height: 50px;
  transform: rotate(45deg);
}
#ghost #tail {
  position: absolute;
  top: 320px;
  left: 380px;
  background: #fff;
  width: 180px;
  height: 120px;
  border-radius: 5px 20px 100px 5px;
  border-right: 3px solid #000;
  border-bottom: 5px solid #000;
  transform: rotate(-5deg);
  box-shadow: inset -15px -25px 100px #888;
  z-index: -1;
}
#ghost:hover #brow {
  position: absolute;
  top: 200px;
  left: 40px;
  height: 0;
  border-radius: 200px/100px;
  width: 250px;
  border-bottom: 5px solid #000;
  z-index: 5;
  transform: rotate(-5deg);
}
#ghost:hover #brow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  border-radius: 200px/100px;
  border-bottom: 5px solid #000;
  transform: rotate(30deg);
}
#ghost:hover #eyeRight,
#ghost:hover #eyeLeft {
  display: none;
}
#ghost:hover #armRight {
  top: 150px;
  left: 80px;
  transform: rotate(20deg);
  z-index: 10;
  box-shadow: inset 5px 5px 15px #999;
}
#ghost:hover #armLeft {
  top: 150px;
  left: 180px;
  z-index: 10;
  transform: rotate(-40deg);
  box-shadow: inset -5px 5px 15px #999;
}
#ghost:hover #armLeft > span {
  display: none;
  position: absolute;
  background: #fff;
  bottom: -15px;
  left: -20px;
  width: 100px;
  height: 30px;
  transform: rotate(15deg);
}
#ghost:hover #mouth {
  border-bottom: 5px solid transparent;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  background: transparent;
  top: 320px;
  left: 65px;
  width: 200px;
  height: 150px;
  border-radius: 200px/150px;
  transform: rotate(5deg);
}
#ghost:hover #mouth::before {
  content: '';
  position: absolute;
  height: 30px;
  width: 5px;
  left: 20px;
  top: 0;
  background: #000;
  transform: rotate(-10deg);
}
#ghost:hover #mouth::after {
  content: '';
  position: absolute;
  height: 30px;
  width: 5px;
  right: 20px;
  top: 0;
  background: #000;
  transform: rotate(15deg);
}
#ghost:hover #mouth > div {
  display: none;
}
@-moz-keyframes float {
  0% {
    margin-top: 2px;
  }
  50% {
    margin-top: 10px;
  }
  100% {
    margin-top: 2px;
  }
}
@-webkit-keyframes float {
  0% {
    margin-top: 2px;
  }
  50% {
    margin-top: 10px;
  }
  100% {
    margin-top: 2px;
  }
}
@-o-keyframes float {
  0% {
    margin-top: 2px;
  }
  50% {
    margin-top: 10px;
  }
  100% {
    margin-top: 2px;
  }
}
@keyframes float {
  0% {
    margin-top: 2px;
  }
  50% {
    margin-top: 10px;
  }
  100% {
    margin-top: 2px;
  }
}