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


/****************/
/* POSITIONEREN */
/****************/

/**************/
/* ID = float */
/**************/
#float img {
   width:45%;
   /* your code */
   float:left;
   margin: .25em .5em 0 0;
}

#float p {
	margin-top:0;
}

#float p:first-of-type::first-line {
	font-weight:700;
}


/*************************/
/* ID = floating-blokjes */
/*************************/
/* maat 20%, marge 10% 0 0 10% */
#floating-blokjes {
	padding:0;
}

#floating-blokjes div {
   width:20%; height:20%;
   background-color:Gold;
   border-radius:30%;
   /* your code */
   float:left;
   margin:10% 0 0 10%;
}


/**********************************/
/* ID = verplaatsen-met-transform */
/**********************************/
#verplaatsen-met-transform p {
	margin-top:0;
}

#verplaatsen-met-transform p span:first-of-type {
   background-color:gold;
   /* your code */
   display:inline-block;
   transform:translate(.5em, .5em);
}

#verplaatsen-met-transform p span:last-of-type {
   background-color:orange;
   /* your code */
   display:inline-block;
   transform:translate(20%, 20%);
}


/*********************************/
/* ID = verplaatsen-met-relative */
/*********************************/
#verplaatsen-met-relative p {
	margin-top:0;
}

#verplaatsen-met-relative p span:first-of-type {
	background-color:gold;
	/* your code */
	position:relative;
	left:.5em; top:.5em;
}

#verplaatsen-met-relative p span:last-of-type {
	background-color:orange;
	/* your code */
	position:relative;
	left:20%; top:20%;
}


/*********************************/
/* ID = verplaatsen-met-absolute */
/*********************************/
#verplaatsen-met-absolute p {
	margin-top:0;
}

#verplaatsen-met-absolute p span:first-of-type {
   background-color:gold;
   /* your code */
   position:absolute;
   left:.5em; top:.5em;
}

#verplaatsen-met-absolute p span:last-of-type {
	background-color:orange;
	/* your code */
	position:absolute;
	left:20%; top:20%;
}


/*****************/
/* ID = onderaan */
/*****************/
#onderaan div {
	background-color:Gold;
	/* om text te centreren */
	display:flex;
	justify-content:center;
	align-items:center;
	/* your code */
	position:absolute;
	width:100%; height:3em;
	left:0; bottom:0;
}


/*******************/
/* ID = linkerkant */
/*******************/
#linkerkant div {
   background-color:Gold;
   display:flex;
   justify-content:center;
   align-items:center;
   /* om text te te draaien*/
   writing-mode:vertical-lr;
   /* your code */
   position:absolute;
   left:0; right:80%;
   top:0; bottom:0;
}


/********************/
/* ID = rechtsboven */
/********************/
#rechtsboven div {
   background-color:Gold;
   display:flex;
   justify-content:center;
   align-items:center;
   /* your code */
   position:absolute;
   left:50%; right:0;
   top:0; bottom:50%;
}


/*****************************/
/* ID = linksonder-met-marge */
/*****************************/
/* maat 30 x 30 %, marge 10% */
#linksonder-met-marge div {
   background-color:Gold;
   border-radius:30%;
   display:flex;
   justify-content:center;
   align-items:center;
   /* your code */
   position:absolute;
   left:10%; right:60%;
   top:60%; bottom:10%;
}


/********************/
/* ID = vier-hoeken */
/********************/
/* maat 4x4em, marges 10% */
#vier-hoeken div {
   width:20%; height:20%;
   background-color:Gold;
   border-radius:30%;
   display:flex;
   justify-content:center;
   align-items:center;
}

#vier-hoeken div:nth-of-type(1) {
   /* your code */
   position:absolute;
   left:10%; top:10%;
}
#vier-hoeken div:nth-of-type(2) {
   /* your code */
   position:absolute;
   right:10%; top:10%;
}
#vier-hoeken div:nth-of-type(3) {
   /* your code */
   position:absolute;
   left:10%; bottom:10%;
}
#vier-hoeken div:nth-of-type(4) {
   /* your code */
   position:absolute;
   right:10%; bottom:10%;
}


/**********************************/
/* ID = centreren-met-percentages */
/**********************************/
/* maat 30 x 30 %, positie midden midden */
#centreren-met-percentages div {
   width:30%; height:30%;
   background-color:Gold;
   border-radius:30%;
   display:flex;
   justify-content:center;
   align-items:center;
   /* your code */
   position:absolute;
   left:35%; top:35%;
}


/********************************************/
/* ID = centreren-met-position-en-transform */
/********************************************/
/* maat 6 x 6 em, positie midden midden */
#centreren-met-position-en-transform div {
   width:6em; height:6em;
   background-color:Gold;
   border-radius:30%;
   display:flex;
   justify-content:center;
   align-items:center;
   /* your code */
   position:absolute;
   left:50%; top:50%;
   transform:translate(-50%, -50%);
}


/****************************************/
/* ID = centreren-met-position-met-calc */
/****************************************/
/* maat 6 x 6 em, positie midden midden */
#centreren-met-position-met-calc div {
   width:6em; height:6em;
   background-color:Gold;
   border-radius:30%;
   display:flex;
   justify-content:center;
   align-items:center;
   /* your code */
   position:absolute;
   left:calc(50% - 3em); top:calc(50% - 3em);
}


/***************************/
/* ID = centreren-met-flex */
/***************************/
/* maat 6 x 6 em, positie midden midden */
/* alvast beetje flex straks meer*/
#centreren-met-flex {
	/* your code */
	display:flex;
	justify-content:center;
	align-items:center;
}

