header {
    padding: 1em;
    position: sticky;
    top: 0;
    background: var(--header-background-color);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);    
    z-index: 1000;
    --gap: 1.25em;
}

header .content-wrapper {
    display: flex;
    align-items: center;
    justify-items: center;
    gap: var(--gap);
}

header a.banner {
    display: flex;
    align-items: center;
    justify-items: center;
    text-decoration: none;
    color: inherit;
}

header > .content-wrapper,
section.hero-section > .content-wrapper {
    min-width: 80vw;
}

header img {
    width: 48px;
    height: 48px;
}

header img+span {
    font-size: 1.1em;
}

header nav {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    gap: var(--gap);
}

header nav a {
    text-decoration: none;
    color: inherit;
}

header nav a.active {
    font-weight: bold;
}