/* 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 */


/*******************/
/* COLORS en FONTS */
/*******************/

/*****************/
/* ID = eenheden */
/*****************/
#eenheden div {
	background-color:YellowGreen;
	display:flex;
	justify-content:center;
	align-items:center;
   text-align:center;
	margin-top:1em;
}

/* your code */
#eenheden div:nth-of-type(1)  { height:64px; }
#eenheden div:nth-of-type(2)  { height:4em; }
#eenheden div:nth-of-type(3)  { height:4rem; }
#eenheden div:nth-of-type(4)  { height:64px; font-size:.66em; }
#eenheden div:nth-of-type(5)  { height:4em;  font-size:.66em; }
#eenheden div:nth-of-type(6)  { height:4rem; font-size:.66em; }
#eenheden div:nth-of-type(7)  { height:4rem; font-size:.66em; margin-top:1rem }
#eenheden div:nth-of-type(8)  { height:4ex; }
#eenheden div:nth-of-type(9)  { height:4ch; }
#eenheden div:nth-of-type(10) { height:10%; }
#eenheden div:nth-of-type(11) { height:10vw; }
#eenheden div:nth-of-type(12) { height:10vh; }
#eenheden div:nth-of-type(13) { height:10vmin; }
#eenheden div:nth-of-type(14) { height:10vmax; }


/***********************/
/* ID = standaard-font */
/***********************/
#standaard-font, #standaard-font * {
	font-family:Verdana, sans-serif;
   line-height:1.5em;
}


/*******************/
/* ID = google-font*/
/*******************/
#google-font, #google-font * {
	font-family:Merienda, sans-serif;
   line-height:1.5em;
}

#google-font strong, #google-font strong * {
	font-weight:700;
}


/********************/
/* ID = custom-font */
/********************/
@font-face {
   font-family: 'banksia';
   src: url('../fonts/banksia.woff2') format('woff2'),
      url('../fonts/banksia.woff') format('woff');
   font-weight:normal;
   font-style:normal;
}

@font-face {
   font-family: 'banksia-bold';
   src: url('../fonts/banksia-b.woff2') format('woff2'),
      url('../fonts/banksia-b.woff') format('woff');
   font-weight:bold;
   font-style:normal;
}

#custom-font, #custom-font * {
	font-family:banksia, Tahoma, sans-serif;
   line-height:1.5em;
}

#custom-font strong, #custom-font strong * {
	font-family:banksia-bold, Tahoma, sans-serif;
}


/*******************************/
/* ID = opcity-vs-rgba-vs-hsla */
/*******************************/
#opcity-vs-rgba-vs-hsla {
   display:grid;
   grid-gap:5%;
}

#opcity-vs-rgba-vs-hsla div {
   display:flex;
   justify-content:center;
   align-items:center;
}

/* your code */
#opcity-vs-rgba-vs-hsla div:first-of-type {
	background-color:YellowGreen;
}

#opcity-vs-rgba-vs-hsla div:nth-of-type(2) {
	background-color:YellowGreen;
	opacity:.75;
}

#opcity-vs-rgba-vs-hsla div:nth-of-type(3) {
	background-color:rgba(154,205,50,.75)
}

#opcity-vs-rgba-vs-hsla div:last-of-type {
	background-color:hsla(80,61%,50%,.75);
}


/*************/
/* ID = rand */
/*************/
#rand div {
	width:60%; height:60%;
   margin:20%;
    
    /* your code */
	border-style:solid;
	border-width:1em;
	border-color:YellowGreen;
}


/*************************/
/* ID = onderbroken-rand */
/*************************/
#onderbroken-rand div {
	width:60%; height:60%;
   margin:20%;
    
    /* your code */
	border-style:dashed;
	border-width:1em;
	border-color:YellowGreen;
}


/***********************/
/* ID = ongelijke-rand */
/***********************/
#ongelijke-rand div {
	width:60%; height:60%;
   margin:20%;
    
    /* your code */
	border-style:solid;
	border-width:1em 1em 3em 3em;
	border-color:YellowGreen;
}


