header, header * {
	transition: 0.1s;
}
header .menu-wrapper {
	position: fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	z-index: 888;
	
	background: color-mix(in srgb, var(--color_darkest), transparent 20%);
}
header .menu-wrapper {
	transition:0.1s ease-out all;
}
header .menu-wrapper > * {
	transition:0.3s ease-out all;
}
header .menu-wrapper, 
header .menu-wrapper nav:not(nav nav) > ul {
	display: grid;
	grid-template-columns: 100%;
}
header .menu-wrapper > *,
header .menu-wrapper ul > * {
	margin: auto;
}
.menu-open header nav {
	
}
header .menu-wrapper nav:not(nav nav) > ul >  li {
	margin-top: 1vw;
	margin-bottom: 1vw;
}

header .menu-wrapper nav:not(nav nav) > ul >  li > a {
	font-size: 20px;
}
header nav ul li a {
	display: flex;

	flex-direction: row;
}
header nav ul li a > * {
	margin: auto;
}
header .menu-wrapper nav:not(nav nav) >  ul >  li.selected > a {
	color:#fc0!important;
}

body:not(.menu-open) .menu-wrapper {
	pointer-events: none;
	filter: opacity(0%);
	
}
body:not(.menu-open) .menu-wrapper > * {
	filter: opacity(0%);
	transform: translateY(50px);
}
/*SUBMENU*/
header nav ul nav {
	width: 100%;
	padding: 10px 20px;
	filter: opacity(80%);
}
header nav ul nav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap:20px;
	row-gap:5px;
	max-width: 720px;
	margin: auto;
	
	width: 100%;
}
/*ANIMATE*/
body:not(.menu-open) header  nav:not(nav nav) > ul >  li {
	filter: opacity(0%);
	transform: translateY(30px);
	
}

header  nav ul li {
	transition: transform .2s ease, filter .5s ease;
	transition-delay: calc(.03s * var(--trmultiplier, 0))!important;
}

.menu-open header nav ul li:nth-child(1){ --trmultiplier:1; }
.menu-open header nav ul li:nth-child(2){ --trmultiplier:2; }
.menu-open header nav ul li:nth-child(3){ --trmultiplier:3; }
.menu-open header nav ul li:nth-child(4){ --trmultiplier:4; }
.menu-open header nav ul li:nth-child(5){ --trmultiplier:5; }
.menu-open header nav ul li:nth-child(6){ --trmultiplier:6; }
.menu-open header nav ul li:nth-child(7){ --trmultiplier:7; }
.menu-open header nav ul li:nth-child(8){ --trmultiplier:8; }
.menu-open header nav ul li:nth-child(9){ --trmultiplier:9; }
.menu-open header nav ul li:nth-child(10){ --trmultiplier:10; }
.menu-open header nav ul li:nth-child(11){ --trmultiplier:11; }

.menu-socials {
	margin: auto;
	justify-content: center;
}
.menu-less-important {
	display: flex;
	flex-direction: column;
	gap:20px;
}