#navbar-header {
    background-color: #1e88e5;
    display: grid;
    grid-template-columns: 2fr 1fr;
}

#navbar-header > h1 {
    text-align: left;
    padding: 1rem;
    padding-left: 2rem;
    color: #eceff1;
    font-size: 1.5rem;
    margin: 0;
}

#navbar-header > img {
    padding: 0.25rem;
    justify-self: right;
}

#navbar {
    z-index: 9999;
    margin: 0;
    padding: 0;
    position: sticky;
    background-color: #1e88e5;
    width: 100%;
    top: 0;
}

#navbar ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

#navbar li {
    display: inline;
    flex-grow: 1;
}

#navbar li > a {
    display: none;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    color: #eceff1;
    font-size: 1.1rem;
    font-weight: 400;
}

#navbar li > a:hover:not(.active) {
    background-color: #42A5F5;
}

#navbar li > a.active {
    background-color: #00838f;
}

#navbar .droplink {
    background-color: #00acc1;
}

#navbar .droplink:hover:not(.active) {
    background-color: #26c6da;
}

#navbar .navbar-toggle {
    display: block;
}

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

    #navbar li > a {
        display: block;
    }

    #navbar .droplink {
        background-color: #1e88e5;
    }

    #navbar .droplink:hover:not(.active) {
        background-color: #42A5F5;
    }

    #navbar li > a.active {
        background-color: #1565c0;
    }

    #navbar .navbar-toggle {
        display: none;
    }
}

@media (min-width: 1366px) {
    #navbar {
        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    }

    #navbar ul > li:nth-child(1) {
        display: none;
    }
}