header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;background:var(--header-bg, var(--color-primary));border-bottom:var(--color-nav-accent) solid 15px;color:var(--color-white);padding:0 24px;height:64px;position:fixed;top:0;left:0;right:0;z-index:100;transition:background .25s ease}.nav-title{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;font-size:1.2rem;font-weight:bold}.nav-title a{color:inherit;display:inline-flex;align-items:center}.nav-btns{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:20px}.nav-btns a{color:var(--color-white);padding:8px;border-radius:25px;background:rgba(0,0,0,0);transition:background .25s ease}.nav-btns a:hover{background:hsla(0,0%,100%,.15)}.nav-btns a:focus{outline:2px solid var(--color-white);outline-offset:2px}.nav-hamburger{display:none;font-size:1.4rem;cursor:pointer;color:var(--color-white);padding:4px}.nav-drawer-close{display:none}@media(max-width: 768px){.nav-hamburger{display:block;margin-left:auto}header>nav{position:fixed;top:0;left:0;width:260px;height:100vh;background:rgba(var(--color-primary), 0.04);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:4px 0 16px rgba(0,0,0,.1);transform:translateX(-100%);transition:transform .3s ease;will-change:transform;z-index:100;padding-top:60px}.nav-drawer-close{display:inline-flex;position:absolute;top:12px;left:0;margin:0 12px;width:50px;height:50px;align-items:center;justify-content:center;padding:0;background:rgba(var(--color-white), 0.15);border:var(--border-solid-white);border-radius:25px;color:var(--color-white);font-size:larger;cursor:pointer;transition:background .25s ease,color .25s ease}.nav-drawer-close:hover{background:hsla(0,0%,100%,.15);color:var(--color-white)}.nav-drawer-close:focus{outline:2px solid var(--color-white);outline-offset:2px}#nav-toggle:checked~nav,.nav-drawer-open>nav{transform:translateX(0)}.nav-btns{flex-direction:column;gap:0;align-items:stretch;padding:0 16px}.nav-btns a{padding:14px;margin:6px 0;background:hsla(0,0%,100%,.3);border:2px solid hsla(0,0%,100%,.6);border-radius:25px;transition:.25s ease}.nav-btns a::after{display:none}.nav-btns a:hover{background-color:hsla(0,0%,100%,.6)}.nav-btns i{padding:0 7px}}