body {
  background: #222;
  margin: 0;
  overflow-x: hidden; /* prevents horizontal scrollbar just in case */
}

/* leaf container covers the viewport */
#leaves {
  position: fixed;   /* fixed so leaves fall across screen */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* don’t block clicks */
  overflow: hidden;     /* keeps leaves inside */
}

/* each leaf */
#leaves i {
  position: absolute;  /* <-- key change */
  display: block;
  background: linear-gradient(to bottom right, #FF8C00, #FF4500);
  border-radius: 5% 40% 70%;
  box-shadow: inset 0px 0px 1px #222;
  border: 1px solid #333;
  -webkit-animation: falling 5s infinite;
}

/* color variation */
#leaves i:nth-of-type(2n) { 
  background: linear-gradient(to bottom right, #FFA500, #CC5500);
  -webkit-animation: falling2 6s infinite;
}
#leaves i:nth-of-type(3n) { 
  background: linear-gradient(to bottom right, #FFD700, #FF8C00);
  -webkit-animation: falling3 7s infinite;
}

/* opacity variation */
#leaves i:nth-of-type(n)    { opacity: .7; }
#leaves i:nth-of-type(3n+1) { opacity: .5; }
#leaves i:nth-of-type(3n+2) { opacity: .3; }

/* keyframes */
@-webkit-keyframes falling {
  0%   { -webkit-transform: translate3d(0,-50px,0) rotate(0deg); }
  100% { -webkit-transform: translate3d(-50vw,100vh,0) rotate(120deg); opacity:0; }
}
@-webkit-keyframes falling2 {
  0%   { -webkit-transform: translate3d(0,-50px,0) rotate(60deg); }
  100% { -webkit-transform: translate3d(50vw,100vh,0) rotate(0deg); opacity:0; }
}
@-webkit-keyframes falling3 {
  0%   { -webkit-transform: translate3d(0,-50px,0) rotate(-20deg); }
  100% { -webkit-transform: translate3d(-25vw,100vh,0) rotate(-90deg); opacity:0; }
}