#sky {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-color: #000;
}
#sky:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(30,0,50,0.8)); /* Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgba(0,0,0,0), rgba(30,0,50,0.8)); /* For Opera 11.6 to 12.0 */
  background: -moz-linear-gradient(rgba(0,0,0,0), rgba(30,0,50,0.8)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(0,0,0,0), rgba(30,0,50,0.8)); /* Standard syntax */
  zindex: 2;
}
  #sky .stars {
    width: 200vh;
    height: 200vh;
    top: 0;
    left: 50%;
    position: absolute;
    z-index: 0;
    transfoom-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation: revolve 500s infinite linear; /* Safari 4+ */
    -moz-animation:    revolve 500s infinite linear; /* Fx 5+ */
    -o-animation:      revolve 500s infinite linear; /* Opera 12+ */
    animation:         revolve 500s infinite linear; /* IE 10+, Fx 29+ */
    pointer-events: none;
    transform: translate(-50%,0%) rotate(0deg);
    -webkit-transform: translate(-50%,0%) rotate(0deg);
  }

@keyframes revolve {
  0% { transform: translate(-50%,0%) rotate(360deg); -webkit-transform: translate(-50%,0%) rotate(360deg); }
  100% { transform: translate(-50%,0%) rotate(0deg); -webkit-transform: translate(-50%,0%) rotate(0deg); }
}

.star {
  font-size: 2px;
  position: absolute;
  width: 1em;
  height: 1em;
  background-color: rgba(255,255,255,0.9); /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.6), rgba(0,0,0,0)); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.6), rgba(0,0,0,0)); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.6), rgba(0,0,0,0)); /* For Firefox 3.6 to 15 */
  background: radial-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.6), rgba(0,0,0,0)); /* Standard syntax */
  -webkit-animation: twinkle 5s infinite; /* Safari 4+ */
  -moz-animation:    twinkle 5s infinite; /* Fx 5+ */
  -o-animation:      twinkle 5s infinite; /* Opera 12+ */
  animation:         twinkle 5s infinite; /* IE 10+, Fx 29+ */
}

@keyframes twinkle {
  0%   { opacity: 1; }
  5%   { opacity: 0.4; }
  10% { opacity: 0.8; }
  75% { opacity: 1.0; }
  95% { opacity: 0.7; }
  100% { opacity: 1; }
}

.dust {
  font-size: 2px;
  position: absolute;
  width: 1em;
  height: 1em;
  left: 0;
  bottom: 0;
  -webkit-animation: float 5s infinite; /* Safari 4+ */
  -moz-animation:    float 5s infinite; /* Fx 5+ */
  -o-animation:      float 5s infinite; /* Opera 12+ */
  animation:         float 5s infinite; /* IE 10+, Fx 29+ */
  transition: none;
  -webkit-transition: none;
}
  .dust div {
    position: absolute;
    width: 1em;
    height: 1em;
    left: 0;
    bottom: 0;
    opacity: 0.5;
    background-color: rgba(255,255,255,0.5); /* For browsers that do not support gradients */
    background: -webkit-radial-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.2), rgba(0,0,0,0)); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.2), rgba(0,0,0,0)); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.2), rgba(0,0,0,0)); /* For Firefox 3.6 to 15 */
    background: radial-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.2), rgba(0,0,0,0)); /* Standard syntax */
    -webkit-animation: sway 5s infinite; /* Safari 4+ */
    -moz-animation:    sway 5s infinite; /* Fx 5+ */
    -o-animation:      sway 5s infinite; /* Opera 12+ */
    animation:         sway 5s infinite; /* IE 10+, Fx 29+ */
    transition: none;
    -webkit-transition: none;
  }

@keyframes float {
  0%   { bottom: 0; }
  100%   { bottom: 100%; }
}
@keyframes sway {
  0%   { left: 0; }
  25%   { left: 10%; }
  50%   { left: -10%; }
  75%   { left: 5%; }
  100%   { left: 15%; }
}

#grass {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 8em;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
#grass .blade {
  position: absolute;
  bottom: -1em;
  border-radius: 15% 60%;
  border: solid 0;
  /*border-color: #2b2b2b;*/
  border-color: #000;
  border-width: 0 0.4em 1em 0;
  height: 4em;
  width: 3em;
  transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  -webkit-animation: breeze 20s infinite; /* Safari 4+ */
  -moz-animation:    breeze 20s infinite; /* Fx 5+ */
  -o-animation:      breeze 20s infinite; /* Opera 12+ */
  animation:         breeze 20s infinite; /* IE 10+, Fx 29+ */
  transition: all 200ms ease;
}
#grass .blade.reverse {
  border-radius: 35% 30% 90% 0%;
  border-width: 0 0 0.5em 0.4em;
}
#grass .blade.variante {
  /*border-radius: 35% 30% 90% 0%;*/
  /*border-width: 0 0 0.3em 0.2em;*/
  width: 5em;
  height: 7em;
}
/*@keyframes breeze {
  0%   { transform: rotate(10deg); -webkit-transform: rotate(10deg); }
  40%   { transform: rotate(5deg); -webkit-transform: rotate(5deg); }
  50%   { transform: rotate(20deg); -webkit-transform: rotate(20deg); }
  60%   { transform: rotate(10deg); -webkit-transform: rotate(10deg); }
  80%   { transform: rotate(5deg); -webkit-transform: rotate(5deg); }
  90%   { transform: rotate(25deg); -webkit-transform: rotate(25deg); }
  100%   { transform: rotate(10deg); -webkit-transform: rotate(10deg); }
}*/
@keyframes breeze {
  0%   { transform: rotate(10deg); -webkit-transform: rotate(10deg); }
  10%   { transform: rotate(25deg); -webkit-transform: rotate(25deg); }
  20%   { transform: rotate(5deg); -webkit-transform: rotate(5deg); }
  40%   { transform: rotate(10deg); -webkit-transform: rotate(10deg); }
  50%   { transform: rotate(20deg); -webkit-transform: rotate(20deg); }
  60%   { transform: rotate(5deg); -webkit-transform: rotate(5deg); }
  100%   { transform: rotate(10deg); -webkit-transform: rotate(10deg); }
}