disclaimer-band {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    
    font-family: "Montserrat";
    font-weight: 500;
    font-size: 1rem;
    
    letter-spacing: calc(1rem * var(--letter-spacing));
    
    text-align: center;
    
    display: block;
    width: 100%;
}

header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    
    position: fixed;
    
    top: 0;
    left: 0;
    
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(240, 240, 240);
    
    width: 100%;
    height: var(--header-size, 0px);
    padding: 0 var(--dynamic-padding, 0px);
    
    z-index: 4096;
}

header > a.brand {
    position: relative;
    
    flex-shrink: 0;
    flex-grow: 0;
    
    width: 64px;
    height: 64px;
    
    transition: transform var(--transition);
}

header > a.brand:hover {
    transform: rotate(5deg) scale(1.05);
}

header > a.brand > img,
header > a.brand > svg {
    position: absolute;
    
    top: 0;
    left: 0;
}

header > a.brand > img {
    z-index: 2;
}

header > a.brand > svg {
    top: -17%;
    left: -17.5%;
    
    z-index: 1;
}

header > a.brand > svg {
    opacity: 0;
    filter: drop-shadow(0 0 16px rgba(var(--accent, 0, 0, 0), 0.75));
    transition: opacity var(--transition);
}

header > a.brand:hover > svg {
    opacity: 1;
}

header > .links {
    align-items: center;
    gap: 8px;
}

header > .links > .link {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
    border-radius: 1rem;
    
    font-weight: 500;
    font-size: 0.85rem;
    
    position: relative;
    text-align: center;
    
    line-height: 52px;
    letter-spacing: calc(0.85rem * var(--letter-spacing));
    
    min-width: 52px;
    height: 52px;
    
    transition: border-radius var(--transition);
}

header > .links > .link::before {
    content: "";
    position: absolute;
    
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
}

header > .links > .link:not(:has(img)) {
    padding: 0 32px;
}

header > .links > .link:hover {
    border-radius: 26px;
}

header > .links > .link > img {
    position: absolute;
    
    filter: invert(1);
    
    top: 50%;
    left: 50%;
    
    transform: translate(-50%, -50%) scale(0.75);
    z-index: 2;
}

header > .links > .link:has(img)::after {
    content: attr(data-hint);
    
    color: rgb(0, 0, 0);
    background-color: rgb(0, 0, 0);
    border-radius: 1rem;
    
    font-weight: 500;
    font-size: 0.65rem;
    
    white-space: nowrap;
    line-height: 0.65rem;
    letter-spacing: calc(0.65rem * var(--letter-spacing));

    pointer-events: none;
    
    position: absolute;
    
    bottom: 0;
    left: 50%;
    
    width: calc(100% - 1px);
    padding: 8px 0;
    
    transform: translate(-50%, 0);
    transition: color var(--transition), transform var(--transition);
}

header > .links > .link:hover:has(img)::after {
    color: rgb(255, 255, 255);
    transform: translate(-50%, calc(5px + 8px * 2 + 12px));
}

#desktop-navigation {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    
    height: 96px;
    z-index: 4096;
}

#desktop-navigation > .link {
    opacity: 1;
    color: rgb(0, 0, 0);
    
    font-weight: 500;
    font-size: 0.85rem;
    
    line-height: calc(0.85rem * 1.25);
    letter-spacing: calc(0.85rem * var(--letter-spacing) / 2);
    
    padding: 24px;
    
    transition: opacity var(--transition);
}

#desktop-navigation > .link:hover {
    opacity: 0.25;
}

#desktop-navigation > .link::after {
    content: "";
    display: inline-block;
    
    background-image: url(/icons/redirect.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    width: 16px;
    height: 16px;
    
    filter: brightness(0);
    transform: translateY(0.15rem) translateX(0.25rem);
}

#mobile-navigation {
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    
    background-color: rgb(255, 255, 255);
    border-top: 1px solid rgb(240, 240, 240);
    
    position: fixed;
    
    bottom: 0;
    left: 0;
    
    width: 100%;
    height: var(--header-size, 0px);
    
    z-index: 4096;
}

#mobile-navigation > .link {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    
    color: rgb(0, 0, 0);
    
    font-weight: 500;
    font-size: 16px;
    
    line-height: 16px;
    letter-spacing: calc(16px * var(--letter-spacing));
    
    flex-shrink: 1;
    flex-grow: 1;
    
    width: 100%;
    height: 100%;
    
    gap: 4px;
}

#mobile-navigation > .link > img {
    width: 42px;
    height: 42px;
}

@media (max-width: 840px) {
    #desktop-navigation {
        display: none;
    }
    
    #mobile-navigation {
        display: flex;
    }
}