$(document).ready(function () {
    //Opens navigation bar for mobile if the button is clicked.
    $("#navigation-btn").on("click", function (event) {
        $("#mobile-navigation").addClass("visible");
        $("#navigation-btn").addClass("hidden");
        $("#navigation-btn").removeClass("visible");
        $("#mobile-navigation").removeClass("hidden");
        //Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
        //Navigation bar does not closes after opening.
        event.stopPropagation();
    });
    //Closes the navigation bar for mobile if the user clicks outside of the menu.
    $(document).on("click", function () {
        $("#mobile-navigation").addClass("hidden");
        $("#navigation-btn").addClass("visible");
        $("#navigation-btn").removeClass("hidden");
        $("#mobile-navigation").removeClass("visible");
    });

    //Mouse particles
    $(document).mousemove(function (event) {
        //event gets mouse coordinates
        $("body").append(`<div class="particle" style="border-radius: 100%;position: fixed; top: ${event.pageY - $(window).scrollTop()}px; left: ${event.pageX}px; z-index: -1; background-color: #673ab7; width: 10px; height: 10px;"></div>`);
        $(".particle").fadeOut(200);
        setTimeout(function(){
            $(".particle").first().remove()
        }, 500);
    });

});