header{--header-height:5rem;display:flex;align-items:center;gap:1rem;height:var(--header-height);max-height:var(--header-height);width:100%;&>#main-logo { height: 3rem; } &>#site-header { min-width: fit-content; font-size: 200%; } &>nav { padding: 0.5rem; width: 100%; & #search { position: absolute; left: 10%; top: 2rem; width: 80%; max-width: 80%; --pagefind-ui-text: var(--opposite-font-color) !important; & .pagefind-ui__drawer { background-color: var(--second-background-color); color: var(--font-color); padding: 0.5rem; max-height: 80vh; overflow-y: scroll; & a { color: LinkText !important; } &>.pagefind-ui__results-area { margin-top: 0; & .pagefind-ui__result-thumb { display: none; } } } } & #breadcrumbs { padding: 0; margin: 0; list-style: none; display: grid; grid-auto-flow: column; align-items: center; justify-content: start; --breadcrumb-gap: 0.5rem; gap: var(--breadcrumb-gap); & li { &:nth-of-type(n+2) { &::before { content: "\00BB"; font-size: 1.5rem; margin-right: var(--breadcrumb-gap); } } &>a { border: 1px solid currentColor; border-radius: 0.5rem; padding: 1rem; transition-duration: var(--default-transition-duration); &:hover, &:active, &:focus { text-decoration: none; border-radius: 0.25rem; background-color: var(--opposite-font-color); color: var(--font-color); } } } } }}@media screen and (max-width:80ch){header{flex-direction:column;height:initial;max-height:initial;&>nav { #search { position: initial; } }}}