.icon {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 32px;
  position: relative;
}

.confetti {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 16px;
  background: #ffb226;
  top: 0;
  opacity: 0;
}
.confetti-piece:nth-child(1) {
  left: 7%;
  transform: rotate(52deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 362ms;
          animation-delay: 362ms;
  -webkit-animation-duration: 934ms;
          animation-duration: 934ms;
}
.confetti-piece:nth-child(2) {
  left: 14%;
  transform: rotate(-8deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 134ms;
          animation-delay: 134ms;
  -webkit-animation-duration: 874ms;
          animation-duration: 874ms;
}
.confetti-piece:nth-child(3) {
  left: 21%;
  transform: rotate(-16deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 387ms;
          animation-delay: 387ms;
  -webkit-animation-duration: 1120ms;
          animation-duration: 1120ms;
}
.confetti-piece:nth-child(4) {
  left: 28%;
  transform: rotate(5deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 399ms;
          animation-delay: 399ms;
  -webkit-animation-duration: 1065ms;
          animation-duration: 1065ms;
}
.confetti-piece:nth-child(5) {
  left: 35%;
  transform: rotate(-1deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 239ms;
          animation-delay: 239ms;
  -webkit-animation-duration: 724ms;
          animation-duration: 724ms;
}
.confetti-piece:nth-child(6) {
  left: 42%;
  transform: rotate(-24deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 477ms;
          animation-delay: 477ms;
  -webkit-animation-duration: 915ms;
          animation-duration: 915ms;
}
.confetti-piece:nth-child(7) {
  left: 49%;
  transform: rotate(-10deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 320ms;
          animation-delay: 320ms;
  -webkit-animation-duration: 1162ms;
          animation-duration: 1162ms;
}
.confetti-piece:nth-child(8) {
  left: 56%;
  transform: rotate(15deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 278ms;
          animation-delay: 278ms;
  -webkit-animation-duration: 1019ms;
          animation-duration: 1019ms;
}
.confetti-piece:nth-child(9) {
  left: 63%;
  transform: rotate(27deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 121ms;
          animation-delay: 121ms;
  -webkit-animation-duration: 860ms;
          animation-duration: 860ms;
}
.confetti-piece:nth-child(10) {
  left: 70%;
  transform: rotate(-53deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 239ms;
          animation-delay: 239ms;
  -webkit-animation-duration: 1090ms;
          animation-duration: 1090ms;
}
.confetti-piece:nth-child(11) {
  left: 77%;
  transform: rotate(79deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 373ms;
          animation-delay: 373ms;
  -webkit-animation-duration: 721ms;
          animation-duration: 721ms;
}
.confetti-piece:nth-child(12) {
  left: 84%;
  transform: rotate(-9deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 221ms;
          animation-delay: 221ms;
  -webkit-animation-duration: 1165ms;
          animation-duration: 1165ms;
}
.confetti-piece:nth-child(13) {
  left: 91%;
  transform: rotate(-59deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
          animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 83ms;
          animation-delay: 83ms;
  -webkit-animation-duration: 1110ms;
          animation-duration: 1110ms;
}
.confetti-piece:nth-child(odd) {
  background: #ff8f8c;
}
.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: #404040;
}

@-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);
  }
}