/* Add a black background color to the top navigation */
.topnav {
    background-color: var(--global-theme-color);
    overflow: hidden;
    position: fixed;
    z-index: 999;
    width: 100%;
}


.topnav #myLinks {
    display: inline;
}

.topnav a.icon {
    display: none;
}

.topnav img {
    /* margin-bottom: -16.5pt;
    margin-top: -12.5pt; */
    margin-left: 30%;
}

/* Style the links inside the navigation bar */
.topnav a.normal {
    float: right;
    color: #f2f2f2;
    text-align: center;
    padding: 10px 9px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a.normal:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.right {
    margin-right: 30%;
}

/* extras */
#dart-logo {
    height: 45px;
    display: inline-flex;
    align-items: center;
}

#myLinks a {
    border-right: 1px dotted white;
    border-left: 1px dotted white;
  }

.topnav {
    border-bottom: 2px solid var(--global-theme-color);
}

@media print,
screen and (max-width: 1000px) {

    .topnav img {
        margin-left: 3%;
    }

    .topnav a.right {
        margin-right: 3%;
    }

    .topnav a.normal {
        padding: 10px 5px;
    }

}

@media print,
screen and (max-width: 1200px) and (min-width: 1001px) {

    .topnav img {
        margin-left: 6%;
    }

    .topnav a.right {
        margin-right: 6%;
    }

}

@media print,
screen and (max-width: 1400px) and (min-width: 1201px) {

    .topnav img {
        margin-left: 12%;
    }

    .topnav a.right {
        margin-right: 12%;
    }

}


@media print,
screen and (max-width: 1600px) and (min-width: 1401px) {

    .topnav img {
        margin-left: 16%;
    }

    .topnav a.right {
        margin-right: 16%;
    }

}

@media print,
screen and (max-width: 1800px) and (min-width: 1601px) {

    .topnav img {
        margin-left: 19%;
    }

    .topnav a.right {
        margin-right: 19%;
    }

}

@media print,
screen and (max-width: 2000px) and (min-width: 1801px) {

    .topnav img {
        margin-left: 22%;
    }

    .topnav a.right {
        margin-right: 22%;
    }

}


@media print,
screen and (max-width: 480px) {
    .topnav #myLinks {
        display: none;
    }
}

@media print,
screen and (max-width: 960px) {
    .topnav #myLinks {
        display: none;
    }

    .topnav a.normal {
        color: white;
        float: none;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        display: block;
    }

    .topnav a.icon {
        color: white;
        display: block;
        padding: 10px 16px;
        font-size: 17px;
        position: absolute;
        float: right;
        right: 0;
        top: 0;
        margin-right: 5%;
    }

    .topnav a.right {
        color: white;
        float: none;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        display: block;
        margin-right: 0;
    }

    /* extras */
    div.topnav a {
        height: 45px;
        display: inline-flex;
        align-items: center;
    }
}