body {
    margin: 0;
    background: linear-gradient(rgba(20, 20, 20, 0.65), rgba(20, 20, 20, 0.65)), url('../img/background.jpg');
    background-attachment: fixed;
    filter: .2;
    color: white;
    font-family: Arial;
}

.topnav {
    overflow: hidden;
    background-color: #081f36;
    transition-delay: .5;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-weight: bold;
}

.topnav a:hover {
    color: #DCDCDC;
}

.topnav a:hover>#hamburger-menu {
    background: linear-gradient(to bottom,
            #DCDCDC, #DCDCDC 20%,
            #333 20%, #333 40%,
            #DCDCDC 40%, #DCDCDC 60%,
            #333 60%, #333 80%,
            #DCDCDC 80%, #DCDCDC 100%);
}



.topnav a.active {
    background-color: #04AA6D;
    color: white;
}

.topnav .icon {
    display: none;
    background-image: url("../img/icon.png");
}

.topnav {
    transition: 1s;
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

#hamburger-menu {
    width: 18px;
    height: 18px;
    border: none;
    padding: 0px;
    margin: 0px;
    background: linear-gradient(to bottom,
            white, white 20%,
            #333 20%, #333 40%,
            white 40%, white 60%,
            #333 60%, #333 80%,
            white 80%, white 100%);
}