:root {
    --navlink-padding: 10px;
    --navbar-height: 40px;
    /* Round corner border radius */
    --rndcnr-brd-radius: 5px;
    --anim-time: 250ms;

    --navbg-perc1: 0%;
    --navbg-perc2: 100%;

    --navbar-display: flex;
}

/* Thanks to https://devsheets.io/sheets/screen-sizes */

/* Small phone */
@media only screen and (min-width: 320px) {
    :root {
        --navbar-display: none;
    }
}

/* Large phone */
@media only screen and (min-width: 480px) {
    :root {
        --navbar-display: none;
    }
}

/* Tablet */
@media only screen and (min-width: 768px) {
    :root {
        --navbar-display: flex;
        --navlink-padding: 5px;

        --navbg-perc1: 25%;
        --navbg-perc2: 75%;
    }
}

/* Desktop */
@media only screen and (min-width: 1024px) {
    :root {
        --navbar-display: flex;
        --navlink-padding: 8px;

        --navbg-perc1: 30%;
        --navbg-perc2: 70%;
    }
}

/* Large Desktop */
@media only screen and (min-width: 1200px) {
    :root {
        --navbar-display: flex;
        --navlink-padding: 8px;

        --navbg-perc1: 35%;
        --navbg-perc2: 65%;
    }
}

/* Extra large Desktop */
@media only screen and (min-width: 1440px) {
    :root {
        --navbar-display: flex;
        --navlink-padding: 10px;

        --navbg-perc1: 40%;
        --navbg-perc2: 60%;
    }
}

@media only screen and (min-width: 2160px) {
    :root {
        --navbar-display: flex;
        --navbg-perc1: 45%;
        --navbg-perc2: 55%;
    }
}


.NavBar {
    display: var(--navbar-display);
    align-items: center;

    height: var(--navbar-height);
    padding: 5px 5px 5px 5px;
    border-bottom: 3px var(--sec-bg-color) solid;

    animation: SwipeDown var(--anim-time);
}

.NavBar .Links {
    display: flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;
    flex-grow: 1;

    height: 100%;
}

.NavBar .Links .Entry {
    display: flex;
    align-items: center;

    padding-left: var(--navlink-padding);
    padding-right: var(--navlink-padding);

    height: 100%;
}

.NavBar .Links .Entry:hover {
    background-image: linear-gradient(to right,blue var(--navbg-perc1), rgb(255, 94, 0) var(--navbg-perc2));
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    border-radius: var(--rndcnr-brd-radius);

    /* Use bright text color on top of colored background */
    color: var(--dark-prim-color);
}

.NavBar .IconImage {
    margin-left: auto;

    max-width: 100%;
    max-height: 100%;
}


@keyframes SwipeDown {
    from {
        transform: translateY(-100%);
    }
}
@keyframes SwipeUp {
    to {
        transform: translateY(-100%);
    }
}