* {
    --isPd_0: 7px;
    --navbarHeight: 60px;
}

.isNightly{
    background-color: #0A0A0A;
    color: #FAFAFA;
}

nav.banner{
    box-sizing: border-box;
    position: fixed;
    top: 0;
    padding: var(--isPd_0);
    
    width: 100%;
    height: var(--navbarHeight);
    
    box-shadow: 0px 2px 4px rgba(128, 128, 128, 0.128);
    background-color: inherit;
    z-index: 99;
    transition: inherit;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.home{
    width: 40%;
    height: 98%;
    max-width: 200px;
    display: flex;
    align-items: center;
    font-family: "nunito";
    font-weight: 900;
}
.home img{
    height: 100%;
}

.menu,
.themer{
    width: 40px;
    height: 40px;
    
    border-width: 0;
    border-radius: 10px;
    position: absolute;
    font-size: 1.2rem;
}
.themer{
    right: 75px;
}

.menu::before,
.toLight::before,
.toDark::before{
    position: absolute;
    top: 0;
    left: 0;
    font-size: inherit;
    color: inherit;
    border-width: inherit;
    border-radius: inherit;
    
    width: inherit;
    height: inherit;
    white-space: pre;
    
    display: flex;
    align-items: center;
    justify-content: center;
}
.toDark::before{
    background: linear-gradient(
        #040b2b,
        #034567
        );
        content: '💤';
        width: 42px;
        height: 42px;
        top: -1px;
        left: -1px;
    }
    .toLight::before{
        background: linear-gradient(
            skyblue,
            #c0c0c0
            );
            content: '💡';
}

.menu{
    background-color: #D9CAB3;
    right: 20px;
}
.menu::before{
    content: '📋';
}
.menu.open::before{
    content: '❌';
}

/* /////////////////////////// */