#centreren-met-flex div {
	width:6em; height:6em;
	background-color:Gold;
	border-radius:30%;
	display:flex;
	justify-content:center;
	align-items:center;
}


/***************************/
/* ID = centreren-met-grid */
/***************************/
/* maat 6 x 6 em, positie midden midden */
/* alvast beetje grid straks meer*/
#centreren-met-grid {
	/* your code */
	display:grid;
	justify-content:center;
	align-items:center;
}

#centreren-met-grid div {
	width:6em; height:6em;
	background-color:Gold;
	border-radius:30%;
	display:flex;
	justify-content:center;
	align-items:center;
}


/****************/
/* ID = z-index */
/****************/
#z-index div {
	text-align:center;
	border-radius:50%;
}

#z-index div:nth-of-type(1) {
   background-color:darkorange;
   width:20%; height:20%;
   /* your code */
   position:absolute;
   left:40%; top:40%;
   z-index:3;
}
#z-index div:nth-of-type(2) {
   background-color:orange;
   width:40%; height:40%;
   /* your code */
   position:absolute;
   left:30%; top:30%;
   z-index:2;
}
#z-index div:nth-of-type(3) {
   background-color:Gold;
   width:60%; height:60%;
   /* your code */
   position:absolute;
   left:20%; top:20%;
}


/*****************/
/* ID = overflow */
/*****************/
#overflow {
	display:grid;
	grid-template-columns:50% 50%;
	grid-template-rows:50% 50%;
	grid-gap:2px;
	overflow:hidden;
}

#overflow div {
   padding:.75rem;
   font-size:.66em;
   background-color:gold;
}

#overflow div:nth-of-type(1) {
   /* your code */
   overflow:auto;
}

#overflow div:nth-of-type(2) {
   /* your code */
   overflow:hidden;
}

#overflow div:nth-of-type(3) {
   /* your code */
   overflow:scroll;
}

#overflow div:nth-of-type(4) {
   /* your code */
   overflow:visible;
}


/*****************************/
/* ID = transparante-overlap */
/*****************************/
#transparante-overlap figure {
	position:relative;
	margin:0;
}

#transparante-overlap img {
   /* your code */
   display:block;
   width:100%;
}

#transparante-overlap figcaption {
   background-color:rgba(255,215,0,.75);
   /* your code */
   position:absolute;
   bottom:-.5em;
   left:1em; right:1em;
   padding:.5em;
   text-align:center;
}


/*****************************/
/* ID = transparante-overlay */
/*****************************/
#transparante-overlay figure {
   position:relative;
   margin:0;
}

#transparante-overlay img {
   /* your code */
   display:block;
   width:100%;
}

#transparante-overlay figcaption {
   background-color:rgba(255,215,0,.75);
   /* your code */
   position:absolute;
   left:1em; right:1em; top:1em; bottom:1em;
   display:flex;
   justify-content:center;
   align-items:center;
   text-align:center;
   white-space:pre-line;
}


/********************/
/* ID = op-zun-kant */
/********************/
/* search CSS writing-mode */
#op-zun-kant figure {
   position:relative;
   margin:0;
}

#op-zun-kant img {
   /* your code */
   display:block;
   width:100%;
}

#op-zun-kant figcaption {
   background-color:rgba(255,215,0,.75);
   /* your code */
   position:absolute;
   left:0; bottom:0; top:0;
   margin:0; padding:.5em;
   text-align:center;
   writing-mode:vertical-lr;
   transform:rotate(180deg);
}


/************************/
/* ID = overflow-hidden */
/************************/
#overflow-hidden figure {
   position:relative;
   margin:0;
   border-radius:50%;
   overflow:hidden;
}

#overflow-hidden img {
   /* your code */
   display:block;
   width:100%;
}

#overflow-hidden figcaption {
   background-color:rgba(255,215,0,.875);
   /* your code */
   position:absolute;
   width:8em;
   left:calc(50% - 4em); top:0;
   margin:0; padding:.5em .75em;
   text-align:center;
}


/***************************/
/* ID = transform-volgorde */
/***************************/
/* de volgorde waarin transforms gedeclareerd worden doet er toe */
/* de transform functies worden van links naar rechts uitgevoerd */
#transform-volgorde div {
	position:absolute;
	width:20%; height:20%;
	padding:.125em;
	font-size:.66em;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	z-index:2;
	transition:.75s;
}

/* de te verplaatsen elementen */
#transform-volgorde div:nth-of-type(-n+2) {
	background-color:gold;
}

#transform-volgorde div:nth-of-type(1) {
	left:15%; top:40%;
	/* your code */
	box-shadow:.4rem .2rem .3rem rgba(0,0,0,.5);
	transform:rotate(45deg) translateY(-100%) translateZ(.02em);
}

#transform-volgorde div:nth-of-type(2) {
	right:15%; top:40%;
	/* your code */
	box-shadow:.4rem .2rem .3rem rgba(0,0,0,.5);
	transform:translateY(-100%) rotate(45deg) translateZ(.02em);
}

/* hover effect */
#transform-volgorde:hover div:nth-of-type(-n+2) {
	transform:none;
	box-shadow:none;
}

/* de ghost - om de originele positie te tonen */
#transform-volgorde div:nth-last-of-type(-n+2) {
	color:rgba(55,51,47,.5);
	background-color:var(--main-background);
	box-shadow:inset .15rem .15rem .3rem rgba(0,0,0,.675);
	z-index:1;
}

#transform-volgorde div:nth-of-type(3) {
	left:15%; top:40%;
}

#transform-volgorde div:nth-of-type(4) {
	right:15%; top:40%;
}


