body { margin: 0; text-align: left; font-family: 'Roboto', sans-serif; /* More modern font choice */ } .topnav { overflow: hidden; background-color: #007bff; } .topnav a { float: left; display: block; color: white; text-align: center; padding: 16px 20px; /* Increased padding for a more spacious look */ text-decoration: none; font-size: 17px; margin-right: 15px; transition: background-color 0.3s ease; /* Adding transition */ } .topnav a:hover { background-color: black; /* Black with low opacity */ color: white; /* Cleaner contrast */ } .topnav a.active { color: white; } /* Responsive Design */ @media screen and (max-width: 600px) { .topnav a:not(:first-child) { display: none; } .topnav a.icon { float: right; display: block; font-size: 24px; /* Larger icon for better visibility */ } } @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; } } .alert { padding: 20px; background-color: #f44336; color: black; } .closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; } .closebtn:hover { color: black; }