.cherry-scene { position: relative; width: 300px; height: 300px; }

.cherry {
  display: inline-block;
  position: absolute;
  top: 120px; left: 60px;
  width: 90px; height: 90px;
  background: radial-gradient(circle at 35% 30%, #FA857F, #FA857F 70%);
  border-radius: 50%;
}

.cherry2 { 
  top: 130px; left: 160px; 
}


/* only the clickable one gets pointer + hover effect */
.clickable-cherry {
  cursor: pointer;
}

.clickable-cherry:hover {
  background: rgba(0, 0, 0, 0.05);
}

.stem {
  position: absolute;
  top: 20px; left: 160px;
  width: 6px; height: 130px;
  background: #6b4226;
  border-radius: 3px;
  transform-origin: top center;
  transform: rotate(30deg);
}
.stem2 {
  transform: rotate(-23deg);
  left: 150px;
  height: 130px;
}

.leaf {
  position: absolute;
  top: 5px; left: 146px;
  width: 45px; height: 35px;
  background: #3f8f3f;
  border-radius: 0 100% 0 100%;
  transform: rotate(-60deg);
}