.banner-container {
    height: 80px;
    width: 100%;

    background-color: rgb(250, 190, 5);
    background-image: linear-gradient(to top, rgb(255, 210, 70), transparent);
    box-shadow: 0px 0px 10px 5px rgb(0, 0, 0, 0.35);

    display: grid;
    grid-template-columns: 50% 50%;
}

.logo-container {
    margin-top: 5px;
    margin-left: 75px;
    margin-right: 75px;
    display: flex;
    justify-content: center;
}

.logo {
    /*width: 100%;*/
    height: 100%;
    aspect-ratio: 699 / 220;

    background-image: url(/Images/logo.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(200%) translateY(25%);

    z-index: 1000;
}

.navigation-container {
    display: flex;
    justify-content: end;
    align-items: center;

    gap: 15px;

    margin-right: 75px;
}

.nav-link{
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
}

.nav-button {
    z-index: 9999;
    height: 55%;
    min-width: 75px;

    border: none;
    border-radius: 12.5px;
    background-color: rgb(0, 0, 0, 0);
    box-shadow: 0px 5px 5px -3px black;
    transition: color 0.35s, background-color 0.35s;

    font-family: 'Rubik', Arial;
    font-weight: bold;
    font-style: italic;
    font-size: xx-large;

    padding: 10px;

    text-align: center;
    line-height: 55%;

    cursor: pointer;
}

.nav-button:hover {
    color: rgb(250, 190, 5);
    background-color: black;
}

.nav-button:active{
    color: whitesmoke;
    transition: color 0s;
}

/*SMARTPHONES*/
@media (max-width: 960px) and (orientation: portrait) {}