#topbar {
    display: grid;
}

#top-logo {
    height: fit-content;
    align-self: center;
    width: 100%;
}

#top-logo img{
    max-width: 100%;
    max-height: calc(var(--space) * 4);
}

.searchButton {
    position: absolute;
    right: var(--space);
    top: 50%;
    transform: translate(0, -50%);
    border: none;
    background: none;
    border-left: 1px solid black;
    cursor: pointer;
    padding: var(--space);
    box-sizing: border-box;
}

#nav-search {
    height: 100%;
    justify-self: center;
}

#nav-search-bar {
    border-radius: calc(var(--space) / 2);
    background-image: linear-gradient(10deg, var(--blue-1), var(--blue-1) 40%, var(--gold-1));
    // background-color: var(--blue-2);
    background-color: var(--white);
    border: 1px solid var(--black);
    border-bottom: 3px solid var(--black);
    font-size: calc(var(--space) *2);
    padding: var(--space);
    height: 100%;
}

#nav-search-bar:focus {
    outline: 3px solid var(--blue-7);
    box-shadow: inset 0 0 3px 3px var(--blue-3);
    background-color: var(--white);
    border-bottom: 3px inset var(--blue-7);
}

#nav-search form {
    height: 100%;
}

#user-menu-button, #page-menu-button {
    border-bottom: 3px solid var(--gold-6);
    border-width: 0 0 3px 0;
}

#user-menu-button, #user-menu-list, #page-menu-button, #page-menu-list {
    width: fit-content;
    font-size: 1em;
    overflow: clip;
    text-overflow: ellipsis;
    padding: var(--space);
    background-color: var(--gold-2);
    // border-radius: calc(var(--space) / 2 );
    // box-shadow: inset 0 0 3px 3px var(--gold-1);
    color: var(--gold-7);
}

#user-menu {
    position: relative;
}

#user-menu-button {
    height: 100%;
}

#page-menu-list, #user-menu-list {
    position: absolute;
    margin-top: calc(var(--space) / 2);
    display: none;
    z-index: 1;
    border-top: 3px solid var(--gold-6);
    border-width: 3px 0 0 0;
}

#page-actions, #page-views, #user-links {
    display: flex; 
    flex-direction: column;
    width: max-content;
    gap: var(--space);
}

#user-menu:focus-within #user-menu-button, #page-menu:focus-within #page-menu-button {
    background-color: var(--gold-3);
    box-shadow: inset 0 0 3px 3px var(--gold-4);
}

#user-menu:focus-within #user-menu-list, #page-menu:focus-within #page-menu-list {
    display: flex;
}

.page-link-list > .mw-list-item a {
    color: var(--blue-7);
}