nav {user-select: none; position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: var(--nav-height); transition: all .2s; box-shadow: inset 0 0 0 0 transparent;}
nav.floating, #menu-toggle:checked + nav {background: var(--c-bg); box-shadow: inset 0 -6px 0 0 #050505;}

#menu-toggle {display: none;}

nav .inner {position: relative; display: grid; grid-template-columns: max-content 1fr max-content; grid-template-areas: "logo litems ritems"; gap: 20px; align-items: center; padding: 15px var(--site-padding) 19px !important;}

nav .logo {grid-area: logo; display: flex;}
nav .logo img {width: 46px; height: 46px; border-radius: 50%;}
nav .logo div {display: none;}

nav .items {grid-area: litems; display: flex; gap: 20px; font-size: 111%; font-weight: 700;}

nav .items :is(svg, a) {color: var(--c-text); text-decoration: none; transition: all .1s;}
nav .items :is(.active, :hover) {color: var(--c-title); text-decoration: none;}

nav .menu {cursor: pointer; display: none; grid-area: menu; align-items: center;}
nav .menu svg {height: 24px; width: 24px;}

nav .items.ritems {grid-area: ritems;}
nav .social::before {content: ""; display: block; width: 1px; background-color: var(--c-text); height: 25px; opacity: .5;}

@media screen and (max-width: 950px) {
	nav .inner {grid-template-columns: 1fr max-content; grid-template-rows: min-content min-content min-content; grid-template-areas: "logo menu" "litems litems" "ritems ritems";}
	nav .menu {display: flex;}

	nav {overflow: hidden;}
	#menu-toggle:checked + nav {height: 100%;}
	#menu-toggle:checked + nav .inner {overflow-y: auto;}

	nav .items {flex-direction: column; gap: 5px; height: auto; line-height: 35px;}

	nav .social {margin-top: 15px; font-size: 24px;}
	nav .social::before {display: none;}
}