nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: var(--gks-blue);
    color: var(--text-color);
    height: 100px;
    z-index: 500;
    position: sticky;
    top: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    margin-bottom: 100px;

    > .search {
        position: relative;
        align-self: baseline;
        flex-basis: calc(100% - 800px);

        #search-results-nav {
            position:absolute;
            font-family: Europa, sans-serif;
            top: 100%;
            left: 0;
            background-color: white;
            color: black;
            width: 100%;
            border: 1px solid var(--gks-blue);
            max-height: 70vh;
            overflow-y: scroll;

            >div {
                padding: .5em;
                display: grid;
                grid-template-areas: "t a" "v a";
                grid-template-columns: calc(100% - 130px) 1fr;

                h4 {
                    grid-area: t;
                }
                fieldset {
                    grid-area: a;
                    max-width: fit-content;
                    flex-direction: column;
                    gap: .25em;
                    display: flex;
                    align-items: center;
                }
                div {
                    grid-area: v;
                }
            }
        }
    }

    #logos {
        height: 100%;
        a {
            display: inline-flex;
            gap: 1rem;
            justify-content: space-between;
            height: 100%;

            img {
                height: 100%;
            }

            #logo-gks {
                height: 40%;
                /* center vertically */
                position: relative;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }
    #nav-links {
        display: inline-flex;
        gap: 1rem;
        height: 100%;
        align-items: center;
        justify-content: flex-end;
        a {
            color: var(--text-color);
            text-decoration: none;
            font-size: 1rem;
            font-weight: 500;
            padding: 0.5rem 0;
            transition: background-color 0.3s;
            &:hover {
                --text-color: #d5d5d5;
            }
            &.active {
                border-bottom: 1px solid var(--text-color);
            }
        }
        .dropdown {
            button {
                background-color: var(--gks-blue);
                color: var(--text-color);
                font-size: 1rem;
                font-weight: 500;
                padding: 0.5rem 0;
                border: none;
                cursor: pointer;
                transition: background-color 0.3s;
                &:hover {
                    --text-color: #d5d5d5;
                }
            }
            position: relative;
            &:hover {
                .dropdown-content {
                    display: block;
                }
            }
            .dropdown-content {
                display: none;
                position: absolute;
                right: 0;
                background-color: var(--gks-blue);
                min-width: 160px;
                box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
                z-index: 1;
                a {
                    color: var(--text-color);
                    padding: 12px 16px;
                    text-decoration: none;
                    display: block;
                    &:hover {
                        background-color: var(--gks-blue);
                    }
                    &.active {
                        border: none;
                        background-color: color-mix(in srgb, var(--gks-blue), black 20%);
                    }
                }
            }
        }
        .icon {
            height: 2.5rem;
        }
    }
}