function showReadMore(modal) {

    // Get the modal
    var divModal = document.getElementById('modal-' + modal);

    divModal.style.display = "block";

    // Get the <span> element that closes the modal
    var close = document.getElementById('close-' + modal);

    // When the user clicks the button, open the modal 

    // When the user clicks on <span> (x), close the modal
    close.onclick = function () {
        divModal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target == divModal) {
            divModal.style.display = "none";
        }
    }

    window.onclick = function (event) {
        if (event.target == divModal) {
            divModal.style.display = "none";
        }
    }

    const input = document.body;
    input.onkeydown = function (event) {
        if (event.key == "Escape") {
            divModal.style.display = "none";
        }
    };
}

function toggleFilter(element, filter) {
    let filterListNav = document.getElementsByTagName('nav')
    for (var i = 0; i < filterListNav.length; i++) {
        for (var i2 = 0; i2 < filterListNav[i].children.length; i2++) {
            if (!filterListNav[i].children[i2].classList.contains(filter)) {
                filterListNav[i].children[i2].classList.remove('active')
            }
        }
    }

    element.classList.toggle('active')

    let filterList = document.getElementsByClassName('card')
    let filterListLength = filterList.length

    for (var i = 0; i < filterListLength; i++) {
        if (element.classList.contains('active')) {
            if (!filterList[i].classList.contains(filter)) {
                filterList[i].style.opacity = .3
            } else {
                filterList[i].style.opacity = 1
            }
        } else {
            filterList[i].style.opacity = 1
        }
    }
}

function switchTheme(e) {
    let actualTheme = document.documentElement.getAttribute('data-theme');
    if (actualTheme === null || actualTheme === 'light') {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    } else {
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light');
    }
    return false;
}

const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
}