header{background-color:#eee}header>div{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:max-content auto;gap:2em;padding:2em;align-items:center}header>div :nth-child(2){justify-self:end}header .logo{display:flex;gap:.5em;justify-content:center;align-items:center;color:#335d92;text-decoration:none;font-size:large}header>div>nav{display:flex;gap:1em}header>div>nav>button{display:none}header>div>nav a{color:#000;text-decoration:none}header div>nav>a:hover,header .logo:hover{text-decoration:underline grey;text-underline-offset:5px}header>div>nav a.active{text-decoration:underline #335d92;text-underline-offset:5px}header div.mobile-menu-button{display:none;justify-content:center;align-items:center;justify-self:end}@media (max-width: 600px){header>div>nav{flex-direction:column;align-items:end;position:fixed;top:0;right:-100%;padding:1em;width:100%;max-width:300px;background-color:#fff;height:100vh;border-left:#bbb solid 1px;font-size:large;z-index:1000;transition:right .2s ease-in-out}header>div>nav.open{right:0%}header>div>nav a.active{font-weight:700}header>div>nav>button{display:flex;align-items:center;gap:.25em;padding:.25em .5em;font-size:x-large}header>div>nav>button>:nth-child(2){font-size:small}header div.mobile-menu-button{display:flex}header div.mobile-menu-button:hover{filter:drop-shadow(0 0 .25rem #335d92);cursor:pointer}}