.header-bg{
    overflow: clip;
    width:100%;
    height: 2000px;
    margin-bottom: -1000px;
    margin-top:-1000px;
    isolation: isolate;
    position: relative;
    z-index:4;
}

.header-bg .header-bg-gradient{
    width: 200%;
    height: 2000px;
    background: radial-gradient(ellipse at 25% 100% , transparent, transparent 25%, black 40%);
}


.header-main{
    display: none;
}

.nav-bg{
    opacity: 1;
    height:var(--header-height);
    width:100%;
    background-image:linear-gradient(to bottom, black, transparent);
    transition-property: opacity;
    transition-duration: 0.5s;
    position:absolute;
    z-index: -1;
}

.nav-bg-darken{
    opacity: 0;
    height: calc(var(--header-height)*1.45);
    width:100%;
    background-image:linear-gradient(to bottom, black 65%, transparent);
    transition-property: opacity;
    transition-duration: 0.5s;
    position:absolute;
    z-index: -1;
    pointer-events: none;
}

.nav-entry-list{
    display:flex;
    align-items:center;
    list-style:none;
    margin:0;
    padding: 0;
    height: var(--header-height);
    z-index: inherit;
}

.nav-entry{
    padding-top: 0px;
    flex: 1 0 auto;
    color:white;
    width:20%;
    border-right-style:solid;
    border-image: linear-gradient(to bottom, white, transparent) 1;
    z-index: inherit;
}

.nav-entry:last-child{
    border-right-style:none;
}

.nav-entry-label{
    display: flex;
    font:inherit;
    color:inherit;
    align-items: center;
    justify-content: center;
    transition: padding-top 0.5s;
    z-index: inherit;
    
} 

.nav-entry-label p{
    margin:0;
    padding-top: 2rem;
    padding-bottom: 2rem;
    transition: padding-top 0.5s, padding-bottom 0.5s;
}


.nav-entry:hover p{
    padding-top:3rem;
    padding-bottom:1rem;
}

.nav-entry:hover .nav-entry-label{
    cursor:pointer;
    text-shadow:white 0 0 10px;

}

.nav-entry-label:active{
    color: var(--highlight-color);
    text-shadow:var(--highlight-color) 0 0 10px;

}


@media (min-width:900px){
    .header-main{
        font-size:2em;
        width:100%;
        height: var(--header-height);
        display:block;
        position: sticky;
        top: 0px;
        margin-bottom: calc(var(--header-height) * -1);
        z-index: var(--header-z-index);
    }
}