header{
        position: relative;
        display: inline-block;

        width: 100%;
        height: 100px;

        padding-left: var(--paddingLarge);
        padding-right: var(--paddingLarge);
        background-color: rgb(var(--backgroundFaint));

        vertical-align: middle;
        /*border-bottom: 2px solid rgb(var(--text));*/
}

.logo-block{
        position: absolute;
        left: var(--paddingLarge);
        top: 50%;
        transform: translate(0,-50%);
        /*border-bottom: var(--borderThickness) solid rgb(var(--highlight1));*/
}

.logo-block img{
        height: 90px;
}

.logo-block img.lrg{

}

.logo-block img.sml{
        display: none;
}

header div a, .logo-text label{
        font-size: var(--fontLarge);
        font-family: HightlightFont;
        display: flex;
        align-items: center;
        display: inline-block;
}

nav{
        position: absolute;
        right: var(--paddingLarge);
        top: 50%;
        transform: translate(0,-50%);

}

nav ul li{
        display: inline-block;
        padding: var(--paddingSmall);
}

nav ul li a{
        color: rgb(var(--text));
        font-size: var(--fontSmall);
}

nav ul li a:hover{
        color: rgb(var(--textFaint));
}

.active-tab{
        color: rgb(var(--textFaint));
}

.highlighted-tab{
        background-color: rgb(var(--highlight1));
        padding: var(--paddingSmall) var(--paddingLarge);
        border-radius: var(--borderRadius);
        color: rgb(var(--text));
        position: relative;
        /* border: var(--borderThickness) solid rgb(var(--background)); */
}

.highlighted-tab:hover{
        color: rgb(var(--textFaint));
        background-color: rgb(var(--highlight1Faint));
        transform: scale(var(--scaleIncrease), 2);
}

.highlighted-tab .active-tab{
        background-color: rgb(var(--highlight1Faint));
}

#res-nav-check{
        display: none;
        height: auto;
}

.res-nav-label{
        display: none;
        height: auto;
}

.side-close{
        display: none;
}

@media only screen and (max-width: 949px) {
        .logo-block{
                position: absolute;
                right: var(--paddingLarge);
                left: auto;
                top: 50%;
                transform: translate(0,-50%);        
        }
        



        #res-nav-check:checked ~ nav {
                left: 0vw;
        }

        #res-nav-check:checked ~ .side-close {
                left: 70vw;
        }

        nav{
                background-color: rgb(var(--backgroundFaint));
                height: calc(100vh);
                position: fixed;
                top: 0px;
                left: -70vw;
                width: 70vw;
                z-index: 3;
                display: block;

                right: auto;
                transform: translate(0,0);
        
        }

        .side-close{
                background-color: rgba(var(--highlight2), 0.50);
                height: calc(100vh);
                position: fixed;
                top: 0px;
                left: -30vw;
                width: 30vw;
                z-index: 2;
                display: inline-block;
        }

        nav ul{
                align-content: center;
                display: flex;
                flex-direction: column;
                align-items: center;
        }

        nav ul li{
                display: block;
                align-content: center;
                width: fit-content;
                margin-top: calc(var(--paddingLarge) * 2);
        }

        nav ul li a{
                text-align: center;
        }

        .res-nav-label{
                display: block;
                position: absolute;
                left: var(--paddingLarge);
                top: 50%;
                transform: translate(0,-50%);

                width: var(--fontLarge);
                height: var(--fontLarge);
        }

        .res-nav-label img{
                width: var(--fontLarge);
                height: var(--fontLarge);
        }

        header div a{
                font-size: var(--fontLarge);
        }
        
        header div a, .logo-text label{
        font-size: var(--fontMedium);
}
}

@media only screen and (max-width: 550px) {
            .logo-block img.lrg{
                display:none;
        }
        
        .logo-block img.sml{
                display: block;
        }
    
}