:root {
	--kleur-1: chocolate;
	--kleur-2: darkorange;
	--kleur-3: orange;
	--kleur-4: orangered;
	--kleur-5: tomato;
	--kleur-6: red;
	--kleur-7: crimson;
	--kleur-8: firebrick;
	--kleur-9: darkred;
}

@font-face {
	font-family: "Asap";
	src: url("../fonts/Asap/Asap-VariableFont_wdth\,wght.ttf") format("ttf-variations");
	font-weight: 125 950;
	font-stretch: 75% 125%;

	font-style: normal;
}

@font-face {
	font-family: 'Oldenburg';
	font-style: normal;
	font-weight: normal;
	src: local('Oldenburg'), url('../fonts/Oldenburg/Oldenburg-Regular.ttf') format('truetype');
}


.layout {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: grid;
	grid:
		"header nav latest" 1fr "hoofdonderwerp uitleg verder" 1fr "link slot footer" 1fr / 1fr 1fr 1fr;
	gap: 8px;
}

.pagina {
	max-width: 80%;
	margin: auto;
	padding: 12px;
	font-family: Asap, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color:palegreen;
}

.pagina h1,h2,h3,h4,h5,h6 {
	font-family: Oldenburg, Georgia, 'Times New Roman', Times, serif;
}

.header {
	grid-area: header;
	background-color: var(--kleur-1);
	font-family: Oldenburg, Georgia, 'Times New Roman', Times, serif;
	font-size: 6vw;
	text-align: center;
	color: white;
}

.nav {
	grid-area: nav;
	background-color: var(--kleur-2);
}

.latest {
	grid-area: latest;
	background-color: var(--kleur-3);
}

.hoofdonderwerp {
	grid-area: hoofdonderwerp;
	background-color: var(--kleur-4);
	font-family: Asap, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 1.5rem;
	text-align: center;
	color: white;
}

.uitleg {
	grid-area: uitleg;
	background-color: var(--kleur-5);
}

.verder {
	grid-area: verder;
	background-color: var(--kleur-6);
	padding-top: 25%;
}

.link {
	grid-area: link;
	background-color: var(--kleur-7);
}

.slot {
	grid-area: slot;
	background-color: var(--kleur-8);
}

.footer {
	grid-area: footer;
	background-color: var(--kleur-9);
}

.boxje{
	color: white;
}
@media screen and (max-width: 768px) {
	.layout {
		/* grid-template-columns: 1fr; */
		width: 100%;
		min-height: 400px;
		/* aspect-ratio: 1/1; */
		display: inline-block;
	}

	.header {
		font-size: 18vw;
	}

}