html,
body {
  margin: 0;
  padding: 0;
}

body::before {
  top: 50%;
  z-index: -1;
  width: 100%;
  height: 50%;
  background-color: #dddddd;
}

::before,
::after {
  position: absolute;
  content: "";
}

.scene {
  margin: 280px auto 40px auto;
  width: 140px;
}

.pot {
  position: relative;
  background: #ee7d15;
}

.pot > div {
  position: absolute;
}

.pot-bot {
  width: 100px;
  height: 100px;
}

.pot-bot::before {
  top: 0;
  left: -15px;
  border-top: 100px solid #ee7d15;
  border-right: 0 solid transparent;
  border-left: 15px solid transparent;
}

.pot-bot::after {
  top: 0;
  right: -15px;
  border-top: 100px solid #ee7d15;
  border-right: 15px solid transparent;
  border-left: 0 solid transparent;
}

.pot-top {
  top: -25px;
  left: 50%;
  margin-left: -70px;
  width: 140px;
  height: 25px;
}

.pot-top::before {
  top: 0;
  left: -5px;
  border-top: 25px solid #ee7d15;
  border-right: 0 solid transparent;
  border-left: 5px solid transparent;
}

.pot-top::after {
  top: 0;
  right: -5px;
  border-top: 25px solid #ee7d15;
  border-right: 5px solid transparent;
  border-left: 0 solid transparent;
}

.pot-shadow {
  top: 0;
  left: 50%;
  z-index: 3;
  margin-left: -62.5px;
  width: 125px;
  height: 10px;
  background: rgba(220, 84, 0, 0.2);
}

.shadow {
  bottom: -5px;
  left: 50%;
  z-index: -1;
  margin-left: -60px;
  width: 120px;
  height: 10px;
  border-radius: 120px / 10px;
  background: rgba(220, 84, 0, 0.1);
}

.plant {
  bottom: 0;
  left: 50%;
  z-index: -1;
  margin-left: -8px;
  width: 16px;
  height: 280px;
  border-radius: 16px 16px 0 0;
  background: #00c975;
}

.plant > div {
  position: absolute;
}

.plant::before {
  right: 0;
  bottom: 0;
  width: 4px;
  height: 275px;
  border-radius: 0 30px 0 0;
  background: rgba(60, 188, 131, 0.5);
}

.plant::after {
  top: 110px;
  left: 10px;
  width: 0;
  height: 0;
  border-radius: 100px 0 100px 0;
  background: #3cbc83;
  transform: rotate(-20deg);
  animation: leaf 5s ease-out forwards;
  animation-delay: 4s;
}

.head {
  top: -15px;
  left: 50%;
  margin-left: -25px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background: #fda342;
  transform: scale(0.4);
  animation: flower 3s 1s forwards ease-out;
}

.face {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 25px;
  background: #a3430c;
}

li {
  position: absolute;
  float: left;
  width: 50px;
  height: 30px;
  border-radius: 100px 0 100px 0;
  background: #facb3d;
  list-style: none;
}

li:nth-child(1) {
  top: 10px;
  left: 60px;
  transform: rotate(30deg);
}

li:nth-child(2) {
  top: 15px;
  right: 60px;
  transform: rotate(20deg);
}

li:nth-child(3) {
  top: 55px;
  right: 45px;
  transform: rotate(-20deg);
}

li:nth-child(4) {
  top: 55px;
  left: 45px;
  transform: rotate(-110deg);
}

li:nth-child(5) {
  top: 75px;
  left: 0;
  transform: rotate(-60deg);
}

li:nth-child(6) {
  bottom: 55px;
  left: 45px;
  transform: rotate(-20deg);
}

li:nth-child(7) {
  right: 45px;
  bottom: 55px;
  transform: rotate(-110deg);
}

li:nth-child(8) {
  bottom: 75px;
  left: 0;
  transform: rotate(-60deg);
}

.plant,
.plant::before {
  animation: grow 4s ease-out forwards;
}

@keyframes grow {
  from {
    height: 50px;
  }

  to {
    height: 280px;
  }
}

@keyframes flower {
  from {
    transform: scale(0.4);
  }

  to {
    transform: scale(1);
  }
}

@keyframes leaf {
  from {
    width: 0;
    height: 0;
  }

  to {
    width: 40px;
    height: 20px;
  }
}