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