/*************************/
/* ID = transform-origin */
/*************************/
/* met transform-origin verplaats je het punt op het element ten opzichte waarin transforms worden uitgevoerd */
/* standaard is dat punt het midden van het element */
/* met transform-origin kun je het punt zelfs buiten het element leggen */
#transform-origin div {
	position:absolute;
	width:20%; height:20%;
	padding:.125em;
	font-size:.66em;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	z-index:2;
	transition:.75s;
}

/* de te verplaatsen elementen */
#transform-origin div:nth-of-type(-n+2) {
	background-color:gold;
}

#transform-origin div:nth-of-type(1) {
	left:15%; top:40%;
	/* your code */
	box-shadow:.4rem .2rem .3rem rgba(0,0,0,.5);
	transform-origin:center center; /* de default */
	transform:rotate(45deg) translateZ(.02em);
}

#transform-origin div:nth-of-type(2) {
	right:15%; top:40%;
	/* your code */
	box-shadow:.4rem .2rem .3rem rgba(0,0,0,.5);
	transform-origin:left top;
	transform:rotate(45deg) translateZ(.02em);
}

/* hover effect */
#transform-origin:hover div:nth-of-type(-n+2) {
	transform:none;
	box-shadow:none;
}

/* de ghost - om de originele positie te tonen */
#transform-origin div:nth-last-of-type(-n+2) {
	color:rgba(55,51,47,.5);
	background-color:var(--main-background);
	box-shadow:inset .15rem .15rem .3rem rgba(0,0,0,.675);
	z-index:1;
}

#transform-origin div:nth-of-type(3) {
	left:15%; top:40%;
}

#transform-origin div:nth-of-type(4) {
	right:15%; top:40%;
}


/**********************/
/* ID = in-een-rondje */
/**********************/
#in-een-rondje ul {
	position:absolute;
	left:12.5%; right:12.5%; top:12.5%; bottom:12.5%;
	padding:0;
	list-style:none;
	background:url("../images/image-4.jpg") center / contain;
	border-radius:50%;
}

#in-een-rondje li {
	position:absolute;
	width:20%; height:20%;
	left:40%; top:40%;
	text-align:center;
	background-color:gold;
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
	transition:.75s;
}

#in-een-rondje li:nth-of-type(1) {
	/* your code */
	transform:rotate(30deg) translateY(-250%);
}
#in-een-rondje li:nth-of-type(2) {
	/* your code */
	transform:rotate(90deg) translateY(-250%);
}
#in-een-rondje li:nth-of-type(3) {
	/* your code */
	transform:rotate(150deg) translateY(-250%);
}
#in-een-rondje li:nth-of-type(4) {
	/* your code */
	transform:rotate(210deg) translateY(-250%);
}
#in-een-rondje li:nth-of-type(5) {
	/* your code */
	transform:rotate(270deg) translateY(-250%);
}
#in-een-rondje li:nth-of-type(6) {
	/* your code */
	transform:rotate(330deg) translateY(-250%);
}

/* hover effect */
#in-een-rondje:hover li {
	transform:none;
}


/****************************/
/* ID = recht-in-een-rondje */
/****************************/
/* dezelfde transform kan ook 2x */
/* hier is 2x rotate nodig */
#recht-in-een-rondje ul {
	position:absolute;
	left:12.5%; right:12.5%; top:12.5%; bottom:12.5%;
	padding:0;
	list-style:none;
	background:url("../images/image-7.jpg") center / contain;
	border-radius:50%;
}

#recht-in-een-rondje li {
	position:absolute;
	width:20%; height:20%;
	left:40%; top:40%;
	text-align:center;
	background-color:gold;
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
	transition:.75s;
}

#recht-in-een-rondje li:nth-of-type(1) {
	/* your code */
	transform:rotate(30deg) translateY(-250%) rotate(-30deg);
}
#recht-in-een-rondje li:nth-of-type(2) {
	/* your code */
	transform:rotate(90deg) translateY(-250%) rotate(-90deg);
}
#recht-in-een-rondje li:nth-of-type(3) {
	/* your code */
	transform:rotate(150deg) translateY(-250%) rotate(-150deg);
}
#recht-in-een-rondje li:nth-of-type(4) {
	/* your code */
	transform:rotate(210deg) translateY(-250%) rotate(-210deg);
}
#recht-in-een-rondje li:nth-of-type(5) {
	/* your code */
	transform:rotate(270deg) translateY(-250%) rotate(-270deg);
}
#recht-in-een-rondje li:nth-of-type(6) {
	/* your code */
	transform:rotate(330deg) translateY(-250%) rotate(-330deg);
}

/* hover effect */
#recht-in-een-rondje:hover li {
	background-color:gold;
	transform:none;
}


/*****************************/
/* ID = origin-in-een-rondje */
/*****************************/
#origin-in-een-rondje ul {
	position:absolute;
	left:12.5%; right:12.5%; top:12.5%; bottom:12.5%;
	padding:0;
	list-style:none;
	background:url("../images/image-9.jpg") center / contain;
	border-radius:50%;
}

#origin-in-een-rondje li {
	position:absolute;
	width:20%; height:20%;
	left:90%; top:40%;
	text-align:center;
	background-color:gold;
	border-radius:50%;
	display:grid;
	justify-content:center;
	align-items:center;
	transition:.75s;
	/* your code */
	transform-origin:-200% center;
}

#origin-in-een-rondje li:nth-of-type(1) {
	/* your code */
	transform:rotate(-60deg);
}
#origin-in-een-rondje li:nth-of-type(2) {
	/* your code */
	transform:rotate(0deg);
}
#origin-in-een-rondje li:nth-of-type(3) {
	/* your code */
	transform:rotate(60deg);
}
#origin-in-een-rondje li:nth-of-type(4) {
	/* your code */
	transform:rotate(120deg);
}
#origin-in-een-rondje li:nth-of-type(5) {
	/* your code */
	transform:rotate(180deg);
}
#origin-in-een-rondje li:nth-of-type(6) {
	/* your code */
	transform:rotate(240deg);
}

