.icon {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 6px;
    position: relative;
}

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

.confetti-piece {
    position: absolute;
    width: 8px;
    height: 16px;
    background: #ffd300;
    top: 0;
    opacity: 0;
}

    .confetti-piece:nth-child(1) {
        left: 7%;
        transform: rotate(50deg);
        -webkit-animation: makeItRain 1000ms infinite ease-out;
        animation: makeItRain 1000ms infinite ease-out;
        -webkit-animation-delay: 198ms;
        animation-delay: 198ms;
        -webkit-animation-duration: 1021ms;
        animation-duration: 1021ms;
    }

    .confetti-piece:nth-child(2) {
        left: 14%;
        transform: rotate(-14deg);
        -webkit-animation: makeItRain 1000ms infinite ease-out;
        animation: makeItRain 1000ms infinite ease-out;
        -webkit-animation-delay: 417ms;
        animation-delay: 417ms;
        -webkit-animation-duration: 1167ms;
        animation-duration: 1167ms;
    }

    .confetti-piece:nth-child(3) {
        left: 21%;
        transform: rotate(-29deg);
        -webkit-animation: makeItRain 1000ms infinite ease-out;
        animation: makeItRain 1000ms infinite ease-out;
        -webkit-animation-delay: 54ms;
        animation-delay: 54ms;
        -webkit-animation-duration: 1185ms;
        animation-duration: 1185ms;
    }

    .confetti-piece:nth-child(4) {
        left: 28%;
        transform: rotate(22deg);
        -webkit-animation: makeItRain 1000ms infinite ease-out;
        animation: makeItRain 1000ms infinite ease-out;
        -webkit-animation-delay: 215ms;
        animation-delay: 215ms;
        -webkit-animation-duration: 1066ms;
        animation-duration: 1066ms;
    }

    .confetti-piece:nth-child(5) {
        left: 35%;
        transform: rotate(-7deg);
        -webkit-animation: makeItRain 1000ms infinite ease-out;
        animation: makeItRain 1000ms infinite ease-out;
        -webkit-animation-delay: 292ms;
        animation-delay: 292ms;
        -webkit-animation-duration: 916ms;
        animation-duration: 916ms;
    }

    .confetti-piece:nth-child(6) {
        left: 42%;
        transform: rotate(67deg);
        -webkit-animation: makeItRain 1000ms infinite ease-out;
        animation: makeItRain 1000ms infinite ease-out;
        -webkit-animation-delay: 38ms;
        animation-delay: 38ms;
        -webkit-animation-duration: 1094ms;
        animation-duration: 1094ms;
    }

    .confetti-piece:nth-child(7) {
        left: 49%;
        transform: rotate(48deg);
        -webkit-animation: makeItRain 1000ms infinite ease-out;
        animation: makeItRain 1000ms infinite ease-out;
        -webkit-animation-delay: 69ms;
        animation-delay: 69ms;
        -webkit-animation-duration: 1145ms;
        animation-duration: 1145ms;
    }

    .confetti-piece:nth-child(8) {
        left: 56%;
        transform: rotate(32deg);
        -webkit-animation: makeItRain 1000ms infinite ease-out;
        animation: makeItRain 1000ms infinite ease-out;
        -webkit-animation-delay: 166ms;
        animation-delay: 166ms;
        -webkit-animation-duration: 753ms;
        animation-duration: 753ms;
    }

    .confetti-piece:nth-child(9) {
        left: 63%;
        transform: rotate(-55deg);
        -webkit-animation: makeItRain 1000ms infinite ease-out;
        animation: makeItRain 1000ms infinite ease-out;
        -webkit-animation-delay: 144ms;
        animation-delay: 144ms;
        -webkit-animation-duration: 997ms;
        animation-duration: 997ms;
    }

    .confetti-piece:nth-child(10) {
        left: 70%;
        transform: rotate(-29deg);
        -webkit-animation: makeItRain 1000ms infinite ease-out;
        animation: makeItRain 1000ms infinite ease-out;
        -webkit-animation-delay: 50ms;
        animation-delay: 50ms;
        -webkit-animation-duration: 1104ms;
        animation-duration: 1104ms;
    }

    .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: 417ms;
        animation-delay: 417ms;
        -webkit-animation-duration: 1134ms;
        animation-duration: 1134ms;
    }

    .confetti-piece:nth-child(12) {
        left: 84%;
        transform: rotate(-6deg);
        -webkit-animation: makeItRain 1000ms infinite ease-out;
        animation: makeItRain 1000ms infinite ease-out;
        -webkit-animation-delay: 450ms;
        animation-delay: 450ms;
        -webkit-animation-duration: 934ms;
        animation-duration: 934ms;
    }

    .confetti-piece:nth-child(13) {
        left: 91%;
        transform: rotate(47deg);
        -webkit-animation: makeItRain 1000ms infinite ease-out;
        animation: makeItRain 1000ms infinite ease-out;
        -webkit-animation-delay: 370ms;
        animation-delay: 370ms;
        -webkit-animation-duration: 1049ms;
        animation-duration: 1049ms;
    }

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