<div></div>

:root {
  --bone: #dad8cb;
  --shade: #919087;
  --dark: #452b2c;
  --teeth: #ffeb3b;
  --glow: cyan;
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #1d1e22;
  color: white;
}

div {
  --glow: cyan;
  background-image: 
        radial-gradient(circle at 45% 70%,  #452b2c 3%, transparent 3%),
        radial-gradient(circle at 55% 70%,  #452b2c 3%, transparent 3%);
    background-color: var(--bone);
    background-repeat: no-repeat;
  width: 150px;
  height: 200px;
  border-radius: 150px 150px 100% 100%;
  position: relative;
  box-shadow: 0 -5px 15px inset rgba(0,0,0,0.5), 0 5px 15px rgba(255,255,255,0.75) inset, -20px -20px 30px rgba(0,0,0,0.2) inset, 0 -2px 10px white, 0 -10px 30px var(--glow), 0 30px 60px black;
  transform: perspective(500px) rotateX(-35deg) scale(1.25, 1.5);
  animation: floatAndNod 4s infinite ease-in-out;
  transition:all 0.3s ease;
  border-top: 5px solid var(--shade);
}

@keyframes floatAndNod {
    0%, 100% {
        transform: perspective(500px) rotateX(-35deg) scale(1.25, 1.5) translateY(0);
    }
    25% {
        transform: perspective(500px) rotateX(-30deg) scale(1.25, 1.5) translateY(-10px);
      box-shadow: 0 -5px 15px inset rgba(0,0,0,0.35), 0 5px 15px rgba(255,255,255,0.75) inset, -20px -20px 30px rgba(0,0,0,0.2) inset, 0 -2px 10px white, 0 -10px 30px var(--glow), 0 30px 60px black;
    }
    50% {
        transform: perspective(500px) rotateX(-35deg) scale(1.25, 1.5) translateY(0);
    }
    75% {
        transform: perspective(500px) rotateX(-30deg) scale(1.25, 1.5) translateY(10px);
      box-shadow: 0 -5px 15px inset rgba(0,0,0,0.35), 0 5px 15px rgba(255,255,255,0.75) inset, -20px -20px 30px rgba(0,0,0,0.2) inset, 0 0 5px white, 0 -5px 10px var(--glow), 0 30px 60px black;
    }
}

div::before {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 60%;
  left: 20%;
  height: 30px;
  background-color: var(--dark);
  border-radius: 10px;
  background-image: linear-gradient(to bottom, transparent 47%, var(--dark) 47%, var(--dark) 53%, transparent 53%),
    repeating-radial-gradient(
        circle at -10% 50%,
        #ffeb3b 5%,
        #ffeb3b 15%,
        transparent 15%,
        transparent 20%
    ), 
    repeating-radial-gradient(
        circle at 110% 50%,
        #ffeb3b 5%,
        #ffeb3b 15%,
        transparent 15%,
        transparent 20%
    );
  border-bottom: 10px groove var(--bone);
  border-top: 3px solid var(--shade);
  box-shadow: 0 5px 10px rgba(0,0,0,0.25) inset;
  transform: perspective(200px) rotateX(-45deg) scale(1, 1.5);
    transform-origin: center top;
  animation: gnashing 1.5s infinite ease-in-out;
}

@keyframes gnashing {
    0%, 100% {
        transform: perspective(200px) rotateX(-45deg) scale(1, 1.5) translateY(0) scaleY(1);
    }
    50% {
        transform: perspective(200px) rotateX(-45deg) scale(1, 1.5) translateY(6px) scaleY(1.1);
    }
}


div::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 40px;
  background: var(--glow);
  border-radius: 100% 100% 70px 70px;
  top: 45%;
  left: 10%;
  box-shadow:70px 0 6px -10px var(--glow), 70px 0 0 var(--dark), 0 0 6px 10px inset var(--dark), 0 4px 0 var(--shade), 70px 4px 0 var(--shade);
  animation: blink 5s ease-in-out infinite;
  transition: all 0.3s ease;
}

@keyframes blink {
  0% {
    height: 40px;
  }
  90% {
    height: 40px;
    margin-top: 0;
  }
  95% {
    margin-top: 17px;
    height: 5px;
  }
  100% {
    height: 40px;
    margin-top: 0;
  }
}

div:hover {
  --glow: #ea7604;
}