: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;

	--square-1: #EF00FF;
	--square-2: #00ACFF;
	--square-3: #6DFF00;
	--square-4: #AA7739;
	
}


@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: "Friz";
	src: url("../fonts/friz-quadrata-regular.woff") format("woff");
	font-style: normal;
}

header {
	color: var(--kleur-2);
	background-color: var(--square-2);
	padding: 11px;
}
header h1,h2,h3,h4,h5,h6 {
	font-family: Friz;
	text-align: center;
	font-size: 300%;
}

.schaduw {
  text-shadow:
    5px 5px var(--kleur-7),
    10px 10px var(--kleur-8);
 }


main {
	max-width: 900px;
	margin: auto;
	padding: 12px;
	font-family: Asap, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: var(--square-3);
}

main h1,h2,h3,h4,h5,h6 {
	font-family: Asap, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	text-align: left;
	font-size: 100%;
}


 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 900px) {

article {
width: calc(100%-37px);
background-color: var(--kleur-3);
/* top and bottom | left and right */
padding: 10px 7px;
margin: 0;
margin-bottom: 5px;
}

article:nth-child(even) {
	background-color: var(--square-1);
	color: whitesmoke;
} 
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 900px) {

article {
width: calc(50% - 17px);
background-color: var(--kleur-3);
/* top and bottom | left and right */
padding: 10px 7px;
margin: 0;
margin-bottom: 5px;
}

article:nth-child(even) {
	margin-left: 50%;
	background-color: var(--square-1);
	color: whitesmoke;
} 
}

.meerinfo {
	padding: 2px;
	padding-left: 12px;
	background-color: var(--square-2);
	color: black;
}

.meerinfo a:link, .uitleg a:link {
	color:white;
	text-decoration-style: wavy;
}

.meerinfo a:visited{
	color:yellow;
}
 
.goedelijst { 
 list-style-type: "\1F44D";
 }
 
.happylijst { 
 list-style-type: "\1F603";
 }
 
 .slechtelijst {
 list-style-type: "\1F92E";
 }