<div class="container">
  <div class="sky"></div>
  <div class="ground">
    <div class="seed">
      <div class="left-root"></div>
      <div class="right-root-bunch">
        <div class="rr1"></div>
        <div class="rr2"></div>
        <div class="rr3"></div>
      </div>
    </div>
    
    <div class="stem">
      <div class="leaves-div">
        <div class="leaf1"></div>
        <div class="leaf2"></div>
      </div>
      <div class="s0"></div>
      <div class="s1"></div>
      <div class="s2"></div>
      <div class="s3"></div>
    </div>
  </div>
</div>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background-image: linear-gradient(to bottom, #5da5d8, lightblue);
}

.container{
  width:100vw;
  min-height:100vh;
  overflow-x: hidden;
}

.ground{
  width:100vw;
  min-height:50vh;
  background-color: #7c3c21;
  position: relative;
  top:50vh;
  z-index: -3;
  background-image: linear-gradient(to top, #33312d, #3b3530, #605345);
}

.seed{
  width:8vw;
  height:5vw;
  border-radius:50%;
  background-color: yellow;
  background-image: linear-gradient(to top, #ffd31d, #f6d743, #f6f578);
  position: absolute;
  top:10vw;
  left:40vw;
}

.left-root{
  width:0.2vw;
  height:5vw;
  background-color: #fff;
  border-radius:
96% 0% 100% 0% / 85% 10% 100% 25%;
  position: relative;
  top:1.5vw;
  z-index: -1;
  transform:rotateZ(5deg);
  animation:leftRootGrows 3s ease forwards;
}

@keyframes leftRootGrows{
  0%{
    height:0;
  }
  
  100%{
    height:5vw;
  }
}

@keyframes rightRootsGrow{
  0%{
    opacity: 0;
    height:0;
  }
  
  100%{
    opacity: 1;
    height:5vw;
  }
}

.right-root-bunch{
  display: flex;
  position: relative;
  left:7vw;
  bottom:1.5vw;
  z-index: -1;
  opacity: 0;
  animation:rightRootsGrow 3s ease forwards;
  animation-delay:3s;
}

.rr1, .rr2{
   width:0.2vw;
  height:5vw;
  background-color: #fff3cd;
  border-radius:
96% 0% 100% 0% / 85% 10% 100% 25%;
  transform:rotateZ(-5deg);
  margin:0.1vw;
  animation:rightRootsGrow 3s ease forwards;
  animation-delay:3s;
}

.rr2{
  transform:rotateZ(-15deg);
}

.rr3{
  width:3vw;
  height:5vw;
  border-radius:100%;
  border-right:3px solid #fff3cd;
  position: relative;
  right:2vw;
  animation:rightRootsGrow 3s ease forwards;
  animation-delay:3s; 
}

.stem{
  display: flex;
  flex-direction:column;
  position: relative;
  left:46vw;
  bottom:25vw;
  z-index: -1;
  animation:stemPositionChanges 4s ease forwards;
  animation-delay:5.8s;
}

@keyframes stemPositionChanges{
  0%{
    bottom:10vw;
  }
  
  100%{
    bottom:25vw;
  }
}

@keyframes s3Grows{
  0%{
    opacity: 0;
    height:0;
  }
  
  100%{
    opacity: 1;
    height:8vw;
  }
}

.s3{
  width:2.8vw;
  height:8vw;
  background-color: green;
  transform:rotateZ(20deg);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
 background-image: linear-gradient(to right, #677d41, #6d813f, #a2a74e, #adb75d);
   opacity: 0;
  animation:s3Grows 3s ease forwards;
  animation-delay:6s;
}

.s2{
  width:1.9vw;
  height:6vw;
  background-color: green;
  transform:rotateZ(-1deg);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  position: relative;
  left:1.6vw;
  top:0.8vw;
 background-image: linear-gradient(to right, #677d41, #6d813f, #a2a74e, #adb75d);
  opacity: 0;
  animation:s3Grows 3s ease forwards;
  animation-delay:6s;
}

@keyframes opacityBecomesOne{
  0%{
    opacity: 0;
  }
  
  100%{
    opacity: 1;
  }
}

.s1{
  width:1.3vw;
  height:8vw;
  background-color: green;
  transform:rotateZ(8deg);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  position: relative;
  left:2.3vw;
  top:2vw;
 background-image: linear-gradient(to right, #677d41, #6d813f, #a2a74e, #adb75d);
    opacity: 0;
  animation:opacityBecomesOne 2s ease forwards;
  animation-delay:8.4s;
}

.s0{
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width:0.8vw;
  height:5vw;
  background-color: green;
  transform:rotateZ(10deg);
  position: relative;
  left:3.45vw;
  top:2.5vw;
 background-image: linear-gradient(to right, #677d41, #6d813f, #a2a74e, #adb75d);
    opacity: 0;
  animation:opacityBecomesOne 2s ease forwards;
  animation-delay:8.7s;
}

.leaves-div{
  display: flex;
  position: relative;
  top:4.5vw;
  left:2vw;
  z-index: 1;
}

.leaf1, .leaf2{
  border-radius:96% 0% 100% 0% / 85% 2% 100% 0%;
  background-image: linear-gradient(to left, #709955, #dbe250);
  width:2vw;
  height:8vw;
  opacity: 0;
   animation:opacityBecomesOne 2s ease forwards;
  animation-delay:9s;
}

.leaf1{
  transform:rotateZ(-30deg);
  border-radius:100% 0% 100% 0% / 100% 0% 100% 0%;
  background-image: linear-gradient(to right, #709955,  #709955, #b7cba5);
}