/**************************************************************************************************************************************************************************************************/ /* NAVBAR */ /**************************************************************************************************************************************************************************************************/ /* Navbar container */ .navbar { overflow: hidden; background-color: #324856; font-family: Century Gothic, sans-serif; } /* Links inside the navbar */ .navbar a { float: center; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* The dropdown container */ .dropdown { float: right; overflow: hidden; } /* Dropdown button */ .dropdown .dropbtn { font-size: 28px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; /* Important for vertical align on mobile phones */ margin: 0; /* Important for vertical align on mobile phones */ } /* Add a red background color to navbar links on hover */ .navbar a:hover, .dropdown:hover .dropbtn { background-color: #d66c44; } /* Dropdown content (hidden by default) */ .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; } /* Links inside the dropdown */ .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a grey background color to dropdown links on hover */ .dropdown-content a:hover { background-color: #ddd; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; }