nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.nav-element {
    width: 200px;
    height: 250px;
    background-color: #37374a;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.65);

    display: grid;
    grid-template-rows: 1fr 2fr 3fr;
    align-items: center;
    justify-items: center;

    /* needs to be above canvas for hovering to work everywhere */
    z-index: 5;
    position: relative;
}

.nav-element:hover,
.js-selected .nav-element {
    background-color: #9999c6;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 1.0);
    color: #000000;
}

h3 {
    margin: 1em;
}

img.icon {
    filter: invert(1);
    max-width: 80%;
    height: 100px;
}

.nav-element:hover img,
.js-selected .nav-element img {
    filter: unset;
}

#dynamic-content {
    position: relative;
    max-width: 600px;
    height: 250px;
    background-color: #37374a;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.65);
    margin: 30px 0px 0px 0px;
    padding: 0 30px 10px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

a.link-symbol {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
}

#effect {
    width: 500px;
    height: 500px;
    margin: auto auto -7em auto;
}

#dynamic-content img.icon {
    max-width: 40%;
    padding: 10px;
}

@media screen and (max-width: 699px) {
    nav {
        width: 99vw;
        gap: 10px;
    }

    h3 {
        margin: 0.2em;
    }

    .nav-element {
        grid-template-rows: 1fr 2fr;
        width: min(calc(33vw - 20px), 350px);
        height: min(33vw, 350px);
        margin: auto;
    }

    .short-description {
        display: none;
    }

    #effect {
        width: 300px;
        height: 300px;
        margin: auto auto -100px auto;
    }

    img.icon {
        max-height: 150px;
        height: auto;
    }

    #dynamic-content {
        max-width: 99vw;
    }
}

@media screen and (max-width: 399px) {
    nav {
        gap: 5px;
    }

    .nav-element {
        width: min(calc(33vw - 10px), 350px);
    }
}

@media screen and (max-width: 299px) {
    nav {
        gap: 1px;
    }

    .nav-element {
        width: min(calc(33vw - 2px), 350px);
    }
}