.confetti-piece:nth-child(1) {
  left: 7%;
  transform: rotate(11deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 105ms;
          animation-delay: 105ms;
  -webkit-animation-duration: 1147ms;
          animation-duration: 1147ms;
}
.confetti-piece:nth-child(2) {
  left: 14%;
  transform: rotate(-44deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 179ms;
          animation-delay: 179ms;
  -webkit-animation-duration: 1109ms;
          animation-duration: 1109ms;
}
.confetti-piece:nth-child(3) {
  left: 21%;
  transform: rotate(60deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 347ms;
          animation-delay: 347ms;
  -webkit-animation-duration: 1153ms;
          animation-duration: 1153ms;
}
.confetti-piece:nth-child(4) {
  left: 28%;
  transform: rotate(-56deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 497ms;
          animation-delay: 497ms;
  -webkit-animation-duration: 1144ms;
          animation-duration: 1144ms;
}
.confetti-piece:nth-child(5) {
  left: 35%;
  transform: rotate(-26deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 219ms;
          animation-delay: 219ms;
  -webkit-animation-duration: 1174ms;
          animation-duration: 1174ms;
}
.confetti-piece:nth-child(6) {
  left: 42%;
  transform: rotate(-53deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 278ms;
          animation-delay: 278ms;
  -webkit-animation-duration: 919ms;
          animation-duration: 919ms;
}
.confetti-piece:nth-child(7) {
  left: 49%;
  transform: rotate(-5deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 459ms;
          animation-delay: 459ms;
  -webkit-animation-duration: 732ms;
          animation-duration: 732ms;
}
.confetti-piece:nth-child(8) {
  left: 56%;
  transform: rotate(48deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 348ms;
          animation-delay: 348ms;
  -webkit-animation-duration: 940ms;
          animation-duration: 940ms;
}
.confetti-piece:nth-child(9) {
  left: 63%;
  transform: rotate(-37deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 273ms;
          animation-delay: 273ms;
  -webkit-animation-duration: 1139ms;
          animation-duration: 1139ms;
}
.confetti-piece:nth-child(10) {
  left: 70%;
  transform: rotate(34deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 375ms;
          animation-delay: 375ms;
  -webkit-animation-duration: 1050ms;
          animation-duration: 1050ms;
}
.confetti-piece:nth-child(11) {
  left: 77%;
  transform: rotate(37deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 149ms;
          animation-delay: 149ms;
  -webkit-animation-duration: 850ms;
          animation-duration: 850ms;
}
.confetti-piece:nth-child(12) {
  left: 84%;
  transform: rotate(-51deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 196ms;
          animation-delay: 196ms;
  -webkit-animation-duration: 943ms;
          animation-duration: 943ms;
}
.confetti-piece:nth-child(13) {
  left: 91%;
  transform: rotate(61deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 438ms;
          animation-delay: 438ms;
  -webkit-animation-duration: 1060ms;
          animation-duration: 1060ms;
}
.confetti-piece:nth-child(odd) {
  background: #17d3ff;
}
.confetti-piece:nth-child(even) {
  z-index: 1;
}
.confetti-piece:nth-child(4n) {
  width: 5px;
  height: 12px;
  -webkit-animation-duration: 2000ms;
          animation-duration: 2000ms;
}
.confetti-piece:nth-child(3n) {
  width: 3px;
  height: 10px;
  -webkit-animation-duration: 2500ms;
          animation-duration: 2500ms;
  -webkit-animation-delay: 1000ms;
          animation-delay: 1000ms;
}
.confetti-piece:nth-child(4n-7) {
  background: #ff4e91;
}

@-webkit-keyframes makeItRain {
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    transform: translateY(200px);
  }
}

@keyframes makeItRain {
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    transform: translateY(200px);
  }
}