/* HEADER */
a.logo {
    padding: calc(2 * var(--padding));
    padding-bottom: calc(1 * var(--padding));
    margin: 0 auto;
    width: 100%;
    display: block;
    opacity: 1
}
.headertop > .wrapper.flex {
    flex-flow: row nowrap
}
a.logo img {
    display: block;
    opacity: 1;
    padding: 0;
    width: calc(100% - 2 * var(--padding));
    max-width: 600px;
    margin: 0 auto;
    height: calc(.3 * var(--logoheight));
    object-fit: contain;
    object-position: center;
    display: block
}
.header {
    position: relative;
}
.header > .headerinner {
    z-index: 1;
    height: 30vh;
    min-height: 20rem;
    display: flex;
    flex-flow: row wrap;
    position: relative;
    overflow: clip;
}
.header#home > .headerinner {
    height: 100vh;
    min-height: 900px
}
.header > .headerinner > .headertop > div:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: var(--paddingbase);    
    --background-color: hsl(from var(--color3) h calc(s * var(--saturation)) calc(l * var(--bglightness)) / .8);
    background-color: var(--background-color);
    backdrop-filter: blur(10px)
}
.headerbuttons {
    position: fixed;
    text-align: center;
    display: flex;
    flex-flow: column;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: max-content;
    z-index: 2;
    padding: calc(var(--padding) * .125)
}
.headerbuttons.hbfpos_top {
    margin-top: 0;
}
.headerbuttons.hbfpos_bottom {
    margin-bottom: 0;
}
.headerbuttons > * {
    font-size: 1em;
    padding: .25rem;
    cursor: pointer;
}