/*************************/
/* ID = meerkleuren-rand */
/*************************/
#meerkleuren-rand div {
	width:60%; height:60%;
   margin:20%;
    
    /* your code */
	border-style:solid;
	border-width:1em 3em 3em 1em;
	border-color:rgb(51,151,26) rgb(51,151,26) YellowGreen YellowGreen;
}


/*************************/
/* ID = background-image */
/*************************/
#background-image {
	background-image:url(../images/image-background.jpg);
}


/**************************/
/* ID = background-center */
/**************************/
#background-center {
	background-image:url(../images/image-background.jpg);
	/* your code */
   background-position:center;
}


/************************/
/* ID = background-size */
/************************/
/* maat is 50% */
#background-size {
	background-image:url(../images/image-background.jpg);
   background-position:center;
	/* your code */
   background-size:50%;
}


/**************************/
/* ID = background-repeat */
/**************************/
#background-repeat {
	background-image:url("../images/image-background.jpg");
   background-position:center;
   background-size:50%;
	/* your code */
   background-repeat:repeat-x;
}


/***********************************/
/* ID = background-image-and-color */
/***********************************/
#background-image-and-color {
   background-image:url("../images/image-background.jpg");
   background-position:center;
   background-size:50%;
   background-repeat:repeat-x;
	/* your code */
	background-color:YellowGreen;
}


/****************************/
/* ID = background-position */
/****************************/
#background-position {
	background-color:YellowGreen;
   background-image:url("../images/image-background.jpg");
   background-size:50%;
   background-repeat:no-repeat;
	/* your code */
	background-position:right bottom;
}


/***********************************/
/* ID = background-size-is-contain */
/***********************************/
#background-size-is-contain {
	background-color:YellowGreen;
	background-image:url("../images/image-rechthoek.jpg");
   background-position:center;
   background-repeat:no-repeat;
	/* your code */
	background-size:contain;
}


/**********************/
/* ID = size-is-cover */
/**********************/
#background-size-is-cover {
   background-color:YellowGreen;
   background-image:url("../images/image-rechthoek.jpg");
   background-position:center;
	/* your code */
   background-size:cover;
}


/***********************************/
/* ID = background-origin-and-clip */
/***********************************/
#background-origin-and-clip {
   padding:0;
   display:flex;
   flex-wrap:wrap;
}

#background-origin-and-clip div {
   flex-basis:50%;
   padding:1em;
   background:url(../images/image-background.jpg) center / cover no-repeat;
	border:dashed 1em Yellowgreen;
}

#background-origin-and-clip div:nth-child(2) {
	border-color:rgb(51,151,26);
   /* your code */
	background-origin:border-box;
}

#background-origin-and-clip div:nth-child(3) {
	border-color:rgb(51,151,26);
   /* your code */
   background-clip:content-box;
}

#background-origin-and-clip div:nth-child(4) {
   /* your code */
	background-origin:border-box;
   background-clip:content-box;
}


/****************/
/* ID = verloop */
/****************/
#verloop {
	background-image:linear-gradient(YellowGreen, rgb(51,151,26));
}


/****************************/
/* ID = meerkleuren-verloop */
/****************************/
#meerkleuren-verloop {
	background-image:linear-gradient(YellowGreen, rgb(51,151,26), YellowGreen);
}


/*********************************/
/* ID = verloop-naar-transparant */
/*********************************/
#verloop-naar-transparant {
	background-image:linear-gradient(YellowGreen, transparent);
}


/******************************/
/* ID = ongelijkmatig-verloop */
/******************************/
#ongelijkmatig-verloop {
	background-image:linear-gradient(YellowGreen 50%, rgb(51,151,26) 75%);
}


/***********************/
/* ID = harde-overgang */
/***********************/
#harde-overgang {
	background-image:linear-gradient(YellowGreen 50%, rgb(51,151,26) 50%);
}


/***********************/
/* ID = schuin-verloop */
/***********************/
#schuin-verloop {
	background-image:linear-gradient(135deg, YellowGreen 37.5%, rgb(51,151,26) 62.5%);
}


/*********************/
/* ID = rond-verloop */
/*********************/
#rond-verloop {
	background-image:radial-gradient(YellowGreen 25%, rgb(51,151,26) 75%);
}