/* hover effect */
#origin-in-een-rondje:hover li {
	background-color:gold;
	transform:none;
}


/********************/
/* ID = object-fit  */
/********************/
#object-fit {
	padding:0;
	display:grid;
	grid-template-columns:50% 50%;
	grid-template-rows:50% 50%;
}

#object-fit div {
	position:relative;
	background-color:gold;
}

#object-fit :nth-of-type(1) img {
	/* your code */
	width:100%; height:100%;
	object-fit:contain;
}

#object-fit :nth-of-type(2) img {
	/* your code */
	width:100%; height:100%;
	object-position:left center;
	object-fit:contain;
}

#object-fit :nth-of-type(3) img {
	/* your code */
	width:100%; height:100%;
	object-fit:cover;
}

#object-fit :nth-of-type(4) img {
	/* your code */
	width:100%; height:100%;
	object-position:center top;
	object-fit:cover;
}

/* de labels */
#object-fit div::after {
	content:attr(class);
	position:absolute;
	left:50%; bottom:.5em;
	padding:0 .25rem .0625rem;
	white-space:nowrap;
	font-size:.66em;
	line-height:1em;
	text-align:center;
	transform:translateX(-50%);
	transition:.75s;
}

#object-fit:hover div::after {
	background-color:gold;
}


/*****************************/
/* ID = shape-outside-circle */
/*****************************/
#shape-outside-circle div {
   float:left;
   width:45%; height:45%;
   padding:.75em;
   background-color:gold;
   border-radius:50%;
   display:flex;
   justify-content:center;
   align-items:center;
   /* your code */
   margin:0 .75em 0 0;
   shape-outside: circle(50%);
}

#shape-outside-circle p {
	margin-top:0;
}


/******************************/
/* ID = shape-outside-ellipse */
/******************************/
#shape-outside-ellipse div {
   float:left;
   width:30%; height:100%;
   writing-mode:vertical-lr;
   background-color:gold;
   border-radius:0 100% 100% 0 / 0 50% 50% 0;
   display:flex;
   justify-content:center;
   align-items:center;
   /* your code */
   margin:0 .75em 0 0;
   shape-outside: ellipse(100% 50% at 0 50%);
}

#shape-outside-ellipse p {
	margin-top:0;
}


/******************************/
/* ID = shape-outside-polygon */
/******************************/
#shape-outside-polygon img {
   float:left;
   width:auto; height:45%;
   background-color:rgba(255,165,0,0);
   /* your code */
   margin:0 .75em 0 0;
   shape-outside: polygon(
      43.5% 0,
      56.5% 0,
      99.5% 86%,
      92.5% 100%,
      7.5% 100%,
      .5% 86%,
      43.5% 0
   );
   -webkit-clip-path: polygon(
      43.5% 0,
      56.5% 0,
      99.5% 86%,
      92.5% 100%,
      7.5% 100%,
      .5% 86%,
      43.5% 0
   );
   clip-path: polygon(
      43.5% 0,
      56.5% 0,
      99.5% 86%,
      92.5% 100%,
      7.5% 100%,
      .5% 86%,
      43.5% 0
   );
   transition:1s;
}

/* hover effect */
#shape-outside-polygon:hover img {
   background-color:rgba(255,165,0,1);
   shape-outside:polygon(
      0 0,
      100% 0,
      100% 86%,
      100% 100%,
      0 100%,
      0 86%,
      0 0
   );
   -webkit-clip-path: polygon(
      0 0,
      100% 0,
      100% 86%,
      100% 100%,
      0 100%,
      0 86%,
      0 0
   );
   clip-path: polygon(
      0 0,
      100% 0,
      100% 86%,
      100% 100%,
      0 100%,
      0 86%,
      0 0
   );
}

#shape-outside-polygon p {
	margin-top:0;
}


/*********************/
/* ID = foto-collage */
/*********************/
#foto-collage {
	overflow:hidden;
}

#foto-collage ul {
   position:absolute;
   left:33.3%; right:33.3%;
   top:33.3%; bottom:33.3%;
   padding:0;
   list-style:none;
}

#foto-collage li {
   position:absolute;
   width:100%; height:100%;
   padding:.375em;
   background:white;
   box-shadow:2px 2px 4px 1px rgba(0,0,0,.25);
   transition:1s;
}

#foto-collage li img {
	display:block;
	width:100%;	
}

#foto-collage li:nth-of-type(1) {
   /*your code*/
   transform:translate(0, 90%) rotate(2deg) scale(.84);
}
#foto-collage li:nth-of-type(2) {
   /*your code*/
   transform:translate(75%, -60%) rotate(5deg) scale(.86);
}
#foto-collage li:nth-of-type(3) {
   /*your code*/
   transform:translate(-75%, 0) rotate(10deg) scale(.88);
}
#foto-collage li:nth-of-type(4) {
   /*your code*/
   transform:translate(0, -75%) rotate(5deg) scale(.9);
}
#foto-collage li:nth-of-type(5) {
   /*your code*/
   transform:translate(90%, 0) rotate(2deg) scale(.92);
}
#foto-collage li:nth-of-type(6) {
   /*your code*/
   transform:translate(-75%, -60%) rotate(-2deg) scale(.94);
}
#foto-collage li:nth-of-type(7) {
   /*your code*/
   transform:translate(75%, 75%) rotate(-5deg) scale(.96);
}
#foto-collage li:nth-of-type(8) {
   /*your code*/
   transform:translate(-90%, 60%) rotate(-10deg) scale(.98);
}
#foto-collage li:nth-of-type(9) {
   /*your code*/
   transform:translate(0,0) rotate(-5deg) scale(1);
}

