:root {
    --header-height: 0px;
}

.nav-header-bg {
    background-color: var(--bg-dark-1);
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.nav-header {
    backdrop-filter: blur(25px);
    background-color: var(--bg-dark-acrylic-1);
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(100, auto);
}

.nav-header-link {
    border-top: 4px solid transparent;
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    height: 100%;
}

    .nav-header-link.active, .nav-header-link:focus {
        background-color: var(--bg-light-acrylic-2);
        border-top: 4px solid var(--fg-accent);
    }

    .nav-header-link:hover {
        background-color: var(--bg-light-acrylic-2);
    }

.nav-header-item {
    color: var(--fg-acrylic-2);
}

.nav-header-icon {
    width: 15px;
    text-align: left;
    color: var(--fg-acrylic-2);
}

.nav-header-toggler {
    border-top: 4px solid transparent;
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    height: 100%;
    color: #fff;
    cursor: pointer;
}

    .nav-header-toggler.active, .nav-header-link:focus {
        background-color: var(--bg-light-acrylic-2);
    }

    .nav-header-toggler:hover {
        background-color: var(--bg-light-acrylic-2);
        color: var(--fg-accent);
    }