.navbar {
    background-color: #222029;
    color: #dedede;

    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Content: */

#navbar-header {    
    font-family: "Encode Sans Medium";
    font-weight: normal;
    font-size: 1.3rem;

    border-bottom: 2px solid #9172c4;
}

#hamburger {
    background: none;
    border: none;
}

#hamburger.active {
    background-color: #9172c4;
    border-radius: 10px;

    transition: background-color 200ms ease;
}

/* Menu: */

#menu {
    background-color: #2e2833;
    
    font-family: "Encode Sans Light";

    border: 2px outset #7e83c4;
    border-radius: 20px;
    border-top-right-radius: 0px;

    opacity: 0;
    visibility: hidden;
}

#menu.active {
    opacity: 1;
    visibility: visible;

    transition: opacity 150ms ease;
}

#menu > a {    
    text-decoration: none;
    color: #ffffff;
    
    border-radius: 15px;
    border-top-right-radius: 0px;

    transition: background-color 175ms ease;
}

@media (pointer: fine) {
    #menu > a:hover {
        background-color: #7f6fc4;

        transition: background-color 175ms ease;
    }
}

#menu > a:active {
    background-color: #7e5897;
}

/* Responsive design: */

@media (min-width: 1000px) {
    .navbar {
        background-color: #1e1e27f5;
    }

    #navbar-header, .dark #navbar-header {
        border-bottom: none;
    }

    .navbar > hr {
        height: 1px;
    
        background-color: #7e83c4;
        border: none;
    }

    #menu {
        background-color: #2e2833;
        border-style: solid;;
        border-width: 1px;

        opacity: 1;
        visibility: visible;
    }
}

/* ---------- Dark theme: ---------- */

.dark .navbar {
    background-color: #181818;
    border-bottom: 1px solid #4f4f4f;

    box-shadow: 0 0 50px #000000;
}

/* Content: */

.dark #navbar-header {
    border-bottom: 1px solid #ab4468;
}

.dark #hamburger.active {
    background-color: #ab4468;
}

/* Menu: */

.dark #menu {
    background-color: #242424;
    border: 1px solid #5f5f5f;

    box-shadow: 0 0 50px #181818;
}

.dark #menu > a {
    color: #dfdfdf;
}

@media (pointer: fine) {
    .dark #menu > a:hover {
        background-color: #353535;
    }
}

.dark #menu > a:active {
    background-color: #ab4468;
}

/* Responsive design: */

@media (min-width: 1000px) {
    .dark .navbar {
        background-color: #232323;
        border-color: #505050;
    }

    .dark #navbar-header {
        border-bottom: none;
    }

    .dark #menu {
        border-color: #c54b76;
    }

    .dark .navbar > hr {
        background-color: #c54b76;
    }

    .dark #menu {
        background-color: #212121;
        box-shadow: none;
    }
}