/* hover effect */
#foto-collage:hover li:nth-of-type(1) {
   /*your code*/
   transform:translate(-100%, -100%);
}
#foto-collage:hover li:nth-of-type(2) {
   /*your code*/
   transform:translate(0, -100%);
}
#foto-collage:hover li:nth-of-type(3) {
   /*your code*/
   transform:translate(100%, -100%);
}
#foto-collage:hover li:nth-of-type(4) {
   /*your code*/
   transform:translate(-100%, 0);
}
#foto-collage:hover li:nth-of-type(5) {
   /*your code*/
   transform:translate(0, 0);
}
#foto-collage:hover li:nth-of-type(6) {
   /*your code*/
   transform:translate(100%, 0);
}
#foto-collage:hover li:nth-of-type(7) {
   /*your code*/
   transform:translate(-100%, 100%);
}
#foto-collage:hover li:nth-of-type(8) {
   /*your code*/
   transform:translate(0%, 100%);
}
#foto-collage:hover li:nth-of-type(9) {
   /*your code*/
   transform:translate(100%,100%);
}


/**************/
/* ID = kubus */
/**************/
#kubus > div {
	--maat:6em;
   position: absolute;
   width:var(--maat); height:var(--maat);
   left:calc(50% - var(--maat) / 2 ); top:calc(50% - var(--maat) / 2 );
	perspective:calc(var(--maat) * 3 );
	transform-style:preserve-3d;
}

#kubus div div {
	position:absolute;
	width:100%; height:100%;
	background-image:linear-gradient(135deg,#FFD70099 25%,#FF8C0099 75%);
}

#kubus div div:nth-of-type(1) {
	transform:rotateY(0deg) translateZ(calc(var(--maat) / 2));
}
#kubus div div:nth-of-type(2) {
	transform:rotateY(90deg) translateZ(calc(var(--maat) / 2));
}
#kubus div div:nth-of-type(3) {
	transform:rotateY(180deg) translateZ(calc(var(--maat) / 2));
}
#kubus div div:nth-of-type(4) {
	transform:rotateY(270deg) translateZ(calc(var(--maat) / 2));
}


/************************/
/* ID = kubus-van-opzij */
/************************/
#kubus-van-opzij > div {
	--maat:6em;
   position: absolute;
   width:var(--maat); height:var(--maat);
   left:calc(50% - var(--maat) / 2 ); top:calc(50% - var(--maat) / 2 );
	perspective:calc(var(--maat) * 3 );
	transform-style:preserve-3d;
}

#kubus-van-opzij div div {
	position:absolute;
	width:100%; height:100%;
	background-image:linear-gradient(135deg,#FFD70099 25%,#FF8C0099 75%);
}

#kubus-van-opzij div div:nth-of-type(1) {
	transform:rotateY(30deg) translateZ(calc(var(--maat) / 2));
}
#kubus-van-opzij div div:nth-of-type(2) {
	transform:rotateY(120deg) translateZ(calc(var(--maat) / 2));
}
#kubus-van-opzij div div:nth-of-type(3) {
	transform:rotateY(210deg) translateZ(calc(var(--maat) / 2));
}
#kubus-van-opzij div div:nth-of-type(4) {
	transform:rotateY(300deg) translateZ(calc(var(--maat) / 2));
}


/************************/
/* ID = kubus-van-boven */
/************************/
#kubus-van-boven > div {
	--maat:6em;
   position: absolute;
   width:var(--maat); height:var(--maat);
   left:calc(50% - var(--maat) / 2 ); top:calc(50% - var(--maat) / 2 );
	perspective-origin:center calc(var(--maat) / -2 );
	perspective:calc(var(--maat) * 3 );
	transform-style:preserve-3d;
}

#kubus-van-boven div div {
	position:absolute;
	width:100%; height:100%;
	background-image:linear-gradient(135deg,#FFD70099 25%,#FF8C0099 75%);
}

#kubus-van-boven div div:nth-of-type(1) {
	transform:rotateY(30deg) translateZ(calc(var(--maat) / 2));
}
#kubus-van-boven div div:nth-of-type(2) {
	transform:rotateY(120deg) translateZ(calc(var(--maat) / 2));
}
#kubus-van-boven div div:nth-of-type(3) {
	transform:rotateY(210deg) translateZ(calc(var(--maat) / 2));
}
#kubus-van-boven div div:nth-of-type(4) {
	transform:rotateY(300deg) translateZ(calc(var(--maat) / 2));
}


/*****************/
/* ID = piramide */
/*****************/
#piramide > div {
   --maat:6em;
	position: absolute;
   width:var(--maat); height:var(--maat);
   left:calc(50% - var(--maat) / 2 ); top:calc(50% - var(--maat) / 2 );
	perspective:calc(var(--maat) * 3 );
	transform-style:preserve-3d;
}

#piramide div div {
	position:absolute;
	width:100%; height:100%;
	background-image:linear-gradient(135deg,#FFD70099 25%,#FF8C0099 75%);
	clip-path: polygon(50% 0, 100% 100%, 0 100%, 50% 0);
	transform-origin: center bottom 0;
}

#piramide div div:nth-of-type(1) {
	transform: rotateY(0deg) translateZ(calc(var(--maat) / 2)) rotateX(30deg);
}
#piramide div div:nth-of-type(2) {
	transform: rotateY(90deg) translateZ(calc(var(--maat) / 2)) rotateX(30deg);
}
#piramide div div:nth-of-type(3) {
	transform: rotateY(180deg) translateZ(calc(var(--maat) / 2)) rotateX(30deg);
}
#piramide div div:nth-of-type(4) {
	transform: rotateY(270deg) translateZ(calc(var(--maat) / 2)) rotateX(30deg);
}


