* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Josefin Sans', serif;
    --bootstrap-gutter-x: 0;
    /* outline: 1px solid brown; */
}

.row {
    margin: 0;
    padding: 0;
}

#topbar {
    width: 97vw;
    height: 12vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#toplogo img {
    width: 45vw;
    height: 12vw;
}

#topbuttons {
    width: 30vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn {
    font-size: x-large;
}

.navbar-nav li {
    min-width: 150px;
    font-size: 1.5vw;
    border-right: 1px solid gray;
    text-align: center;
}

    .navbar-nav li:last-child {
        border-right: none;
    }


@media screen and (max-width:768px) {
    #topbar {
        width: 100%;
        height: 20vw;
    }

    #toplogo img {
        width: 50vw;
        height: 20vw;
        padding-left: 1vw;
    }

    .btn {
        font-size: larger;
    }

    .navbar-nav li {
        min-width: 150px;
        font-size: 3vw;
        border: none;
        border-bottom: 1px solid gray;
        text-align: left;
    }
}

@media screen and (max-width:576px) {
    #topbar {
        width: 100vw;
        height: 35vw;
        flex-direction: column;
        justify-content: space-around;
    }

    #toplogo img {
        width: 100vw;
        height: 25vw;
    }

    .btn {
        font-size: large;
        padding-bottom: 2px;
    }

    .navbar-nav li {
        font-size: 5vw;
    }
}

/*#branding a {
    background: linear-gradient(to left,
            violet,
            pink,
            white,
            lightgreen,
            yellow,
            orange,
            red);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 500;
}*/