/* ==========================================
   Halloween Event
========================================== */

.halloween-particle{

    position:fixed;

    top:-50px;

    pointer-events:none;

    user-select:none;

    z-index:-1;

    animation:halloweenFall linear forwards;

    filter:
        drop-shadow(0 0 8px orange);

}

@keyframes halloweenFall{

    0%{

        transform:
            translateY(-40px)
            translateX(0)
            rotate(0deg);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    25%{

        transform:
            translateY(25vh)
            translateX(-40px)
            rotate(-30deg);

    }

    50%{

        transform:
            translateY(50vh)
            translateX(35px)
            rotate(35deg);

    }

    75%{

        transform:
            translateY(75vh)
            translateX(-25px)
            rotate(-20deg);

    }

    100%{

        transform:
            translateY(110vh)
            translateX(20px)
            rotate(360deg);

        opacity:0;

    }

}