html,
body {
  height: 100%;
}
svg {
  width: 100%;
  height: auto;
}
.icon-face-containter {
  transform: translateY(25px);
  animation: popUp 1.5s cubic-bezier(0.88, 0.8, 0.23, 1.25) 1 forwards 0.5s;
}
.icon-eye {
  animation: shrinkOut 0.7s ease-in-out 1 forwards;
}
.icon-mouth {
  animation: shrinkOut2 1s ease-in-out 1 forwards;
}
.icon-face-containter:hover > .icon-face > .icon-mouth {
  animation: shrinkIn2 0.3s ease-in-out 1 forwards;
}
.icon-face-containter:hover > .icon-face > .icon-eye {
  animation: shrinkIn 0.3s ease-in-out 1 forwards;
}
@keyframes popUp {
  0% {
    transform: translateY(25px);
  }
  30%,
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes shrinkIn {
  from {
    transform: scale(1);
    transform-origin: 50% 50%;
  }
  to {
    transform: scale(0.7);
    transform-origin: 50% 50%;
  }
}
@keyframes shrinkOut {
  0% {
    transform: scale(0.7);
    transform-origin: 50% 50%;
  }
  100% {
    transform: scale(1);
    transform-origin: 50% 50%;
  }
}
@keyframes shrinkIn2 {
  from {
    transform: scale(1);
    transform-origin: 50% 50%;
  }
  to {
    transform: scale(0.3);
    transform-origin: 50% 50%;
  }
}
@keyframes shrinkOut2 {
  0% {
    transform: scale(0.3);
    transform-origin: 50% 50%;
  }
  100% {
    transform: scale(1);
    transform-origin: 50% 50%;
  }
}