* {
  margin: 0;
  padding: 0;
}




svg {
  margin: 1rem;
}

#apple {
  stroke-dashoffset: 100;
  stroke-dasharray: 100;
  animation: apple_stroke 2s ease-in-out forwards, apple_fill ease-in 10s forwards;
}

#shine {
  stroke-dashoffset: 100;
  stroke-dasharray: 100;
  animation: shine_stroke 2s ease-in-out forwards, shine_fill ease-in 10s forwards;
}

#stem {
  stroke-dashoffset: 100;
  stroke-dasharray: 100;
  animation: stem_stroke 2s ease-in-out forwards, stem_fill ease-in 10s forwards;
}

#leaf {
  stroke-dashoffset: 100;
  stroke-dasharray: 100;
  animation: leaf_stroke 2s ease-in-out forwards, leaf_fill ease-in 10s forwards;
}

@keyframes apple_stroke {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes apple_fill {
  0% {
    fill: none;
  }
  1% {
    fill: rgba(170, 0, 0, 0);
  }
  100% {
    fill: rgba(170, 0, 0, 0.32);
  }
}
@keyframes shine_stroke {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes shine_fill {
  0% {
    fill: none;
  }
  1% {
    fill: rgba(255, 255, 255, 0);
  }
  100% {
    fill: rgba(255, 255, 255, 0.6);
  }
}
@keyframes stem_stroke {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes stem_fill {
  0% {
    fill: none;
  }
  1% {
    fill: rgba(85, 34, 0, 0);
  }
  100% {
    fill: rgba(85, 34, 0, 0.32);
  }
}
@keyframes leaf_stroke {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes leaf_fill {
  0% {
    fill: none;
  }
  1% {
    fill: rgba(128, 128, 0, 0);
  }
  100% {
    fill: rgba(128, 128, 0, 0.32);
  }
}