header {
    z-index: 1000;
    position: relative;

    background-color: aliceblue;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 1vh 3vw;

    img {
        display: block;
        width: max(15vw, 15vh);
    }

    .right {
        position: relative;
    }

    #mobile-nav {
        background: none;
        border: none;
    }

    .nav-bar {
        display: none;
    }

    .nav-bar.clicked-nav-bar {
        display: flex;
        flex-direction: column;

        position: absolute;
        top: 4vh;
        right: -3vw;

        width: max-content;

        background: aliceblue;
        border-bottom-left-radius: 1vh;

        a {
            text-align: center;
            padding: 2vh 5vw;
        }
    }

    .selected-header {
        font-weight: bold;
    }

    /* desktop stuff is simpler, so it makes sense to do it seperately */
    @media (min-width: 1200px) {
        #mobile-nav {
            display: none;
        }

        .nav-bar {
            display: flex;
            align-items: center;

            position: static;
            background: none;
            box-shadow: none;

            a {
                padding: 0.8vw 1.3vw;
            }
        }
    }
}