nav 
{
    padding: 10px;
}

nav li 
{
    list-style-type: none;
    padding: 0 10px;
    font-size: 1rem;
}

nav a 
{
    text-decoration: none;
}

nav a 
{
    color: var(--secondary-color);
}

nav a:hover 
{
    color: var(--accent-color);
}

nav ul 
{
    display: flex;
    flex-wrap: wrap;
}

nav .section-container 
{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

#navbar-link-container{
    width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.8s ease, opacity 1.8s ease;
}

#navbar-links{
    display: flex;
    flex-direction: column;
    width: 100%;
}

#navbar-links li{
    font-size: 1.5rem;
    padding: 10px 0;
}

#navbar-link-container.expanded{
    max-height: 350px;
    opacity: 1;
}

#navbar-brand{
    font-size: 1.2rem;
}

@media (min-width: 768px) {
    #navbar-links{
        flex-direction: row;
    }

    #navbar-links li{
        margin: 0 10px;
    }
    
    #navbar-link-container{
        max-height: none;
        width: auto;
        opacity: 1;
    }

    .icon,
    #navbar-brand{
        display: none;
    }
}