@charset "UTF-8";

.confetti {
    display: flex;
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    width: calc(100% - 20px);
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.confetti__item {
    position: absolute;
    top: -50px;
    width: 16px;
    overflow: hidden;
    list-style: none;
}

@keyframes fall1 {
    from {
        top: 0;
        right: 85%;
    }
    to {
        top: 120%;
        right: 15%;
    }
}

@keyframes fall2 {
    from {
        top: 0;
        right: 65%;
    }
    to {
        top: 120%;
        right: 35%;
    }
}

@keyframes fall3 {
    from {
        top: 0;
        right: 45%;
    }
    to {
        top: 120%;
        right: 55%;
    }
}

@keyframes fall4 {
    from {
        top: 0;
        right: 25%;
    }
    to {
        top: 120%;
        right: 75%;
    }
}

@keyframes fall5 {
    from {
        top: 0;
        right: 5%;
    }
    to {
        top: 120%;
        right: 85%;
    }
}

@keyframes rotate1 {
    from {
        transform: translateX(0px) rotate(0deg);
    }
    to {
        transform: translateX(100px) rotate(1500deg) rotateX(1500deg);
    }
}

@keyframes rotate2 {
    from {
        transform: translateX(100px) rotate(1500deg) rotateX(1500deg);
    }
    to {
        transform: translateX(0px) rotate(0deg);
    }
}

.confetti__item img {
    display: block;
    width: 100%;
    height: auto;
}