/* Style the navigation menu */
.topnav {
    overflow: hidden;
    background-color: var(--main-color);
    position: relative;
}

    /* Hide the links inside the navigation menu (except for logo/home) */
    .topnav #myLinks {
        display: none;        
    }

    /* Style navigation menu links */
    .topnav a {
        color: white;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        display: block;        
    }

        /* Style the hamburger menu */
        .topnav a.icon {
            background: var(--main-color);
            display: block;
            position: absolute;
            right: 0;
            top: 0;
        }

        /* Add a grey background color on mouse-over */
        .topnav a:hover {
            background-color: #ddd;
            color: black;
            transition: all 0.4s;
        }

/* Style the active link (or home/logo) */
.active {
    background-color: var(--main-color);
    color: white;
    transition: all 0.4s;
}