/*************************/
/* ID = rond-vanuit-hoek */
/*************************/
#rond-vanuit-hoek {
	background-image:radial-gradient(ellipse at top left, YellowGreen 58.2%, rgb(51,151,26) 83.2%);
}


/*************************/
/* ID = hard-vanuit-hoek */
/*************************/
#hard-vanuit-hoek {
	background-image:radial-gradient(ellipse at top left, YellowGreen 70.7%, rgb(51,151,26) 70.7%);
}


/*********************/
/* ID = harde-lijnen */
/*********************/
#harde-lijnen {
	background-image:linear-gradient(45deg, Transparent 46.75%, rgb(51,151,26) 46.75%, rgb(51,151,26) 53.25%, Transparent 53.25%);
}


/*********************/
/* ID = ronde-lijnen */
/*********************/
#ronde-lijnen {
	background-image:radial-gradient(transparent 43.75%, rgb(51,151,26) 43.75%, rgb(51,151,26) 56.25%, YellowGreen 56.25%);
}


/**************************/
/* ID = twee-maal-verloop */
/**************************/
#twee-maal-verloop {
	background-image:
     radial-gradient(transparent 43.75%, rgb(51,151,26) 43.75%, rgb(51,151,26) 56.25%, YellowGreen 56.25%),
     linear-gradient(45deg, Transparent 46.75%, rgb(51,151,26) 46.75%, rgb(51,151,26) 53.25%, Transparent 53.25%);
}


/*******************************/
/* ID = achtergrond-en-verloop */
/*******************************/
#achtergrond-en-verloop {
	background-image:
      radial-gradient(transparent 43.75%, rgb(51,151,26) 43.75%, rgb(51,151,26) 56.25%, YellowGreen 56.25%),
      url(../images/image-background.jpg);
   background-size:cover;
}


/**************************/
/* ID = herhalend-verloop */
/**************************/
#herhalend-verloop {
	background-image:repeating-linear-gradient(
		YellowGreen,
		rgb(51,151,26) 8.333333333333%,
      YellowGreen 16.666666666667%
	);
}


/*********************************/
/* ID = herhalend-schuin-verloop */
/*********************************/
#herhalend-schuin-verloop {
	background-image:repeating-linear-gradient(
		45deg,
		YellowGreen,
		rgb(51,151,26) 6.25%,
      YellowGreen 12.5%
	);
}


/********************************/
/* ID = herhalende-harde-lijnen */
/********************************/
#herhalende-harde-lijnen {
	background-image:repeating-linear-gradient(
		45deg,
		YellowGreen, YellowGreen 3.125%,
		rgb(51,151,26) 3.125%, rgb(51,151,26) 9.375%,
      YellowGreen 9.375%, YellowGreen 12.5%
	);
}


/*********************************/
/* ID = herhalende-harde-cirkels */
/*********************************/
#herhalende-harde-cirkels {
	background-image:repeating-radial-gradient(
		YellowGreen,
		YellowGreen 12.5%,
		rgb(51,151,26) 12.5%,
		rgb(51,151,26) 25%
	);
}


/***********************/
/* ID = offset-cirkels */
/***********************/
#offset-cirkels {
	background-image:repeating-radial-gradient(
		circle at 50% 100%,
		YellowGreen,
		YellowGreen 7.589466384404109%,
		rgb(51,151,26) 7.589466384404109%,
		rgb(51,151,26) 15.178932768808219% 
	);
}


/****************************/
/* ID = lijnen-over-plaatje */
/****************************/
#lijnen-over-plaatje {
	background-image:repeating-linear-gradient(
      45deg,
      yellowgreen, yellowgreen 3.125%,
      transparent 3.125%, transparent 9.375%,
      yellowgreen 9.375%, yellowgreen 12.5%
	),
	url(../images/image-background.jpg);
	background-size:cover;
}


/***************************/
/* ID = meer-achtergronden */
/***************************/
#meer-achtergronden {
   background-image:
      url(../images/image-orientation-portrait.jpg), 
      url(../images/image-orientation-landscape.jpg),
      url(../images/image-stars.jpg);
	background-repeat:no-repeat;
	background-size:50%, 50%, 100%;
	background-position:top left, bottom right, center;
}


