body { background: #f2f2f2; } nav, #websitenav { height: 75px; } .navbar { background: white; } .nav-link { color: black; font-size: 18px; font-family: 'Helvetica', 'Arial', sans-serif; } .active { color: #478ac9; pointer-events: none; } .nav-link:hover { background: white; color: #f5d654; } .navbar-toggler { display: flex; justify-content: center; flex-direction: column; height: 60%; width: 50px; background: black; gap: 5px; } .icon-bar { background: white; height: 2px; width: 100%; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: black; overflow-x: hidden; padding-top: 40px; transition: 0.5s; white-space: nowrap; } .sidenav a { padding-bottom: 10px; text-decoration: none; font-size: 18px; display: flex; align-items: center; justify-content: center; } .sidenav a:not(.active) { color: white; } .sidenav a:not(#close_sidenav):hover { color: #f5d654; } #overlay { position: fixed; top: 0; opacity: 1; width: 0; left: 0; height: 100%; background-color: black; } #close_sidenav { position: absolute; top: 5px; right: 10px; } a#close_sidenav:hover { color: #e68387; } .jumbotron { padding: 2% 2%; background: transparent; } .footer{ height: 50px; background: #333333; }