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

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

.topBar #logo{
    height: 11vh;
    z-index: 11;
}

@media (min-width: 650px) {
    .topBar{
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 12vh;
        background: white;
        z-index: 11;
        transition: top;
        transition-timing-function: ease-in-out;
        transition-duration: 1.2s;
    }
    #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;
        transition: top;
        transition-timing-function: ease-in-out;
        transition-duration: 1.2s;
        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;
    }
}    

.topBar.isShown{
    top: 0;
}

.topBar.isHidden{
    top: -12vh;
}