nav
{
  padding: 20px clamp(20px, calc(calc(100% - 1200px) / 2), 900px);

  img
  {
    height: 3rem;
  }
	

	ul.website-menu
	{
		position: relative;
		padding-inline-start: 2rem;
		margin-block-start: 0px;
		margin-block-end: 0px;
		display: flex;
		list-style-type: none;
		gap: 2rem;
		z-index: 90;
		background: var(--verduyn-blue);
				
		li.has-dropdown
		{
			> ul.sub-menu
			{
				display: flex;
				position: absolute;
				padding: 4rem 2rem 2rem 2rem;
				top: 50%;
				left: 0px;
				right: 0px;
				flex-wrap: wrap;
				background: var(--verduyn-darkblue);
				gap: 4rem;
				padding-inline-start: 2rem;
				margin-block-start: 0px;
				margin-block-end: 0px;
				list-style-type: none;
				opacity: 0;
				user-select: none;
				pointer-events: none;
				
				> li > a
				{
					font-weight: 800;
					color: white;
					text-decoration: none;
					font-family: 'Bahnschrift', 'Bahnschrift', sans-serif;
				}
				
				> li > a:hover
				{
					text-decoration: underline;	
				}
				
				> li.menu-item-has-children
				{
					ul.sub-menu
					{
						padding-inline-start: 0px;
						margin-block-start: 0px;
						margin-block-end: 0px;
						list-style-type: none;
						font-size: .9rem;
						
						> li > a
						{
							color: white;
							text-decoration: none;
						}
						
						> li > a:hover
						{
							text-decoration: underline;	
						}
					}
				}				
			}
		}
		
		li.has-dropdown:hover
		{
			> ul.sub-menu
			{
				opacity: 1;
				top: 100%;
				user-select: initial;
				pointer-events: initial;
			}
		}
		
		> li
		{		
			padding: 2rem 0 0 0;
			
			> a
			{
				color: white;
				text-decoration: none;
				font-weight: 800;
				font-family: 'Bahnschrift', 'Bahnschrift', sans-serif;
				text-transform: uppercase;
			}
			
			> a:hover
			{
				border-botttom: 2px solid white;
			}
		}
	}
	
	ul.website-menu::before
	{
		content: '';
		position: absolute;
		bottom: calc(1px - 2rem);
		left: 0px;
		height: 2rem;
		width: 50%;
		background: var(--verduyn-blue);
		clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
		z-index: 25;
		user-select: none;
		pointer-events: none;
	}
	
	ul.website-menu::after
	{
		content: '';
		position: absolute;
		bottom: calc(1px - 2rem);
		right: 0px;
		height: 2rem;
		width: 50%;
		background: var(--verduyn-blue);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
		z-index: 25;
		user-select: none;
		pointer-events: none;
	}
}

header
{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100%;
  width: 100%;

  > img
  {
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-fit: center;
  }

  *:not(img)
  {
    position: relative;
    z-index: 2;
    color: white;
  }
}

body.home header
{
  height: clamp( 400px , 65dvh, 8000px );
}