﻿  body {margin:0;font-family:Arial}

        .topnav {
          overflow: hidden;
          background-color:black;  
          
          color:white;
          border-bottom:100%;
          border-bottom-color:white;
          border-bottom-style:solid;
          border-bottom-width:thin;
          
          position: sticky; /* Added to make menu sticky */
          top: 0; /* Anchor to top of viewport */
          z-index:100;
          
        }

        .topnav a {
          float: left;
          display: block;
          color: white;
          text-align: center;
          padding: 10px 16px;
          text-decoration: none;
          font-size: 17px;
        }

        .active {
        
        background-color: #555;
          color: black;
        }

        .topnav .icon {
          display: none;
        }

        .dropdown {
          float: left;
          position: relative; /* Positioning context for dropbtn */
        }

        .dropdown .dropbtn {
          font-size: 17px;    
          border: none;
          outline: none;
          color: white;
          padding: 10px 16px;
          background-color: inherit;
          font-family: inherit;
          margin: 0;
        }

        .dropdown-content {
          display: none;
          position: absolute;
          background-color: #f9f9f9;
          min-width: 160px;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          z-index: 1;
        }

        .dropdown-content a {
          float: none;
          color: black;
          padding: 5px 15px;
          text-decoration: none;
          display: block;
          text-align: left;
        }

        .topnav a:hover, .dropdown:hover .dropbtn {
          background-color: #555;
          color: white;
        }

        .dropdown-content a:hover {
          background-color: #ddd;
          color: black;
        }

        .dropdown:hover .dropdown-content {
          display: block;
        }

        @media screen and (max-width: 720px) {
          .topnav a:not(:first-child), .dropdown .dropbtn {
            display: none;
          }
          .topnav a.icon {
            float: right;
            display: block;
          }
        }

        @media screen and (max-width: 720px) {
          .topnav.responsive {position: relative;}
          .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
          }
          .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
          }
          .topnav.responsive .dropdown {float: none;}
          .topnav.responsive .dropdown-content {position: relative;}
          .topnav.responsive .dropdown .dropbtn {
            display: block;
            width: 100%;
            text-align: left;
          }
        }
