#navComponent {
    position: sticky;
    position: -webkit-sticky;
    bottom: 40px;
}

nav {
    display: flex;
    align-items: center;
    position: sticky;
    position: -webkit-sticky;
    z-index: 1;
    
    width: fit-content;
    padding: 6px;
    gap: 4px;
    bottom: 40px;

    border-radius: 30px;
    border: 1px solid rgba(203, 203, 203, 0.52);    
    -webkit-backdrop-filter: saturate(180%) blur(15px);
    backdrop-filter: saturate(180%) blur(15px);
    background: rgba(238, 238, 238, 0.7);
    
}

/* .nav-animation {
    animation-name: moveUp;
    animation-duration: .4s;
    animation-timing-function: ease;
    animation-delay: .8s;
    animation-fill-mode: both;
    bottom: -62px
} */

@keyframes moveUp {
    from {bottom: -62px}
    to {bottom: 40px}
}

.navlink {
    -webkit-transition: background-color .25s ease, outline-color .25s ease;  
    -moz-transition: background-color .25s ease, outline-color .25s ease;  
    -o-transition: background-color .25s ease, outline-color .25s ease;  
    -ms-transition: background-color .25s ease, outline-color .25s ease;  
    transition: background-color .25s ease, outline-color .25s ease;
    padding: 14px 18px 15px 18px;
    border-radius: 90px;
    /* outline: 1px solid #ffffff00; */
}

.navlink:hover {
    background: rgba(255, 255, 255, 0.30);
    /* outline: 1px solid white; */
}

.current {
    background: var(--yellowFade);
    /* outline: .8px solid var(--whiteOpacity); */
}

.current:hover {
    background: var(--yellowFade);
    /* outline: .8px solid var(--whiteOpacity); */
}

.navSeparator {
    height: 28px;
    margin: 0px 2px 0px 2px;
}

#projects-tab {
    display: none;
}



@media only screen and (max-width: 500px) {
    #projects-tab {
        display: block;
    }

    #all-tab, #design-tab, #dev-tab{
        display: none;
    }

    nav {
        bottom: 15px;
    }

    #navComponent {
        bottom: 15px;
    }
}