html, body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c4ac93;
  width: 100%;
  height: 100%;
}

.hippo {
  position: relative;
  width: 240px;
  height: 240px;
  cursor: pointer;
  animation: breathe 4s ease-in-out infinite;
}

.head {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 160px;
  height: 160px;
  background-color: #987f62;
  border-radius: 50%;
}

.ear-left, .ear-right {
  position: absolute;
  top: 40px;
  width: 28px;
  height: 38px;
  background-color: #987f62;
  border-radius: 50%;
}

.ear-left {
  left: 40px;
  transform-origin: bottom center;
  animation: earWiggle 5s infinite;
}

.ear-right {
  right: 40px;
  transform-origin: bottom center;
  animation: earWiggle 5s infinite reverse;
}

.ear-left::before, .ear-right::before {
  content: '';
  display: block;
  width: 14px;
  height: 26px;
  background-color: rgba(0, 0, 0, .85);
  position: absolute;
  bottom: 4px;
  border-radius: 50%;
}

.ear-left::before {
  left: 7px;
  transform: rotate(-10deg);
}

.ear-right::before {
  right: 7px;
  transform: rotate(10deg);
}

.eye-left, .eye-right {
  position: absolute;
  top: 48px;
  width: 16px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  animation: blink 4s infinite;
}

.eye-left {
  left: 20px;
}

.eye-right {
  right: 20px;
}

.nose-left, .nose-right {
  position: absolute;
  top: 105px;
  width: 19px;
  height: 38px;
  background-color: rgba(0, 0, 0, .75);
  border-radius: 50%;
  transition: transform 0.3s ease;
  z-index: 1;
}

.nose-left {
  left: 30px;
  transform: rotate(-40deg);
}

.nose-right {
  right: 30px;
  transform: rotate(40deg);
}

.hippo:hover .nose-left {
  transform: rotate(-40deg) scale(1.2);
}

.hippo:hover .nose-right {
  transform: rotate(40deg) scale(1.2);
}

.mouth {
  position: absolute;
  top: 120px;
  left: 20px;
  width: 200px;
  height: 120px;
  background-color: #6b553b;
  border-radius: 50% / 75%;
}

.teeth-left, .teeth-right {
  position: absolute;
  bottom: -10px;
  width: 40px;
  height: 80px;
  background-color: #fff;
  border-radius: 40%;
  border: 2px solid #ccc;
  transition: transform 0.4s ease;
  z-index: -1;
}

.teeth-left {
  left: 36px;
}

.teeth-right {
  right: 36px;
}

.hippo:hover .teeth-left {
  transform: translateY(20px) rotate(-6deg);
}

.hippo:hover .teeth-right {
  transform: translateY(20px) rotate(6deg);
}

@keyframes blink {
  0%, 92%, 100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.1);
  }
}

@keyframes breathe {
  0%, 100% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(4px);
  }
}

@keyframes earWiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(8deg);
  }
}