header nav, header nav ul {
	flex-direction: column;
}


header nav {
	position: fixed;
	top: auto;
	left: 0px;
	right: 0px;
	bottom: 0px;
	padding: var(--spacing-xl,30px);
	padding-bottom: 90px;
	/*background: linear-gradient(115deg, #00aa88 0%, #ffda73 50%, #6f7c78 100%);*/
	background-color: #e4eddf;
}
body:not(.menu-open) header nav {
	transform: translateY(20px);
	transform-origin: bottom center;
	pointer-events: none!important;
	filter: opacity(0%);
	transition: 0.3s ease all;
}
body:not(.menu-open) header nav {
	
}
section, article, section img {
	transition: 0.3s ease all;
}
body.menu-open *:is(section) {
	
}
body.menu-open article {
	filter: opacity(50%);
}
body.menu-open *:is(section),
body.menu-open *:is(section) img {

	transform: translateY(-10px);
}
header nav *:is(ul, li, a) {
	margin-left: auto;
	margin-right: auto;
}
header nav *:is(li a) {
	max-height: var(--spacing-xl,30px);
}
header nav *:is(ul, li, a), header nav ul li :is(a, a span) {
/*	color:var(--lightcolor,#fffbf0);	
	border-color:var(--lightcolor,#fffbf0);
	--frontcolor: var(--lightcolor,#fffbf0);*/
}
.menu-button {
	position: fixed;
		bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 9;
}

/* AND THE BURGER: */
header, header * {
	transition: 0.1s;
}
.menu-button {

	z-index: 10;
	
	grid-gap: 4px;
	margin-top: 5px;
	
	/*background-color: #eee;*/
	padding:20px 0px;
	min-height: 70px;
	display: flex;
	flex-direction: row;
	gap:8px!important;
}
.menu-button > * {
	margin-top: auto;
	margin-bottom: auto;
	display: inline-flex;
}

body:not(.menu-open) .menu-button { 
	background: linear-gradient(to bottom, color-mix(in srgb, var(--lightcolor, #fffbf0) 0%, transparent), color-mix(in srgb, var(--lightcolor, #fffbf0) 90%, transparent) 20px);
}
.menu-button > * {
	margin: auto;
}
.menu-button > *:not(:first-child) {
	margin-left: 0px;
}
.menu-button > *:not(:last-child) {
	margin-right: 0px;
}
.hamburger-menu {
	display: flex;
	flex-direction: column;
	gap:6px;
}
.menu-button:hover, .menu-open .menu-button, .overlay-shown .menu-button {
	padding:5px 0px;
}
.hamburger-line {
	margin-left: auto;
	margin-right: auto;
	background-color:var(--frontcolor_dark);
	height: 3px;
	width: var(--spacing-xl,30px);
}
.menu-button:hover .hamburger-line {
	background-color:var(--frontcolor);
}
body.menu-open .menu-button .hamburger-line { 
	background-color:var(--lightcolor,#fffbf0);
	background-color: #c5c14c;
}
body.menu-open .menu-button * { 
	color:var(--lightcolor,#fffbf0);
	color: #c5c14c;
}
nav li, nav li a {
	max-height: 30px!important;
}


.menu-open  .hamburger-line:first-child, .overlay-shown .hamburger-line:first-child {
	transform: rotate(45deg) translateX(7.5px) translateY(5px);
}
.menu-open .hamburger-line:nth-child(2), .overlay-shown .hamburger-line:nth-child(2) {
	filter: opacity(0%);
}
.menu-open  .hamburger-line:last-child, .overlay-shown .hamburger-line:last-child {
	transform: rotate(-45deg) translateX(7.5px) translateY(-5px);
	
	/*transform: rotate(-45deg);*/ 
}


/*.menu-open .menu-button:not(:hover) .hamburger-line {
	background-color:#D5D8D8; 
}*/

@supports (bottom: env(safe-area-inset-bottom)) {
    .menu-button {
        bottom: env(safe-area-inset-bottom);
    }

    header nav {
        padding-bottom: calc(90px + env(safe-area-inset-bottom));
    }
}