/* CSS RESET --> in 'all.css' is een kleine CSS reset opgenomen die je naar eigen voorkeur kunt aanvullen of uitkleden */

/* BLOKJES --> Elk blokje (article) heeft een ID, die je kunt gebruiken als "namespace" om CSS alleen voor dat blokje te laten gelden */


/*************/
/* SELECTORS */
/*************/

/*************************/
/* ID = OliveDrab-header */
/*************************/
#OliveDrab-header h2 {
   /* your-code */
   color:olivedrab;
}


/*****************************/
/* ID = GoldenRod-paragrafen */
/*****************************/
#GoldenRod-paragrafen p {
   /* your-code */
   color:GoldenRod;
}


/*****************************/
/* ID = alles-CornflowerBlue */
/*****************************/
#alles-CornflowerBlue * {
	/* your-code */
	color:CornflowerBlue;
}


/*************************/
/* ID = eerste-paragraaf */
/*************************/
#eerste-paragraaf p:first-of-type {
	color:IndianRed;
}


/*************************/
/* ID = alleen-de-tweede */
/*************************/
#alleen-de-tweede p:nth-of-type(2) {
	color:CadetBlue;
}


/**********************/
/* ID = na-een-header */
/**********************/
#na-een-header h2 + p {
	color:MediumOrchid;
}

#na-een-header h4 + p {
	color:FireBrick;
}


/*****************/
/* ID = kinderen */
/*****************/
#kinderen li:nth-of-type(2) li {
	color:RebeccaPurple;
}

#kinderen li:nth-of-type(3) li {
	color:Chocolate;
}


/***********************************/
/* ID = alleen-eerstelijn-kinderen */
/***********************************/
#alleen-eerstelijn-kinderen > ul > li:nth-of-type(2) > ul > li {
	color:PeachPuff;
}


/****************/
/* ID = ik-niet */
/****************/
#ik-niet *:not(:nth-of-type(2)) {
   color:Tomato;
}


/****************************/
/* ID = broertjes-en-zusjes */
/****************************/
#broertjes-en-zusjes p ~ p {
   color:ForestGreen;
}


/*********************/
/* ID = eerste-regel */
/*********************/
#eerste-regel p::first-line {
   font-weight:bold;
	color:hotpink;
}


/**********************/
/* ID = eerste-letter */
/**********************/
#eerste-letter p::first-letter {
   float:left;
	margin-right:.5rem;
	font-size:4.6em;
	line-height:1em;
	
	font-weight:bold;
	color:white;
	background-image:linear-gradient(45deg, SteelBlue,SpringGreen);
}


/**************/
/* ID = zebra */
/**************/
#zebra div {
   height:1.5em;
}

/* your code */
#zebra div:nth-of-type(odd) {
	background-color:rgb(57,53,49);
}

#zebra div:nth-of-type(even) {
	background-color:rgb(225,221,217);
}


/****************/
/* ID = zebra2x */
/****************/
#zebra2x div {
	height:1.5em;;
}

/* your code */
#zebra2x div:nth-of-type(4n + 1), #zebra2x div:nth-of-type(4n + 2) {
	background-color:var(--main-color);
	border-bottom:dotted 1px var(--main-background);
}

#zebra2x div:nth-of-type(4n + 3), #zebra2x div:nth-of-type(4n + 4) {
	background-color:var(--main-background);
	border-bottom:dotted 1px var(--main-color);
}


/**************/
/* ID = clown */
/**************/
#clown div:nth-of-type(4n + 1) { height:.25em; }
#clown div:nth-of-type(4n + 2) { height:1em; }
#clown div:nth-of-type(4n + 3) { height:.5em; }
#clown div:nth-of-type(4n + 4) { height:1.35em; }

#clown div:nth-of-type(5n + 1) { background-color:Crimson; }
#clown div:nth-of-type(5n + 2) { background-color:DodgerBlue; }
#clown div:nth-of-type(5n + 3) { background-color:Gold; }
#clown div:nth-of-type(5n + 4) { background-color:YellowGreen ; }
#clown div:nth-of-type(5n + 5) { background-color:Indigo ; }


/***************/
/* ID = before */
/***************/
#before p::before {
	content:"* ";
	color:Crimson;
}


/************************/
/* ID = before-en-after */
/************************/
#before-en-after p::before {
	content:"* ";
	color:Crimson;
}

#before-en-after p::after {
	content:" *";
	color:DodgerBlue;
}


/**************************/
/* ID = tellen-met-before */
/**************************/
#tellen-met-before {
	counter-reset:mijn-teller;
}

#tellen-met-before p {
	counter-increment:mijn-teller;
}

#tellen-met-before p::before {
	content:counter(mijn-teller);
	display:inline-block;
	width:1em;
	line-height:1em;
	margin-right:.25em;
	text-align:center;
	background-color:DodgerBlue;
	color:white;
	border-radius:20%;
}