#navigation-and-logo {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: stretch;
    align-content: flex-start;
    padding: 10rem 5rem 5rem;
    gap: .5rem;
    height: 10rem;
}

#brandflag {
    width: 300px;
    height: 40px;

    font-family: var(--font-family-alternative);
    font-size: 2.2rem;
    color: var(--logo-text-colour);

    filter: drop-shadow(2px 2px 2px var(--shadow-colour));
}

#brandflag > svg {
    vertical-align: text-bottom;
}

nav > ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    padding: 0;
    margin: 1rem 0;
}

nav > ul > li {
    display: inline-flex;
}

nav > ul > li > a {
    display: inline-block;
    padding: 5px 10px;
    margin: 4px;

    text-decoration: none;
    background-color: var(--menu-item-button-background-colour);
    backdrop-filter: blur(var(--backdrop-filter-blur-amount));
    color: var(--menu-item-button-colour);
    box-shadow: 2px 2px 6px var(--shadow-colour);

    border: none;
    border-radius: var(--border-radius-normal);

    transition: all 1s ease-out;
}

nav > ul > li > a:hover {
    background-color: var(--menu-item-button-background-colour-hover);
    color: var(--menu-item-button-colour-hover);
}

@media screen and (max-width: 900px) {
    nav > ul > li > a {
        padding: 2px 5px;
        margin: 2px;
    }
}

@media screen and (max-width: 500px) {
    #navigation-and-logo {
        height: 15rem;
    }
}