/***************************/
/* ID = piramide-van-opzij */
/***************************/
#piramide-van-opzij > div {
   --maat:6em;
	position: absolute;
   width:var(--maat); height:var(--maat);
   left:calc(50% - var(--maat) / 2 ); top:calc(50% - var(--maat) / 2 );
	perspective:calc(var(--maat) * 3 );
	transform-style:preserve-3d;
}

#piramide-van-opzij div div {
	position:absolute;
	width:100%; height:100%;
	background-image:linear-gradient(135deg,#FFD70099 25%,#FF8C0099 75%);
	clip-path: polygon(50% 0, 100% 100%, 0 100%, 50% 0);
	transform-origin: center bottom 0;
}

#piramide-van-opzij div div:nth-of-type(1) {
	transform: rotateY(30deg) translateZ(calc(var(--maat) / 2)) rotateX(30deg);
}
#piramide-van-opzij div div:nth-of-type(2) {
	transform: rotateY(120deg) translateZ(calc(var(--maat) / 2)) rotateX(30deg);
}
#piramide-van-opzij div div:nth-of-type(3) {
	transform: rotateY(210deg) translateZ(calc(var(--maat) / 2)) rotateX(30deg);
}
#piramide-van-opzij div div:nth-of-type(4) {
	transform: rotateY(300deg) translateZ(calc(var(--maat) / 2)) rotateX(30deg);
}


/***************************/
/* ID = piramide-van-boven */
/***************************/
#piramide-van-boven > div {
   --maat:6em;
	position: absolute;
   width:var(--maat); height:var(--maat);
   left:calc(50% - var(--maat) / 2 ); top:calc(50% - var(--maat) / 2 );
	perspective-origin:center calc(var(--maat) / -2 );
	perspective:calc(var(--maat) * 3 );
	transform-style:preserve-3d;
}

#piramide-van-boven div div {
	position:absolute;
	width:100%; height:100%;
	background-image:linear-gradient(135deg,#FFD70099 25%,#FF8C0099 75%);
	clip-path: polygon(50% 0, 100% 100%, 0 100%, 50% 0);
	transform-origin: center bottom 0;
}

#piramide-van-boven div div:nth-of-type(1) {
	transform: rotateY(30deg) translateZ(calc(var(--maat) / 2)) rotateX(30deg);
}
#piramide-van-boven div div:nth-of-type(2) {
	transform: rotateY(120deg) translateZ(calc(var(--maat) / 2)) rotateX(30deg);
}
#piramide-van-boven div div:nth-of-type(3) {
	transform: rotateY(210deg) translateZ(calc(var(--maat) / 2)) rotateX(30deg);
}
#piramide-van-boven div div:nth-of-type(4) {
	transform: rotateY(300deg) translateZ(calc(var(--maat) / 2)) rotateX(30deg);
}


/*********************/
/* ID = drieD-cirkel */
/*********************/
#drieD-cirkel {
	padding:0;
}

#drieD-cirkel > div {
	--maat:3.375em;
   position: relative;
   width:100%; height:100%;
	perspective:calc(var(--maat) * 6);
	transform-style:preserve-3d;
}

#drieD-cirkel div div {
   position: absolute;
   width:var(--maat); height:var(--maat);
	left:calc(50% - var(--maat) / 2); top:calc(50% - var(--maat) / 2);
	border-radius:calc(var(--maat) * .3);
	display:flex;
	justify-content:center;
	align-items:center;
}

#drieD-cirkel div div:nth-of-type(3n+1) { background-color:gold; }
#drieD-cirkel div div:nth-of-type(3n+2) { background-color:gold; }
#drieD-cirkel div div:nth-of-type(3n+3) { background-color:orange; }

#drieD-cirkel div div:nth-of-type(1) { transform:rotateY(0deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel div div:nth-of-type(2) { transform:rotateY(30deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel div div:nth-of-type(3) { transform:rotateY(60deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel div div:nth-of-type(4) { transform:rotateY(90deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel div div:nth-of-type(5) { transform:rotateY(120deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel div div:nth-of-type(6) { transform:rotateY(150deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel div div:nth-of-type(7) { transform:rotateY(180deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel div div:nth-of-type(8) { transform:rotateY(210deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel div div:nth-of-type(9) { transform:rotateY(240deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel div div:nth-of-type(10) { transform:rotateY(270deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel div div:nth-of-type(11) { transform:rotateY(300deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel div div:nth-of-type(12) { transform:rotateY(330deg) translateZ(calc(var(--maat) * 2.25)); }


/*******************************/
/* ID = drieD-cirkel-van-boven */
/*******************************/
#drieD-cirkel-van-boven {
	padding:0;
}

#drieD-cirkel-van-boven > div {
	--maat:3.375em;
   position: relative;
   width:100%; height:100%;
	perspective-origin:center calc(50% - var(--maat) * 3);
	perspective:calc(var(--maat) * 6);
	transform-style:preserve-3d;
}

#drieD-cirkel-van-boven div div {
   position: absolute;
   width:var(--maat); height:var(--maat);
	left:calc(50% - var(--maat) / 2); top:calc(50% - var(--maat) / 2 - var(--maat) * .5);
	border-radius:calc(var(--maat) * .3);
	display:flex;
	justify-content:center;
	align-items:center;
}

