/* Import stylesheet GeneralStyle.css before this in HTML */


.navbar-container {
    margin-bottom: 80px;
}

/* Add a dark background color to the top navigation */
.navbar {
    background: var(--primcolor);
    overflow: hidden;
    border-radius: 15px;
    border: 5px solid var(--bordercolor);
    margin-bottom: 25px;
    justify-content: center;
    display: flex;
    position: fixed;
    left: 12px;
    right: 12px;
    z-index: 99;
    opacity: 100%;
}

/* Style the links inside the navigation bar */
.navbar a {
    color: var(--textcolor);
    text-align: center;
    padding: 14px 30px;
    text-decoration: none;
    font-size: 26px;
    display: flex;
}

.navbar a.menu-icon {
    display: none;
}

/* Change the color of links on hover */
.navbar a:hover {
    color: var(--texthovercolor);
}

@media (max-width:999px) {

    @keyframes expandNavbar {
        0% {
            padding-bottom: 0px;
        }

        100% {
            padding-bottom: 176px;
        }
    }

    @keyframes collapseNavbar {
        0% {
            padding-bottom: 176px;
        }

        100% {
            padding-bottom: 0px;
        }
    }

    @keyframes expandMenuItems {
        0% {
            opacity: 0%;
            font-size: 0px;
            padding: 0;
        }

        1% {
            font-size: 26px;
            padding: 14px 30px;
        }

        100% {
            opacity: 100%;
            font-size: 26px;
            padding: 14px 30px;
        }
    }

    @keyframes collapseMenuItems {
        0% {
            opacity: 100%;
            font-size: 26px;
            padding: 14px 30px;
        }

        1% {
            font-size: 0px;
            padding: 0;
        }

        100% {
            opacity: 0%;
            font-size: 0px;
            padding: 0;
        }
    }

    .navbar {
        justify-content: flex-start;
        display: block;
        
    }

    .navbar a:not(:first-child):not(:last-child) {
        display: none;
        
    }

    .navbar a.menu-icon {
        display: block;
        position: absolute;
        text-decoration: none;
        top: -2px;
        right: 5px;
        font-size: 30px;
    }

    .navbar.expand {
        animation-name: expandNavbar;
        animation-duration: 0.15s;
        animation-direction: normal;        
    }

    .navbar.expand a:not(:first-child):not(:last-child) {
        animation-name: expandMenuItems;
        animation-duration: 0.05s;
        animation-delay: 0.16s;
        animation-direction: normal;
        animation-fill-mode: backwards;
        display: flex;        
    }

    .navbar.collapse {
        animation-name: collapseNavbar;
        animation-duration: 0.15s;
        animation-delay: 0.06;
        animation-direction: normal;
        animation-direction: backwards;        
    }

    .navbar.collapse a:not(:first-child):not(:last-child) {
        animation-name: collapseMenuItems;
        animation-duration: 0.05s;
        animation-direction: normal;
        animation-fill-mode: backwards;
        display: none;
    }

}