header nav ul {
	list-style: none;
	/*remove browser defaults*/
	margin:     0;
	padding:    .5rem;
	border:     0;
}

header nav ul {
	display:               grid;
	grid-template-columns: repeat(auto-fit, calc(98vw / 9));
	justify-items:         center;
	align-items:           center;
}

header nav ul li {
	width:           100%;
	height:          100%;
	/*li element covers full grid cell, so when hovering the figcaption will light as soon as a spot on the cell has been hovered over*/
	display:         flex;
	align-items:     center;
	justify-content: center;
}

header nav ul li:first-child {
	justify-content: start;
}

header nav ul li:last-child {
	justify-content: end;
}

header nav ul li figure figcaption {
	/*opacity: 0;*/
	font-size: small;
}

/*
header nav ul li:hover * {
	opacity: 1;
}
*/

header figure {
	/*remove browser defaults*/
	margin:  0;
	padding: 0 0 0 1rem;
	border:  0;
}

/*styling*/
header nav ul li a {
	color:           var(--main-color_hex);
	text-decoration: none;
}

header nav ul li a:visited {
	color: var(--main-color_hex);
}

header nav ul li:hover {
	background-color: rgba(var(--gray-min_rgb), .5);
	transition:       opacity 0.5s ease, background-color .5s ease;
}

header button {
	background-color: var(--gray-max_hex, dimgray);
}


@media (max-width: 50rem) {
	/*verticaal menu, overschrijft de settings van het normale menu*/
	header button {
		display: block; /*het menu wordt een block*/
		border:  0;
		padding: 0;
		margin:  0;
	}

	header button:after {
		/*three stripes hamburger menu symbol set in virtual element with after pseudo element*/
		content: "\2630";
	}

	header nav {
		display:          block;
		max-height:       0; /*take nav from document flow*/
		opacity:          0;
		background-color: var(--header-background_hex);
		transform:        scale3d(0, 0, 0);
	}

	header:hover nav {
		max-height:       100vh; /*put nav from document flow*/
		background-color: var(--gray-min_hex);
		opacity:          1;
		transform:        scale3d(1, 1, 1);
		transition:       transform .2s ease, opacity .2s ease, max-height .8s ease;
	}

	header nav ul {
		/*vertical menu*/
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		justify-items:         start;
		align-items:           start;
		gap:                   .5rem;
	}

	header nav ul li {
		justify-content: start;
	}

	header nav ul li:last-child {
		justify-content: start;
	}

	header nav ul li figure figcaption {
		display: inline;
	}

	header nav ul li figure figcaption {
		opacity: 1;
	}

	/*styling*/
	header button {
		flex-grow:   1;
		font-size:   1.5rem;
		line-height: 1;
		width:       2rem;
		height:      2rem;
		border:      0;
		margin:      .2em;
		box-shadow:  .1rem .1rem var(--primarygrey);
	}

}