/* Nav toggle button */
#nav-toggle {
    height: 5rem;
    width: 5rem;
    position: fixed;
    z-index: 20;
    left: 50%;
    bottom: 3rem;
    transform: translateX(-50%);
    background-color: var(--tertiary-color-light);
    border: none;
    border-radius: 100%;
    outline: none;
    box-shadow: 0.5rem 1rem 5rem rgba(0, 20, 30, 0.25);
    cursor: pointer;
    transition: transform 0.4s ease-in-out;
}

/* Nav toggle button's icons and animations */
#nav-toggle:hover {
    transform: translateX(-50%) scale(1.1);
    transition: transform 0.4s ease-in-out;
}

#nav-toggle:active {
    transform: translateX(-50%) scale(0.9);
    transition: transform 0.4s ease-in-out;
}

#nav-toggle i {
    color: var(--main-color);
    font-size: 2rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    transition: transform,opacity 0.4s ease-in-out;
}

/* 
 * When the navbar is active:
 * Move content container up by half the screen's height
 */
body[data-nav="true"] .main {
    transform: translateY(-50dvh);
    z-index: 0;
}

.main {
    transition: transform 0.4s ease-in-out;
}

/* Navbar */
nav {
    position: fixed;
    background-color: var(--accent-color);
    height: 50dvh;
    width: 100dvw;
    left: 0;
    bottom: -50dvh;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

/* Nav toggle button's icons and animations */
body:not([data-nav="true"]) #nav-toggle:hover .nav-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: transform,opacity 0.4s ease-in-out;
}

body[data-nav="true"] #nav-toggle .nav-close {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: transform,opacity 0.4s ease-in-out;
}

body[data-nav="true"] #nav-toggle.home {
    transform: translate(-50%, -50dvh);
}

/* Grid which holds all nav links */
nav #nav-links {
    padding: 0 clamp(2rem, 2dvw, 3rem);
    width: 100dvw;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
}

#nav-links {
    display: grid;
    padding: clamp(2rem, 2dvh, 3rem) clamp(2rem, 2dvw, 3rem);
    width: 35dvw;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 1fr);
    gap: clamp(1rem, 1dvw, 2rem);
    transform: scale(0.5);
    justify-items: center;
    transition: transform 0.4s ease-in-out;
}

/* Individual nav link */
#nav-links .nav-link {
    display: grid;
    grid-template-rows: 2rem 1fr;
    transition: all 0.3s ease-in-out;
    gap: clamp(0.25rem, 0.25dvw, 0.5rem);
    width: 100%;
    max-height: 17.5dvh;
}

/* Individual nav link */
nav #nav-links .nav-link {
    height: 40dvh;
    max-height: 40dvh;
}

#nav-links .nav-link .nav-link-image {
    width: 100%;
    /* height: 100%; */
    max-height: 35dvh;
    border-radius: 1rem;
    object-fit: cover;
    object-position: 10%;
}

/* Increase size of hovered link, decrease the size, opacity, and saturation of the rest */
#nav-links:hover .nav-link:not(:hover){
    transform: scale(0.99);
    filter: grayscale(100%);
    opacity: 0.15;
}

#nav-links:hover .nav-link:hover {
    transform: scale(1.05);
}

/* nav text and image */
#nav-links .nav-link .nav-link-label {
    color: var(--body-text-color);
    font-size: 1.5rem;
    margin: 0;
}

#nav-links .nav-link .nav-link-image {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    object-fit: cover;
    object-position: center;
}

/* Animation for when nav links are first revealed */
body[data-nav="true"] nav {
    bottom: 0;
}

body[data-nav="true"] nav #nav-links {
    transform: translateY(0%) scale(1);
}

/* Make sure to pause animations in content when navbar is open */
body[data-nav="true"] #permas,  body[data-nav="true"] .scroll_grid_container {
    animation-play-state: paused;
}

@media screen and (max-width: 1120px) {

    nav #nav-links {
        display: grid;
        padding: clamp(1rem, 1dvh, 2rem) clamp(1rem, 1dvw, 2rem);
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-template-rows: repeat(auto-fit, 1fr);
    }

    /* Individual nav link */
    nav #nav-links .nav-link {
        max-height: 25dvh;
        height: min-content;

    }

    #nav-links .nav-link .nav-link-image {
        width: 100%;
        /* height: 100%; */
        max-height: 15dvh;
        border-radius: 1rem;
        object-fit: cover;
        object-position: 10%;
    }
  
}