/* roboto-100 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100;
	src: url("./fonts/roboto-v30-latin-100.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-100italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Roboto";
	font-style: italic;
	font-weight: 100;
	src: url("./fonts/roboto-v30-latin-100italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-300 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	src: url("./fonts/roboto-v30-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-300italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Roboto";
	font-style: italic;
	font-weight: 300;
	src: url("./fonts/roboto-v30-latin-300italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	src: url("./fonts/roboto-v30-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Roboto";
	font-style: italic;
	font-weight: 400;
	src: url("./fonts/roboto-v30-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/roboto-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	src: url("./fonts/roboto-v30-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
	font-family: "Roboto", sans-serif;
}

body {
	margin: 0;
}

h1 {
	margin: 0;
  font-weight: 500;
}

h2 {
	font-weight: 100;
	margin: 0;
}

header {
	display: grid;
}

.logo {
	display: grid;
	place-self: center;
	padding: 4rem 0 2rem 0;
	width: 13rem;
	height: auto;
}

.collapsible {
	background-color: white;
	width: 50%;
	border: none;
	text-align: right;
	outline: none;
	font-size: 16px;
	font-family: "Roboto", sans-serif;
	place-self: end;
	margin: 1rem 1rem 0 0;
}

.collapsible:hover {
	text-decoration: none;
}

.knop {
	text-decoration: underline;
	cursor: pointer;
}

.knop:hover {
	text-decoration: none;
}

.content {
	display: none;
	overflow: hidden;
	text-align: right;
	place-self: end;
	width: 50%;
	margin: 0 1rem 0 0;
}

#menu {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	padding: 2rem 10vw 7rem 10vw;
	gap: 3vw;
}

#menu > a {
	text-decoration: none;
	color: inherit;
	font-size: 1rem;
	font-weight: 100;
	text-align: center;
}

.menuplaatje {
	width: 100%;
	height: auto;
}

.jaartal {
	place-self: end center;
}

/* losse pagina's */

#uitleg {
	display: grid;
	padding: 0 4rem 0 2rem;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 3fr 2fr;
	gap: 2rem;
	min-height: 100vh;
}

#uitleg1 {
	align-self: end;
	grid-column: 2;
	grid-row: 1;
}

footer {
	display: grid;
	position: fixed;
	bottom: 0;
	padding: 0 0 30px 30px;
}

a.footer {
	text-decoration: none;
	color: black;
}

.schildering {
	display: block;
	place-self: center;
	grid-row: 1 / 3;
	grid-column: 1;
}

/* hide all paths if a group is hovered */
.schildering:is(:hover, :focus-within) path {
	opacity: 0.1;
}

/*but show the paths in the group that was hovered*/
.schildering g:is(:hover, :focus) path {
	opacity: 1;
}

/*hide focus outline*/
.schildering g:focus {
	outline: none;
}

/* except the paths in the rest group, hide those */
.schildering g.rest:is(:hover, :focus) path {
	opacity: 0.1;
}

/*also hide the paths if the group that was hovered if it has a sub-group that was also hovered*/
.schildering g:is(:hover, :focus):has(g:is(:hover, :focus)) path {
	opacity: 0.1;
}

/*but show the paths in the sub-group that was hovered */
.schildering g:is(:hover, :focus) g:is(:hover, :focus) path {
	opacity: 1;
}

/*hide all texts*/
.teksten div {
	margin: 0 0 1rem 0;
	display: none;
}

.teksten .begrip {
	font-style: italic;
}

@media screen and (min-width: 769px) {
	/*show niks text*/
	.teksten .niks {
		display: block;
		font-style: italic;
	}

	/*hide niks text if any shape is hovered */
	body:has(.schildering > *:is(:hover, :focus-within)) .teksten .niks {
		display: none;
	}
	.niks_mobiel {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	.collapsible{
		width: 90%;
	}
	#uitleg {
		grid-template-columns: 1fr;
		grid-template-rows: max-content max-content max-content;
		padding: 2rem;
		min-height: max-content;
	}
	#uitleg1 {
		grid-column: 1;
		grid-row: 1;
	}
	.schildering {
		grid-column: 1;
		grid-row: 2;
	}
	.teksten {
		grid-column: 1;
		grid-row: 3;
	}
	footer {
		position: static;
	}
	.niks {
		display: none;
	}
	.niks_mobiel {
	display: block;
	font-style: italic;
	}
	.teksten .niks_mobiel {
		display: block;
		font-style: italic;
	}
	body:has(.schildering > *:is(:hover, :focus-within)) .teksten .niks_mobiel {
		display: none;
	}	
}