.topnav {

    position: fixed;

    width: 100%;

    background-color: #333;

    box-shadow: 0 0 10px rgb(149 149 149 / 95%);

}



    .topnav a {

        display: none;

        float: left;

        color: #f2f2f2;

        text-align: center;

        padding: 14px 16px;

        text-decoration: none;

        font-size: 17px;

        margin: 0

    }



        .topnav a:hover {

            background-color: #ddd;

            color: black;

        }



        .topnav a.active {

            background-color: #9ec75b;

            color: white;

        }



        .topnav a.icon {

            float: right;

            display: block;

            width: 23px;

            padding: 15px

        }



            .topnav a.icon .line {

                display: block;

                background-color: #fff;

                height: 3px;

                margin: 2px;

            }



    .topnav.responsive .icon {

        position: absolute;

        right: 0;

        top: 0;

    }



    .topnav.responsive a {

        float: none;

        display: block;

        text-align: left;

    }



@media only screen and (min-width: 768px) {

    .topnav a.icon {

        display: none;

    }



    .topnav a {

        display: block;

    }

}