#drieD-cirkel-van-boven div div:nth-of-type(3n+1) { background-color:gold; }
#drieD-cirkel-van-boven div div:nth-of-type(3n+2) { background-color:gold; }
#drieD-cirkel-van-boven div div:nth-of-type(3n+3) { background-color:orange; }

#drieD-cirkel-van-boven div div:nth-of-type(1) { transform:rotateY(0deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel-van-boven div div:nth-of-type(2) { transform:rotateY(30deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel-van-boven div div:nth-of-type(3) { transform:rotateY(60deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel-van-boven div div:nth-of-type(4) { transform:rotateY(90deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel-van-boven div div:nth-of-type(5) { transform:rotateY(120deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel-van-boven div div:nth-of-type(6) { transform:rotateY(150deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel-van-boven div div:nth-of-type(7) { transform:rotateY(180deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel-van-boven div div:nth-of-type(8) { transform:rotateY(210deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel-van-boven div div:nth-of-type(9) { transform:rotateY(240deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel-van-boven div div:nth-of-type(10) { transform:rotateY(270deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel-van-boven div div:nth-of-type(11) { transform:rotateY(300deg) translateZ(calc(var(--maat) * 2.25)); }
#drieD-cirkel-van-boven div div:nth-of-type(12) { transform:rotateY(330deg) translateZ(calc(var(--maat) * 2.25)); }


/*******************************/
/* ID = drieD-cirkel-recht */
/*******************************/
#drieD-cirkel-recht {
	padding:0;
}

#drieD-cirkel-recht > div {
	--maat:3.375em;
   position: relative;
   width:100%; height:100%;
	perspective-origin:center calc(50% - var(--maat) * 3);
	perspective:calc(var(--maat) * 6);
	transform-style:preserve-3d;
}

#drieD-cirkel-recht div div {
   position: absolute;
   width:var(--maat); height:var(--maat);
	left:calc(50% - var(--maat) / 2); top:calc(50% - var(--maat) / 2 - var(--maat) * .5 );
	border-radius:calc(var(--maat) * .3);
	display:flex;
	justify-content:center;
	align-items:center;
}

#drieD-cirkel-recht div div:nth-of-type(3n+1) { background-color:gold; }
#drieD-cirkel-recht div div:nth-of-type(3n+2) { background-color:gold; }
#drieD-cirkel-recht div div:nth-of-type(3n+3) { background-color:orange; }

#drieD-cirkel-recht div div:nth-of-type(1) { transform:rotateY(0deg) translateZ(calc(var(--maat) * 2.25)) rotateY(0deg); }
#drieD-cirkel-recht div div:nth-of-type(2) { transform:rotateY(30deg) translateZ(calc(var(--maat) * 2.25)) rotateY(-30deg); }
#drieD-cirkel-recht div div:nth-of-type(3) { transform:rotateY(60deg) translateZ(calc(var(--maat) * 2.25)) rotateY(-60deg); }
#drieD-cirkel-recht div div:nth-of-type(4) { transform:rotateY(90deg) translateZ(calc(var(--maat) * 2.25)) rotateY(-90deg); }
#drieD-cirkel-recht div div:nth-of-type(5) { transform:rotateY(120deg) translateZ(calc(var(--maat) * 2.25)) rotateY(-120deg); }
#drieD-cirkel-recht div div:nth-of-type(6) { transform:rotateY(150deg) translateZ(calc(var(--maat) * 2.25)) rotateY(-150deg); }
#drieD-cirkel-recht div div:nth-of-type(7) { transform:rotateY(180deg) translateZ(calc(var(--maat) * 2.25)) rotateY(-180deg); }
#drieD-cirkel-recht div div:nth-of-type(8) { transform:rotateY(210deg) translateZ(calc(var(--maat) * 2.25)) rotateY(-210deg); }
#drieD-cirkel-recht div div:nth-of-type(9) { transform:rotateY(240deg) translateZ(calc(var(--maat) * 2.25)) rotateY(-240deg); }
#drieD-cirkel-recht div div:nth-of-type(10) { transform:rotateY(270deg) translateZ(calc(var(--maat) * 2.25)) rotateY(-270deg); }
#drieD-cirkel-recht div div:nth-of-type(11) { transform:rotateY(300deg) translateZ(calc(var(--maat) * 2.25)) rotateY(-300deg); }
#drieD-cirkel-recht div div:nth-of-type(12) { transform:rotateY(330deg) translateZ(calc(var(--maat) * 2.25)) rotateY(-330deg); }


/******************/
/* ID = hourglass */
/******************/
#hour-glass > div {
   position: relative;
   width:50%;
   height:50%;
   margin:25%;
}

#hour-glass > div div{
   position: absolute;
   width:52.5%;
   height:42%;
   top:10%;
   left:23.75%;
   background: gold;
   border-radius:0 0 50% 50% / 0 0 100% 100%;
}

#hour-glass > div div:last-child{
   top:48%;
   transform:scaleY(-1);
}

#hour-glass > div div::before{
   content:"";
   position: absolute;
   width:110%;
   height:23.8095238095238%;
   bottom:99.5%;
   left:-5%;
   background: inherit;
   border-radius: 4.5454545454545% / 50%;
}

#hour-glass > div div::after{
   content:"";
   position: absolute;
   width:78%; height:90%;
   left:11%; top:0;
   background-color: rgba(255,255,255,.5);
   background-size:500% 220%;
   background-repeat: no-repeat;

   border-radius:inherit;
}

#hour-glass > div div:first-child::after{
   background-image:radial-gradient(ellipse at center bottom, orange 35.35%, transparent 35.35%);
   background-position: center 30%;
}

#hour-glass > div div:last-child::after{
   background-image:radial-gradient(ellipse at center top, orange 35.35%, transparent 35.35%);
   background-position: center 50%;
}


