/* Losse stylesheet voor het printen */

@media print {
	
	@page {
		size: A4;
	}
	
	/* Footer en class niet weergeven bij het printen */
	footer, .notPrintable {
		display: none;
	}
	
	/* Class juist wel weergeven bij het printen */
	.printOnly {
		display: inline-block;
	}

	body {
		background-color: white;
	}
	
	/* Basisinstellingen voor het grid die lijkt op het grid van 1024+px */
	.gridContainer {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
		margin: 0px 15px 0px 15px;
		gap: 20px;
		justify-items: left;
	}
	
	/* De hoogte van break rules wat lager maken */
	br {
		display: block;
		content: ""; 
		margin-bottom: 0.5em;
	}
	
	/* Iets aangepaste tekststijlen */
	h1 {
		font-size: 2.3rem;
		line-height: 2.5rem;
		font-family: supria-sans, sans-serif;
		font-weight: 800;
		color: #161616;
	}
	
	h2 {
		font-size: 1.3em;
		font-family: supria-sans, sans-serif;
		font-weight: 600;
		color: #6FE894;
	}
	
	h3 {
		font-size: 0.8em;
		font-family: supria-sans, sans-serif;
		font-weight: 600;
		color: #161616;
	}
	
	h4 {
		font-size: 0.8em;
		font-family: supria-sans, sans-serif;
		font-weight: 300;
		color: #868686;
	}
	
	p {
		font-size: 0.7em;
		line-height: 1.3em;
		font-family: "open-sans", sans-serif;
		font-weight: 300;
		font-style: normal;
		color: black;
	}
	
		/* Stijl voor de ampersand */
	.ampersand {
		font-family: gelato-luxe, sans-serif;
		line-height: 0;
		font-weight: 400;
		color: #6FE894;
	}
	
	/* Stijl voor de lijst onder het kopje karakter */
	#karakter ul {
		font-size: 0.7em;
		font-family: "open-sans", sans-serif;
		font-weight: 300;
		font-style: normal;
		color: white;
		list-style: disc;
		padding-left: 15px
	}
	
	/* Tekst zwart maken */
	#karakter li {
		color: black;
	}
	
	/* Opsommingsteken groen maken */
	#karakter li::marker {
		color: #6FE894;
	}
	
	/* Header van de pagina 4 columns (gehele breedte) in laten nemen */
	.pageHeader {
		grid-column: 1 / span 4;
		grid-row: 1 / 1;
	}
	
	/* De header rechts naast de afbeelding plaatsen */
	#headerAsideLeft {
		grid-column: 2 / span 3;
		grid-row: 1 / 1;
	}
	
	/* Afbeelding linksboven plaatsen */
	.heroImage {
		grid-column: 1;
		grid-row: 1;
	}
	
	/* Subgrid om de main content en sidebar naast elkaar te zetten */
	.overmijGrid {
		display: grid;
		grid-column: 1 / span 4;
		grid-row: 2;
		grid-template-columns: subgrid;
		grid-template-rows: subgrid;
	}
	
	/* Main content neemt de drie rechter kolommen in */
	.overmijMain {
		grid-column: 2 / span 3;
	}
	
	/* Margin aan de onderkant van de main articles */
	.overmijMain article {
		margin-bottom: 2em;
	}
	
	/* Margin aan de bovenkant van alle h3's die niet de eerste binnen hun section zijn */
	.overmijMain article h3:not(:first-of-type) {
		margin-top: 1em;
	}
	
	/* Sidebar neemt linker kolom in */
	.overmijSidebar {
		grid-column: 1;
	}

	/* Stijl van een article in de sidebar met een border */
	.overmijSidebar article {
		padding: 10px;
		margin-bottom: 0.5em;
		border-radius: 5px;
		border: 1px solid #868686;
	}

}