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

body {
    font-size: 16px;
    line-height: 1.5;
}

html {
    background-color: #e2ff00;   
}

header {
    padding: 30px;   
}

h1 {
    font-size: 3em;
    text-align: center;
}

h1 span {
    opacity: 0;   
}

@-webkit-keyframes animation {
    0%  { -webkit-transform: translateY(100px); opacity: 0; }
    20%  { -webkit-transform: translateY(-90px) }
    40%  { -webkit-transform: translateY(70px) }
    60%  { -webkit-transform: translateY(-40px) }
    80%  { -webkit-transform: translateY(10px) }
    100% { -webkit-transform: translateY(0); opacity: 1 }
}

#text .leaf {
  display: inline-block;
}

@-webkit-keyframes animation {
    0%  { -webkit-transform: translateY(100px); opacity: 0; }
    20%  { -webkit-transform: translateY(-90px) }
    40%  { -webkit-transform: translateY(70px) }
    60%  { -webkit-transform: translateY(-40px) }
    80%  { -webkit-transform: translateY(10px) }
    100% { -webkit-transform: translateY(0); opacity: 1 }
}

@keyframes animation {
    0%   { transform: translateY(100px); opacity: 0; }
    20%  { transform: translateY(-90px) }
    40%  { transform: translateY(70px) }
    60%  { transform: translateY(-40px) }
    80%  { transform: translateY(10px) }
    100% { transform: translateY(0); opacity: 1 }
}

#text .leaf:nth-child(1) {
    animation:1s 0s linear animation;
    -webkit-animation:1s 0s linear animation;
    -moz-animation:1s 0s linear animation;
    -o-animation:1s 0s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(2) {
    animation:1s .090909090909091s linear animation;
    -webkit-animation:1s .090909090909091s linear animation;
    -moz-animation:1s .090909090909091s linear animation;
    -o-animation:1s .090909090909091s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(3) {
    animation:1s .18181818181818s linear animation;
    -webkit-animation:1s .18181818181818s linear animation;
    -moz-animation:1s .18181818181818s linear animation;
    -o-animation:1s .18181818181818s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(4) {
    animation:1s .27272727272727s linear animation;
    -webkit-animation:1s .27272727272727s linear animation;
    -moz-animation:1s .27272727272727s linear animation;
    -o-animation:1s .27272727272727s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(6) {
    animation:1s .36363636363636s linear animation;
    -webkit-animation:1s .36363636363636s linear animation;
    -moz-animation:1s .36363636363636s linear animation;
    -o-animation:1s .36363636363636s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(7) {
    animation:1s .45454545454545s linear animation;
    -webkit-animation:1s .45454545454545s linear animation;
    -moz-animation:1s .45454545454545s linear animation;
    -o-animation:1s .45454545454545s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(8) {
    animation:1s .54545454545455s linear animation;
    -webkit-animation:1s .54545454545455s linear animation;
    -moz-animation:1s .54545454545455s linear animation;
    -o-animation:1s .54545454545455s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(10) {
    animation:1s .63636363636364s linear animation;
    -webkit-animation:1s .63636363636364s linear animation;
    -moz-animation:1s .63636363636364s linear animation;
    -o-animation:1s .63636363636364s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(11) {
    animation:1s .72727272727273s linear animation;
    -webkit-animation:1s .72727272727273s linear animation;
    -moz-animation:1s .72727272727273s linear animation;
    -o-animation:1s .72727272727273s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(12) {
    animation:1s .81818181818182s linear animation;
    -webkit-animation:1s .81818181818182s linear animation;
    -moz-animation:1s .81818181818182s linear animation;
    -o-animation:1s .81818181818182s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(13) {
    animation:1s .90909090909091s linear animation;
    -webkit-animation:1s .90909090909091s linear animation;
    -moz-animation:1s .90909090909091s linear animation;
    -o-animation:1s .90909090909091s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(14) {
    animation:1s 1s linear animation;
    -webkit-animation:1s 1s linear animation;
    -moz-animation:1s 1s linear animation;
    -o-animation:1s 1s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(15) {
    animation:1s 1.0909090909091s linear animation;
    -webkit-animation:1s 1.0909090909091s linear animation;
    -moz-animation:1s 1.0909090909091s linear animation;
    -o-animation:1s 1.0909090909091s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(17) {
    animation:1s 1.1818181818182s linear animation;
    -webkit-animation:1s 1.1818181818182s linear animation;
    -moz-animation:1s 1.1818181818182s linear animation;
    -o-animation:1s 1.1818181818182s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(18) {
    animation:1s 1.2727272727273s linear animation;
    -webkit-animation:1s 1.2727272727273s linear animation;
    -moz-animation:1s 1.2727272727273s linear animation;
    -o-animation:1s 1.2727272727273s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(19) {
    animation:1s 1.3636363636364s linear animation;
    -webkit-animation:1s 1.3636363636364s linear animation;
    -moz-animation:1s 1.3636363636364s linear animation;
    -o-animation:1s 1.3636363636364s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(20) {
    animation:1s 1.4545454545455s linear animation;
    -webkit-animation:1s 1.4545454545455s linear animation;
    -moz-animation:1s 1.4545454545455s linear animation;
    -o-animation:1s 1.4545454545455s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(21) {
    animation:1s 1.5454545454545s linear animation;
    -webkit-animation:1s 1.5454545454545s linear animation;
    -moz-animation:1s 1.5454545454545s linear animation;
    -o-animation:1s 1.5454545454545s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(22) {
    animation:1s 1.6363636363636s linear animation;
    -webkit-animation:1s 1.6363636363636s linear animation;
    -moz-animation:1s 1.6363636363636s linear animation;
    -o-animation:1s 1.6363636363636s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(23) {
    animation:1s 1.7272727272727s linear animation;
    -webkit-animation:1s 1.7272727272727s linear animation;
    -moz-animation:1s 1.7272727272727s linear animation;
    -o-animation:1s 1.7272727272727s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(24) {
    animation:1s 1.8181818181818s linear animation;
    -webkit-animation:1s 1.8181818181818s linear animation;
    -moz-animation:1s 1.8181818181818s linear animation;
    -o-animation:1s 1.8181818181818s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}

#text .leaf:nth-child(25) {
    animation:1s 1.9090909090909s linear animation;
    -webkit-animation:1s 1.9090909090909s linear animation;
    -moz-animation:1s 1.9090909090909s linear animation;
    -o-animation:1s 1.9090909090909s linear animation;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards
}