/**************************/
/* ID = vier-ronde-hoeken */
/**************************/
#vier-ronde-hoeken {
	background-image:
      radial-gradient(ellipse at top left, YellowGreen 70%, transparent 70%),
      radial-gradient(ellipse at top right, YellowGreen 70%, transparent 70%),
      radial-gradient(ellipse at bottom right, YellowGreen 70%, transparent 70%),
      radial-gradient(ellipse at bottom left, YellowGreen 70%, transparent 70%);
	background-size:2.5em 2.5em;
	background-repeat:no-repeat;
	background-position:left top, right top, right bottom, left bottom;
}


/**************************/
/* ID = vier-ronde-hapjes */
/**************************/
#vier-ronde-hapjes {
   background-color:transparent;
	background-image:
      radial-gradient(ellipse at top left, transparent 2.5em, white 2.5em),
      radial-gradient(ellipse at top right, transparent 2.5em, white 2.5em),
      radial-gradient(ellipse at bottom right, transparent 2.5em, white 2.5em),
      radial-gradient(ellipse at bottom left, transparent 2.5em, white 2.5em);
	background-size:51% 51%;
	background-repeat:no-repeat;
	background-position:left top, right top, right bottom, left bottom;
}


/**************************/
/* ID = herhalende-pijlen */
/**************************/
#herhalende-pijlen {
	padding:0;
}

#herhalende-pijlen div {
	width:80%; height:20%;
   margin:40% 10%;
   border-radius:5em;
	
	/*your code*/
	background-image:
		repeating-linear-gradient(
			45deg,
			YellowGreen, YellowGreen 11.1%,
			rgb(51,151,26) 11.1%, rgb(51,151,26) 22.2%
		),
		repeating-linear-gradient(
			135deg,
			YellowGreen, YellowGreen 11.1%,
			rgb(51,151,26) 11.1%, rgb(51,151,26) 22.2%
		),

		/* om de witte streep door afronding op te vullen */
		repeating-linear-gradient(
			90deg,
			YellowGreen, YellowGreen 12.5%,
			rgb(51,151,26) 12.5%, rgb(51,151,26) 25%
		);
	
	background-size:100% 50%, 100% 50%, 100% 100%;
	background-repeat:no-repeat;
	background-position:left top, left bottom, left center;
}


/******************************/
/* ID = achtergrond-decoratie */
/******************************/
#achtergrond-decoratie {
   display:grid;
   grid-gap:5%;
}

#achtergrond-decoratie div {
   display:flex;
   align-items:center;
	background-color:YellowGreen;
    
	/* your code*/
   padding-left:3em;
	background-size:2em auto;
	background-position:.5em center;
	background-repeat:no-repeat;
}

#achtergrond-decoratie div:nth-of-type(1) {
    /* your code*/
    background-image:url(../images/icon-cmd-cat.svg);
}

#achtergrond-decoratie div:nth-of-type(2) {
    /* your code*/
    background-image:url(../images/icon-cmd-pizza.svg);
}

#achtergrond-decoratie div:nth-of-type(3) {
    /* your code*/
    background-image:url(../images/icon-cmd-kaarten.svg);
}

#achtergrond-decoratie div:nth-of-type(4) {
    /* your code*/
    background-image:url(../images/icon-cmd-onderbroek.svg);
}


/******************/
/* ID = regenboog */
/******************/
#regenboog {
	background-image:
		radial-gradient(ellipse at center center, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 70% ),
		radial-gradient(ellipse at bottom center, Yellowgreen 0%, green 70%, transparent 70% ),
		radial-gradient(ellipse at center, 
			transparent 40%, 
			DarkOrchid 40%, DarkOrchid 45%, 
			dodgerblue 45%, dodgerblue 50%, 
			Yellowgreen 50%, Yellowgreen 55%,
			Gold 55%, Gold 60%,
			DarkOrange 60%, DarkOrange 65%,
			Crimson 65%, Crimson 70%,
			transparent 70%), 
		linear-gradient(to bottom, dodgerblue 0%, LightSkyBlue 100%);
	background-repeat:no-repeat;
	background-size:50% 50%, 250% 40%, 90% 90%, 100% 70%;
	background-position:25% 25%, center bottom, center 200%, center top;
}