body { overflow-y: scroll; overflow-x: hidden; } * { font-style: -apple-system, 'avenir next', avenir, roboto, noto, ubuntu, 'helvetica neue', helvetica, arial, sans-serif; } nav { position: fixed; z-index: 99; top: 0; width: 100vw; height: 50px; background-color: #002244; overflow: hidden; box-shadow: 0 0 5px #000; } nav * { background-color: #002244; color: #fff; margin: 0; padding: 0; } nav h2 { display: inline-block; position: fixed; top: 0; margin-left: .65em; line-height: 5vh; color: #002244; } nav img{ width: 50px; height: 50px; } nav ul { display: table; table-layout: fixed; position: fixed; top: 0; left: 15vw; right: 15vw; width: 70vw; height: 50px; list-style: none; } nav a { display: table-cell; height: 100%; margin: 0; text-decoration: none; font-size: 1.2em; text-align: center; line-height: 48px; border-bottom: 2px solid rgba(255, 255, 255, 0); transition: border-bottom .3s ease; } nav a:hover { border-bottom: 2px solid rgba(255, 255, 255, 1); transition: border-bottom .3s ease; } nav a.active { border-bottom: 2px solid rgba(255, 255, 255, 1); transition: none; } nav .login { position: fixed; top: 0; right: 0; height: 48px; padding: 0 1em; } main { padding: 1em 15vw; height: 100vh; margin-top: 5vh; background-color: #fff; } main h2 { color: #002244; } .btn { padding: .5em; border-radius: 4px; text-decoration: none; color: #fff; background-color: #002244; transition: background-color .2s ease; } .btn:hover { background-color: #00407F; transition: background-color .2s ease; }