header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: 110px;

    color: white;
    font-size: 2em;
    text-align: center;

    padding: 10px;

    backdrop-filter: blur(8px);
    transition: background 0.1s linear;
}

header.home {
    background: rgb(0 0 0 / var(--header-opacity, 0));
}

header:not(.home) {
    background: rgb(23, 23, 23);
}

header h1 {
    margin: 0;
    max-width: 500px;
    width: 100%;
    font-size: clamp(1.2rem, 15vw, 3.5rem);
    text-align: center;
    vertical-align: center;
    object-fit: contain;
    object-position: center;
}

header h1 a {
    color: white;
    text-decoration: none;
}

.navbar {
    height: 60px;
    width: 90%;
    display: flex;
    align-items: stretch;
    justify-content: end;
    gap: 20px;
}

.navbar__element {
    border: none;
    background: none;
    cursor: pointer;
    color: white;
    text-decoration: none;
    font-size: clamp(1rem, 14vw, 1.4rem);
    text-align: center;
    vertical-align: center;
    object-fit: contain;
    object-position: center;
    font-weight: none;
}

.menubtn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menubtn__svg {
    width: 30px;
    height: 30px;
}

.bar {
    stroke: white;
    stroke-width: 2;
    stroke-linecap: round;
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: center;
}

.menubtn.open .top {
    transform: translateY(5px) rotate(45deg);
}

.menubtn.open .middle {
    opacity: 0;
}

.menubtn.open .bottom {
    transform: translateY(-2px) rotate(-45deg);
}