@font-face {
    font-family: PlexSans;
    src: url(IBMPlexSans-Light-Latin1.woff);
}

.topBar #homeLink{
    position: absolute;
    left: 1vh;
    top: 1vh;
}

.topBar #logo{
    height: 11vh;
    z-index: 11;
    animation: opcome 1.5s linear;
}
    
@keyframes opcome {
    from {opacity: 0;}
    to {opacity: 1;}
}


@media (min-width: 650px) {
    .topBar{
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 12vh;
        background: white;
        z-index: 11;
    }      

    #navBar {
        position: absolute;
        right: 30px;
        min-width: 500px;
        width: 50%;
        height: 12vh;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        overflow: hidden;
    }
    #navBar a{
        position: relative;
        bottom: 0.5vh;
        text-decoration: none;
        padding: 0px;
        color: rgb(0,35,102);
        font-family: PlexSans;
        font-size: 1.7vh;
        z-index: 10;
    }
    .topBar #sideButton{
        display: none;
    }
    .topBar #sideNavBar{
        display: none;
    }
}

@media (max-width: 649px) {
    .topBar{
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 12vh;
        z-index: 10;
        background: white;
    }
    #sideButton img{
        position: absolute;
        top: 2vh;
        right: 20px;
        height: 8vh;
        cursor: pointer;
    }
    #navBar{
        display: none;
    }
    #sideNavBar{
        position: relative;
        height: 100vh;
        width: 0;
        top: 0vh;
        left: 0;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        background-color: rgba(255,255,255,0.9);
        transition: 0.5s;
    }
    #sideNavBar a{
        text-decoration: none;
        color: rgb(0,35,102);
        font-family: PlexSans;
        font-size: 3vh;
        margin: auto;
    }

}    
    
.langSettings{
    position: fixed;
    right: 55px;
    bottom: 30px;
    z-index: 8;
    font-family: PlexSans;
    font-size: 16px;
    background: rgba(255,255,255,0.7);
    padding: 10px 10px 5px 10px;
    border-radius: 15px;
    animation: opcome 0.5s ease-in 1s both;
}

.langSettings span{
    color: rgb(0,35,102);
}
.langSettings span:hover{
    cursor: pointer;
}

.langSettings p{
    color: rgb(0,35,102);
    display: inline;
}