* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #f1bb34;
}
.container {
  height: 100vh;
  width: 31.25em;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
}
.teacup {
  position: absolute;
  background-color: #ede7de;
  height: 20em;
  width: 21.87em;
  border-radius: 1.25em 1.25em 9.37em 9.37em;
  bottom: 6.25em;
  left: 2.5em;
}
.teacup:before {
  position: absolute;
  content: "";
  height: 6.25em;
  width: 6.25em;
  border: 1.56em solid #ede7de;
  right: -6.25em;
  bottom: 7.5em;
  border-radius: 50%;
}
.eye {
  position: absolute;
  content: "";
  height: 1.87em;
  width: 3.75em;
  background-color: transparent;
  border: 0.62em solid #272048;
  border-radius: 3.75em 3.75em 0 0;
  border-bottom: none;
  top: 5em;
  animation: open-eye 8s infinite;
}

@keyframes open-eye {
  30% {
    height: 1.87em;
    width: 3.75em;
    background-color: transparent;
    border: 0.62em solid #272048;
    border-radius: 3.75em 3.75em 0 0;
    border-bottom: none;
  }
  35% {
    height: 1.87em;
    width: 1.87em;
    background-color: #272048;
    border: none;
    border-radius: 50%;
  }
  100% {
    height: 1.87em;
    width: 1.87em;
    background-color: #272048;
    border: none;
    border-radius: 50%;
  }
}
.eye-l {
  left: 4.37em;
}
.eye-r {
  right: 4.37em;
}
.mouth {
  position: absolute;
  background-color: #f26464;
  height: 4.68em;
  width: 9.37em;
  border-radius: 1.25em 1.25em 9.37em 9.37em;
  bottom: 5em;
  left: 6.25em;
  overflow: hidden;
}
.mouth:before {
  content: "";
  position: absolute;
  height: 9.37em;
  width: 9.37em;
  background-color: #c24c4c;
  border-radius: 50%;
  top: 1.87em;
}
.saucer {
  height: 2.5em;
  width: 25em;
  background-color: #ede7de;
  position: absolute;
  bottom: -0.62em;
  left: -1.25em;
  border-radius: 2.5em;
}
.saucer:before {
  position: absolute;
  content: "";
  height: 1.87em;
  width: 21.87em;
  top: 2.5em;
  background: linear-gradient(#dbd4cc 30%, #f0ede6 30%);
  left: 1.25em;
  border-radius: 2.5em;
}
.teabag {
  position: absolute;
  background-color: #ffc684;
  height: 5.62em;
  width: 5.62em;
  top: -15em;
  left: 10.31em;
  animation: dip 8s infinite;
}
@keyframes dip {
  30% {
    background-color: #ffc684;
    transform: translateY(46.5em);
  }
  60% {
    background-color: #462f29;
    transform: translateY(21.87em);
  }
  100% {
    background-color: #462f29;
    transform: translateY(0);
  }
}
.teabag:before {
  position: absolute;
  content: "";
  height: 10em;
  width: 7.5em;
  background-color: rgba(230, 237, 239, 0.3);
  clip-path: polygon(0% 100%, 0% 25%, 25% 0%, 75% 0%, 100% 25%, 100% 100%);
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.5) 0.18em,
    transparent 0.18em
  );
  background-size: 1.25em 1.25em;
  left: -0.93em;
  bottom: -1.25em;
}
.teabag:after {
  position: absolute;
  content: "";
  height: 0.62em;
  width: 3.75em;
  background-color: #f1bb34;
  border-radius: 0.62em;
  left: 0.93em;
  bottom: 7.18em;
}
.string {
  position: absolute;
  height: 30.25em;
  width: 0.31em;
  background-color: #272048;
  left: 2.81em;
  top: -31.87em;
}