#navbar-top {
    position: relative;

    padding: 10px 25px 10px 25px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: var(--color-blue-background);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

    z-index: 1000;
}

.navbar-item-container {
    gap: 20px;

    flex-wrap: wrap;
}

.navbar-item-name {
    vertical-align: baseline;
}

.navbar-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.navbar-item.active {
    border-radius: 5px;
    outline: var(--color-blue-light) solid 1px;
    outline-offset: 3px;
}

.navbar-button {
    display: inline-flex;
    white-space: nowrap;

    background-color: var(--color-blue-dark);
    box-shadow: 1px 1px 0 0 var(--color-blue-light);
}

.navbar-button:hover,
.navbar-button:active,
.navbar-button:focus {
    box-shadow: none;
    outline: 1px solid var(--color-lila-light);
}

#navbar-button-container {
    justify-content: center;
    align-content: space-between;

    gap: 10px;
}