nav.header
{
	position: relative;
	padding: clamp(20px, 10dvh, 200px) clamp(20px, calc(calc(100% - 1200px) / 2), 900px) 2rem clamp(20px, calc(calc(100% - 1200px) / 2), 900px);
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;

  img
  {
	  height: 3rem;
	  max-width: 50dvw;
  }
	
	ul
	{
		list-style-type: none;
		padding-inline-start: 0px;
		display: flex;
		gap: 1rem;
		align-items: center;
		
		li:not(.button)
		{
			position: relative;
			
			a
			{
				color: black;
				text-decoration: none;
			}
		}
		
		li:not(.button):after
		{
			content: '';
			z-index: -1;
			height: 100%;
			width: 100%;
			top: 0px;
			left: 0px;
			right: 0px;
			position: absolute;
			border-bottom: 1px solid var(--css-variables--button-bg);
			transform: translateY(1.2rem);
			opacity: 0;
			transition: all 250ms ease-in-out;
		}
		li:not(.button):hover:after
		{
			transform: translateY(.2rem);
			opacity: 1;
		}
	}
}

nav.header:before
{
	content: '';
	z-index: -1;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	opacity: .23;
	height: 100%;
	width: 100%;
	background-image: url('https://sleepy-gould.145-131-29-70.plesk.page/wp-content/uploads/2025/10/glazen-etalage-header.svg');
	background-size: cover;
	background-repeat: no-repeat;
}

nav.mobile
{
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	position: fixed;
	background: rgba(255,255,255,.95);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem;
	justify-content: center;
    align-items: center;
	opacity: 0;
	z-index: -999;
	transition: all 250ms ease-in-out;
	user-select: none;
	pointer-events: none;
	
	ul
	{
		margin-block-start: 0px;
		margin-block-end: 0px;
		list-style-type: none;
		padding-inline-start: 0px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}
	
	a
	{
		font-family: "Playfair Display", serif;
		padding: 0;
		font-weight: 900;
		font-size: 1.5em;
		letter-spacing: .5px;
		color: black;
		text-decoration: none;
		transition: all 250ms ease-in-out;
	}
	
	a:hover
	{
		color: var(--css-variables--button-bg)
	}
	
	#sluiten
	{
		position: absolute;
		top: 5rem;
		right: 5rem;
		font-size: 1.25em;
		cursor: pointer;
	}
}

nav.mobile.active
{
	opacity: 1;
	z-index: 999;
	user-select: initial;
	pointer-events: initial;
}

header
{
	padding: 5dvh 0;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

#openen
{
	display: none;
	font-size: 1.25em;
	cursor: pointer;
}

@media ( width < 800px )
{
	nav.header ul
	{
		display: none;
	}
	
	#openen
	{
		display: initial;
	}
}