body {
  padding: 500px;
}
.container {
position: relative;
height: 60px;
width: 50px;
transform: scale(10)
}
.face {
  top: 10px;
  position: absolute;
  height: 50px;
  width: 50px;
  border-radius: 50px;
  background-color: black;
}
.ear1 {
  position: absolute;
  height: 50px;
  width: 20px;
  border-radius: 50px;
  background-color: black;
}
.ear2 {
  position: absolute;
  left: 30px;
  height: 50px;
  width: 20px;
  border-radius: 50px;
  background-color: black;
}
.eye1 {
  position: absolute;
  top: 25px;
  left: 10px;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background-color: yellow;
}
.eye2 {
  position: absolute;
  top: 25px;
  left: 30px;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background-color: yellow;
}
.pupil1 {
  position: absolute;
  top: 27.5px;
  left: 12.5px;
  height: 5px;
  width: 5px;
  border-radius: 10px;
  background-color: black;
}
.pupil2 {
  position: absolute;
  top: 27.5px;
  left: 32.5px;
  height: 5px;
  width: 5px;
  border-radius: 10px;
  background-color: black;
}
.pupil1, .pupil2 {
  /* Increase seconds (e.g., 0.15s or 0.2s) for a stronger delay effect */
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  /* Enforces smooth hardware rendering without pixel-snapping */
  transform: translate3d(0, 0, 0);
}