#nav_toggle{display:none}nav{z-index:9;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);height:9vh;top:var(--padding-y);left:var(--padding-x);right:var(--padding-x);background-color:rgb(from var(--bg-darker) r g b/.5);border:1px solid var(--bg-lightest);corner-shape:squircle;border-radius:50px;flex-direction:row;justify-content:space-between;align-items:center;padding:12px;transition:all .3s;display:flex;position:fixed;box-shadow:0 0 10px #0002}nav.inactive{pointer-events:none;opacity:0;top:-10px}nav.scrolled{background-color:rgb(from var(--bg-darker) r g b/.7)}nav.scrolled #user{background-color:var(--bg)}nav #nav_logo{height:80%;position:relative}nav #nav_logo img{aspect-ratio:1;height:100%}nav #nav_links{flex-direction:row;gap:40px;list-style:none;display:flex;position:absolute;right:50%;translate:50%}nav #nav_links li{width:fit-content;transition:all .3s;position:relative}nav #nav_links li:before{content:"";background-color:var(--primary);border-radius:4px;width:0;height:3px;transition:all .3s cubic-bezier(.82,.02,.13,1.7);position:absolute;bottom:-5px;left:100%}nav #nav_links li:hover:before{width:70%;left:15%}nav #nav_links li:has(a[aria-current=page]):before{width:70%;left:15%}nav #nav_links li:hover a{color:var(--primary)}nav #nav_links li:has(a[aria-current=page]) a{color:var(--primary)}nav #user{cursor:pointer;aspect-ratio:1;background-color:rgb(from var(--bg-darker) r g b/.5);border:1px solid var(--bg-lightest);corner-shape:squircle;border-radius:50px;justify-content:center;align-items:center;height:100%;transition:all .2s;display:flex}nav #user:hover{background-color:var(--bg-lighter);scale:1.1}nav #user s-icon{height:45%;fill:var(--text-secondary)}@media screen and (width<=850px){#nav_toggle{z-index:10;background-color:var(--bg-lighter);border:1px solid var(--bg-lightest);corner-shape:squircle;background-image:url(/assets/imgs/icons/hamburger.svg);background-position:50%;background-repeat:no-repeat;background-size:20px;border-radius:50px;width:44px;height:44px;display:block;position:fixed;top:12px;right:12px}#nav_toggle:has(input:checked)+nav{translate:0}#nav_toggle input{opacity:0;cursor:pointer;border-radius:inherit;width:100%;height:100%}nav{background-color:var(--bg-lighter);border-radius:0;flex-direction:column;width:clamp(0px,400px,100vw);height:100vh;top:0;right:0;translate:100vw}nav.inactive{pointer-events:all;opacity:1;top:0}nav.scrolled{background-color:var(--bg-lighter)}nav #nav_logo{height:30px}nav #nav_links{flex-direction:column;align-items:center;font-size:20px;top:50%}nav #user{height:40px}}
