.confetti {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    height: 200px;
    overflow: hidden;
    margin-top: 300px;
  }
  
  .confetti-piece {
    position: absolute;
    width: 8px;
    height: 16px;
    background: #f54242;
    top: 0;
    opacity: 0;
  }
  
  .confetti-piece:nth-child(1) {
    left: 7%;
    transform: rotate(-58deg);
    animation: makeItRain 1000ms infinite ease-out;
    animation-delay: 264ms;
    animation-duration: 793ms;
  }
  
  .confetti-piece:nth-child(2) {
    left: 14%;
    transform: rotate(34deg);
    animation: makeItRain 1000ms infinite ease-out;
    animation-delay: 77ms;
    animation-duration: 876ms;
  }
  
  .confetti-piece:nth-child(3) {
    left: 21%;
    transform: rotate(-17deg);
    animation: makeItRain 1000ms infinite ease-out;
    animation-delay: 110ms;
    animation-duration: 990ms;
  }
  
  .confetti-piece:nth-child(4) {
    left: 28%;
    transform: rotate(34deg);
    animation: makeItRain 1000ms infinite ease-out;
    animation-delay: 140ms;
    animation-duration: 1038ms;
  }
  
  .confetti-piece:nth-child(5) {
    left: 35%;
    transform: rotate(-54deg);
    animation: makeItRain 1000ms infinite ease-out;
    animation-delay: 223ms;
    animation-duration: 868ms;
  }
  
  .confetti-piece:nth-child(6) {
    left: 42%;
    transform: rotate(36deg);
    animation: makeItRain 1000ms infinite ease-out;
    animation-delay: 300ms;
    animation-duration: 749ms;
  }
  
  .confetti-piece:nth-child(7) {
    left: 49%;
    transform: rotate(22deg);
    animation: makeItRain 1000ms infinite ease-out;
    animation-delay: 26ms;
    animation-duration: 1183ms;
  }
  
  .confetti-piece:nth-child(8) {
    left: 56%;
    transform: rotate(-35deg);
    animation: makeItRain 1000ms infinite ease-out;
    animation-delay: 65ms;
    animation-duration: 718ms;
  }
  
  .confetti-piece:nth-child(9) {
    left: 63%;
    transform: rotate(57deg);
    animation: makeItRain 1000ms infinite ease-out;
    animation-delay: 268ms;
    animation-duration: 942ms;
  }
  
  .confetti-piece:nth-child(10) {
    left: 70%;
    transform: rotate(28deg);
    animation: makeItRain 1000ms infinite ease-out;
    animation-delay: 261ms;
    animation-duration: 786ms;
  }
  
  .confetti-piece:nth-child(11) {
    left: 77%;
    transform: rotate(11deg);
    animation: makeItRain 1000ms infinite ease-out;
    animation-delay: 7ms;
    animation-duration: 848ms;
  }
  
  .confetti-piece:nth-child(12) {
    left: 84%;
    transform: rotate(66deg);
    animation: makeItRain 1000ms infinite ease-out;
    animation-delay: 114ms;
    animation-duration: 795ms;
  }
  
  .confetti-piece:nth-child(13) {
    left: 91%;
    transform: rotate(24deg);
    animation: makeItRain 1000ms infinite ease-out;
    animation-delay: 99ms;
    animation-duration: 955ms;
  }
  
  .confetti-piece:nth-child(odd) {
    background: #17d3ff;
  }
  
  .confetti-piece:nth-child(even) {
    z-index: 1;
  }
  
  .confetti-piece:nth-child(4n) {
    width: 5px;
    height: 12px;
    animation-duration: 2000ms;
  }
  
  .confetti-piece:nth-child(3n) {
    width: 3px;
    height: 10px;
    animation-duration: 2500ms;
    animation-delay: 1000ms;
  }
  
  .confetti-piece:nth-child(4n-7) {
    background: #ff4e91;
  }
  
  @keyframes makeItRain {
    from {
      opacity: 0;
    }
  
    50% {
      opacity: 1;
    }
  
    to {
      transform: translateY(200px);
    }
  }