header { display: flex; position: sticky; top: 0; min-height: 6.4rem; padding: 2rem 0; backdrop-filter: blur(5px); background-color: rgba(255,255,255,.92); box-shadow: 0 3px 15px hsla(0,0%,39.2%,.12); } .header-container { width: 100%; max-width: var(--page-width); margin-left: auto; margin-right: auto; display: flex; justify-content: space-between; align-items: center; } #header-logo img { max-height: 60px; display: block; } #mainNav ul { margin: 0; padding: 0; } #mainNav li { display: inline; margin-left: 1rem; } #mainNav a { position: relative; font-size: 16px; font-family: Aileron; font-weight: 500; line-height: 2; text-transform: uppercase; color: var(--color-text); text-decoration: none; } #mainNav a::after { content: ""; position: absolute; background: var(--color-primary); opacity: 0; bottom: -4px; left: 0; right: 0; height: 2px; transition: opacity .3s ease-out; } #mainNav a:hover::after { opacity: 1; }