/* --- Desktop Navigation --- */
#logo-desktop {
    width:80px;
    height:auto;
    margin:5px 10px 0px 20px;
}
.desktop-nav {
    background:var(--menu-background);
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:50px;
    z-index:1;
    display:flex;
    align-items:center;
}
.desktop-nav > ul {
    list-style:none;
}
.desktop-nav > ul > li {
    display:inline;
    padding:0px 2.5rem;
    font-size:1.1rem;
}
.desktop-nav > ul > li > a {
    text-decoration:none;
    color:#fff;
}
.section-links {
    margin-right:auto;
}
.site-links{
    padding-right:3rem;
    justify-self: flex-end;
}
.git-icon {
    width: 38px;
    height:auto;
    margin-top:5px;
}
.linked-icon{
    width:38px;
    height:auto;
    margin-top:5px;
}

/* Animating the nav bar to show and hide on scroll */

@keyframes hide-nav {
    0% {
        top:0;
    }
    25% {
        top:-12.5px;
    }
    50% {
        top:-25px;
    }
    75% {
        top:-37.5px;
    }
    100% {
        top:-50px;
    }
}

@keyframes hide-mobile-nav {
    0% {
        top:0px;
    }
    25% {
        top:-20px;
    }
    50% {
        top:-40px;
    }
    75% {
        top:-60px;
    }
    100% {
        top:-80px;
    }
}

.desktop-nav.is-hidden {
    animation: hide-nav 0.5s forwards;
}
.mobile-nav.is-hidden {
    animation: hide-mobile-nav 0.5s forwards;
}

@keyframes show-nav {
    0% {
        top:-50px;
    }
    25% {
        top:-37.5px;
    }
    50% {
        top:-25px;
    }
    75% {
        top:-12.5;
    }
    100% {
        top:0px;
    }
}
@keyframes show-mobile-nav {
    0% {
        top:-80px;
    }
    25% {
        top:-60px;
    }
    50% {
        top:-40px;
    }
    75% {
        top:-20px;
    }
    100% {
        top:0px;
    }
}

.desktop-nav.is-visible {
    animation: show-nav 0.5s forwards;
}
.mobile-nav.is-visible {
    animation: show-mobile-nav 0.5s forwards;
}

/* Hide desktop nav on mobile */
@media only screen and (max-width: 1023px) {
    .desktop-nav {
        display:none;
    }
}