.navbar{
    display:flex;
    position:fixed;
    top:0;
    left:0;
    flex-direction:row;
    align-items: center;
    justify-content: space-between;
    font-size:20px;
    padding-top:1%;
    padding-bottom:1%;
    padding-left:2%;
    padding-right: 2%;
    background:var(--bg-primary);
    z-index:3;
    width:96%;
}
.navbar a{
    color:var(--color-on-bg);
    text-decoration: none;
}
/*.titleNav{
    font-family: "Newsreader", serif;
    font-size:32px;
}*/

.navLinkCont{
    display:flex;
    align-items:center;
    gap:15px;
}
.navLinkCont a{
    transition: all 300ms ease-in-out;
}
.navLinkCont a:hover{
    color:#85c1e9;
}
.fLinkNavCont{
    display: flex;
    gap:15px;
}
#openMenuBtn{
    background:none;
    border:none;
    font-size:1.8rem;
}
#openMenuBtn, #closeBtnMobile{
    transition:all 300ms ease-in-out;
}
#openMenuBtn:hover, #closeBtnMobile:hover{
    color:#85c1e9;
}
#menuMobile{
    display:none;
    height:100dvh;
    width:100dvw;
    top:0;
    left:0;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    gap:20px;
    background:var(--bg-primary);
    z-index:3;
    position:fixed;
}
#menuMobile a{
    color:white;
    transition:all 300ms ease-in-out;
    text-decoration: none;
    font-size:1.5rem;
}
#menuMobile a:hover{
    color:#85c1e9;
}
.divider{
    border-top:1px solid #85c1e9;
    width:100%;
    height:1px;
}
#closeBtnMobile{
    background:none;
    border:none;
    font-size:20px;
    color:var(--color-on-bg);
    position:fixed;
    right:10px;
    top:10px;
    font-size:1.8rem;
    z-index:3;
}
@media(max-width:768px){
    .mobile{
        display:flex;
    }
    .desktop{
        display:none;
    }
    .navbar{
        padding-top:10px;
        padding-bottom:10px;
    }
}
@media(min-width:768px){
    .mobile{
        display:none;
    }
    .desktop{
        display:flex;
    }
}

.logoNavbar{
    height:3.5rem;
    width:auto;
}