nav{
    
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 2;
    z-index: 15;
}

nav ul{
    display: flex;
    justify-content: center;
    /* align-items: center; */
    list-style: none;
}

nav li{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 2px;
    height: 40px;
}

nav a{
    background-color: var(--link-bg);
    height: 80%;
    padding: 0 20px;
    text-decoration: none;
    font-size: 12pt;
    color: rgb(255, 255, 255);
    border: 2px solid var(--link-bg);
    display: flex;
    align-items: center;
    transition: 0.3s;
}

nav a:hover{
    background-color: rgb(255, 255, 255);
    color: var(--link-bg);
    border-radius: 20px;
}

.highlighted{
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    border-radius: 20px;
}

#nav-container{
    background-color: white;
    box-shadow: 0px 1px 8px var(--box-shadow-1);
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0px;
    transition: 0.5s;
    z-index: 15;
}

#nav-box{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 20px;
}

.sticky{
    position: sticky;
    top: 0;
}

#close-icon{
    display: none;
}

#scroll-to-top{
    width: 62px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    cursor: pointer;
    transition: 0.3s;
    margin-left: auto;
    position: fixed;
    top: -40px;
    right: 10px;
}

#scroll-to-top svg{
    background-color: var(--link-bg);
    border: 2px solid var(--link-bg);
    width: 100%;
    height: 28px;
    transition: 0.3s;
    fill: white;
}

#scroll2{
    display: none;
}








@media(max-width: 840px){

    nav{
        width: 100%;
        height: 100%;
        grid-column: 1;
        justify-content: flex-start;
    }

    nav ul{
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        vertical-align: middle;
        list-style: none;
        row-gap: 20px;
    }
    
    nav li{
        max-width: 200px;
        display: block;
        grid-column: 1;
    }

    nav a{
        height: 100%;
        width: 100%;
    }

    nav ul svg{
        grid-column: 2;
        grid-row: 1;
    }

    #nav-container{
        background-color: rgb(255, 255, 255);
        mask: linear-gradient(to top, transparent, black 35%);
        justify-content: flex-start;
        align-items: start;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 50;
    }

    #nav-box{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: start;
        padding: 20px;
        column-gap: 40px;
    }

    #close-icon{
        fill: rgb(0, 0, 0);
        display: block;
        cursor: pointer;
        transition: 0.3s;
    }

    #scroll-to-top{
        position: fixed;
        z-index: 50;
        top: unset;
        bottom: -40px;
    }

    #scroll-to-top svg{
        background-color: rgb(255, 255, 255);
        border-radius: 20px;
        fill: black;
    }
}



/* Min width */

@media(min-width: 840px){
    #scroll-to-top svg:hover{
        background-color: rgb(255, 255, 255);
        border-radius: 20px;
        fill: black;
    }
}