/***************/
/* ID = burger */
/***************/
#burger *, #burger *::before, #burger *::after {
   box-sizing:border-box;
}
#burger > div {
   position:relative;
   width:40%; height:40%;
   margin:30%;
}

/* brood */
#burger div .brood {
   position:absolute;
   width:100%; height:40%;
   background:GoldenRod;
   border-radius: 50%;
}

#burger div .brood::before {
   content:"";
   position:absolute;
   width:100%; height:30%;
   bottom:50%;
   background:GoldenRod;
}

#burger div .brood::after {
   content:"";
   position:absolute;
   width:100%; height:100%;
   top:-30%;
   background:Wheat;
   border-radius:inherit;
   border:solid 3px Goldenrod;
}

#burger div .brood.bottom {
   bottom:0;
}

#burger div .brood.middle {
   bottom:31%;
}

/* kapje */
#burger div .kapje {
   position:absolute;
   width:100%; height:50%;
   background:GoldenRod ;
   border-radius:50% / 60% 60% 40% 40%;
   bottom:70%;
}

/* meat */
#burger div .meat {
   position:absolute;
   width:96%; height:38%;
   left:2%;
   background:Saddlebrown ;
   border-radius:50%;
}

#burger div .meat::before {
   content:"";
   position:absolute;
   width:100%; height:20%;
   bottom:50%;
   background:Saddlebrown ;
}

#burger div .meat::after {
   content:"";
   position:absolute;
   width:100%; height:100%;
   top:-20%;
   background:Sienna ;
   border-radius:inherit;
   border:solid 6px Saddlebrown;
}

#burger div .meat.bottom {
   bottom:19%;
}
    
#burger div .meat.top {
   bottom:50%;
}

/* kaas */
#burger div .kaas {
   position:absolute;
   background:gold;
   border-bottom:solid .125em #e6c300;
   border-right:solid .125em #e6c300;
   border-radius:.75em;
}

#burger div .kaas.bottom {
   width:80%; height:80%;
   left:9%; bottom:18%;
   transform:rotateX(45deg) rotate(5deg);
}

#burger div .kaas.middle {
   width:70%; height:70%;
   left:15%; bottom:18%;
   transform:rotateX(45deg) rotate(60deg);
}

#burger div .kaas.top {
   width:72%; height:72%;
   left:14%; bottom:48%;
   transform:rotateX(45deg) rotate(35deg);
}

/* tomaat */
#burger div .tomaat {
   position:absolute;
   width:50%; height:20%;
   background:Tomato;
   border-radius:50%;
}

#burger div .tomaat::before {
   content:"";
   position:absolute;
   width:100%; height:20%;
   bottom:50%;
   background:Tomato;
}

#burger div .tomaat::after {
   content:"";
   position:absolute;
   width:100%; height:100%;
   top:-20%;
   background:Salmon;
   border-radius:inherit;
   border:solid 6px Tomato;
}

#burger div .tomaat.een {
   left:5%; bottom:60%;
}
    
#burger div .tomaat.twee {
   left:45%; bottom:63%;
}

/* gurk */
#burger div .gurk {
   position:absolute;
   width:30%; height:15%;
   background:Olive;
   border-radius:50%;
}

#burger div .gurk::before {
   content:"";
   position:absolute;
   width:100%; height:20%;
   bottom:50%;
   background:Olive;
}

#burger div .gurk::after {
   content:"";
   position:absolute;
   width:100%; height:100%;
   top:-20%;
   background: YellowGreen   ;
   border-radius: inherit;
   border:solid 6px Olive ;
}

#burger div .gurk.een {
   left:10%; bottom:66%;
}
    
#burger div .gurk.twee {
   left:67%; bottom:68%;
}

#burger div .gurk.drie {
   left:45%; bottom:61%;
}


/*************/
/* ID = muis */
/*************/
#muis .muis {
   --muis-color:grey;
   --muis-accent:pink;

   position:absolute;
   width:15%; height:15%;
   left:30%; top:55%;
   transform:rotate(-30deg);
}

/* lijf */
#muis .muis .lijf {
   position:absolute;
   width:100%; height:100%;
   background-image:radial-gradient(circle at left top, var(--main-color) 12%, var(--muis-color) 12%);
   border-radius:0 100% 50% 50% / 0 50% 50% 100%;
   transform:rotate(45deg);   
}

/* oog */
@keyframes muis-oog {
   0% {transform:scaleY(1);}
   98% {transform:scaleY(1);}
   99% {transform:scaleY(.125);}
   100% {transform:scaleY(1);}
}

#muis .muis .oog {
   float:left;
   width:30%; height:30%;
   margin-left:20%;
   background-image: radial-gradient(
      circle at center 40%, 
      var(--main-color) 30%, 
      white 30%
   );
   border-radius:50%;

   animation:muis-oog 5s infinite linear;
}

#muis .muis .oog + .oog {
   margin-left:0;
}

/* oor */
#muis .muis .oor {
   float:left;
   position:relative;
   width:50%; height:40%;
   background-color:var(--muis-color);
   border-radius:50%;
}
#muis .muis .oor {
   transform:translateX(-10%) rotate(-15deg);
}
#muis .muis .oor + .oor {
   transform:translateX(10%) rotate(15deg);
}

#muis .muis .oor::before {
   content:"";
   position:absolute;
   width:80%; height:80%;
   left:10%; top:0;
   background-color:var(--muis-accent);
   border-radius:inherit;
}

#muis .muis .staart {
   position:absolute;
   width:10%; height:50%;
   left:45%; top:90%;
   background-color:var(--muis-accent);
   border-radius:50% / 10% 10% 90% 90%;
   transform-origin:center 5%;
}