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


/****************/
/* ALLES TESAAM */
/****************/

/***********************/
/* ID = negen-schilden */
/***********************/
#negen-schilden div {
   position:absolute;
   width:3em; height:3em;
   left:calc(50% - 1.5em); top:calc(50% - 1.5em);
   line-height:3em;
   border-radius:50% 50% 0 0 / 100% 100% 0 0;
   text-align:center;
   transform-origin:50% -3.5em;
   transition:1s;
}

#negen-schilden div:nth-of-type(3n + 1) { background-color:DodgerBlue; }
#negen-schilden div:nth-of-type(3n + 2) { background-color:Crimson; }
#negen-schilden div:nth-of-type(3n + 3) { background-color:YellowGreen ; }

#negen-schilden div:nth-of-type(1) { transform: translateY(5em) rotate(43deg); }
#negen-schilden div:nth-of-type(2) { transform: translateY(5em) rotate(83deg); }
#negen-schilden div:nth-of-type(3) { transform: translateY(5em) rotate(123deg); }
#negen-schilden div:nth-of-type(4) { transform: translateY(5em) rotate(163deg); }
#negen-schilden div:nth-of-type(5) { transform: translateY(5em) rotate(203deg); }
#negen-schilden div:nth-of-type(6) { transform: translateY(5em) rotate(243deg); }
#negen-schilden div:nth-of-type(7) { transform: translateY(5em) rotate(283deg); }
#negen-schilden div:nth-of-type(8) { transform: translateY(5em) rotate(323deg); }
#negen-schilden div:nth-of-type(9) { transform: translateY(5em) rotate(3deg); }

#negen-schilden:hover div:nth-of-type(1) { transform: translateY(5em) rotate(403deg); }
#negen-schilden:hover div:nth-of-type(2) { transform: translateY(5em) rotate(443deg); }
#negen-schilden:hover div:nth-of-type(3) { transform: translateY(5em) rotate(483deg); }
#negen-schilden:hover div:nth-of-type(4) { transform: translateY(5em) rotate(523deg); }
#negen-schilden:hover div:nth-of-type(5) { transform: translateY(5em) rotate(563deg); }
#negen-schilden:hover div:nth-of-type(6) { transform: translateY(5em) rotate(603deg); }
#negen-schilden:hover div:nth-of-type(7) { transform: translateY(5em) rotate(643deg); }
#negen-schilden:hover div:nth-of-type(8) { transform: translateY(5em) rotate(683deg); }
#negen-schilden:hover div:nth-of-type(9) { transform: translateY(5em) rotate(363deg); }


/**************/
/* ID = kubus */
/**************/
#kubus .kubus {
  	position: absolute;
	left:calc(50% - 2em);
	top:calc(50% - 2em);
	
}
#kubus .zijde,
#kubus .zijde::before,
#kubus .zijde::after {
  	position: absolute;
	width:4em; height:4em;
  	line-height:4em;
	text-align:center;
	transition:1s;
}

/* boven / deksel */
#kubus .boven {
  	background-color: #9acc53;
  	transform: rotate(-45deg) skew(15deg, 15deg) translate(50%, -50%);
	z-index:3;
}
#kubus:hover .boven {
    transform: rotate(-15deg) skew(-15deg,-15deg) translate(50%, -50%);
}

/* links */
#kubus .links {
  	background-color: #8ec63f;
  	transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 50%);
	z-index:2;
}

/* rechts */
#kubus .rechts {
  	background-color: #80b239;
  	transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 50%);
	transform-style: preserve-3d;
}

/* achter */
#kubus .rechts::before {
 	content:"";
	background-color:rgb(210,204,198);
	left:0; top:0;
	transform: translate3D(-100%, -100%, -2em);
	box-shadow:inset 8px -8px 16px 0 rgba(0,0,0,.25);
}

/* rising cirkel */
#kubus .rechts::after {
	content:"";
	left:0em; top:0;
	border:solid 2em YellowGreen;
	background-color:YellowGreen;
	border-radius:50%;
	
	transform:translate3D(-50%, -25%, -1em) skew(15deg,15deg) scale(.25);
	transition:
		transform 1s ease-out,
		border .25s ease-out,
		background .25s ease-out,
		box-shadow .5s .5s ease-out;
}

#kubus:hover .rechts::after {
	border:solid .75em Crimson;
	background-color:white;	   
	box-shadow:0 0 1.25em 1.25em rgba(154, 205, 50,.5) ;
	
	transform:translate3D(-50%, -200%, -1em) skew(15deg,15deg) scale(1.5);
	transition:
		transform 1s ease-out,
		border .5s .5s ease-out,
		background .5s .5s ease-out,
		box-shadow .5s .5s ease-out;
}

#kubus .kubus:hover .rechts::after {
	border-color:DodgerBlue;
	background-color:Gold;
} 


/***************/
/* ID = panama */
/***************/
#panama {
	background-image: linear-gradient(to bottom, Crimson 0%, Crimson 100%), linear-gradient(to bottom, DodgerBlue 0%, DodgerBlue 100%);
	background-size:50% 50%;
	background-position:top right, bottom left;
	background-repeat:no-repeat;
	
	transition:background 1s;
	overflow:hidden;
}

#panama div {
	position:absolute;
	width:25%; height:25%;
	-webkit-clip-path:polygon(50% 0, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.4%, 50% 69%, 20.6% 90.4%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%, 50% 0);
	clip-path:polygon(50% 0, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.4%, 50% 69%, 20.6% 90.4%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%, 50% 0);
	transition:1s;
}

#panama div:last-of-type {
	left:12.5%; top:12.5%;
	background-color:dodgerblue;
}

#panama div:first-of-type {
	left:62.5%; top:62.5%;
	background-color:crimson;
}

#panama div:last-of-type::before,
#panama div:last-of-type::after,
#panama div:first-of-type::before,
#panama div:first-of-type::after {
	content:"";
	position:absolute;
	transition:1s;
}

/* congo */
@media (max-width:35.9em) {
	#panama:hover::after {
		content:"ID = of-toch-congo";
	}
	
	#panama:hover {
		background-image: linear-gradient(to bottom, DodgerBlue 0%, DodgerBlue 100%), linear-gradient(to bottom, DodgerBlue 0%, DodgerBlue 100%);
		background-size:100% 100%;
	}
	
	#panama:hover div:first-child {
		left:10%; top:10%;
		background-color:white;
	}
	
	#panama:hover div:last-child {
		-webkit-clip-path:polygon(50% 0, 100% 0, 100% 34.5%, 100% 100%, 80% 100%, 50% 100%, 20% 100%, 0% 100%, 0% 34.5%, 0% 0%, 50% 0);
		clip-path:polygon(50% 0, 100% 0, 100% 34.5%, 100% 100%, 80% 100%, 50% 100%, 20% 100%, 0% 100%, 0% 34.5%, 0% 0%, 50% 0);
		
		width:141.4213562373095%; height:28%;
		left:calc(-41.4213562373095% / 2); top:36%;
		background-color:Gold;
		transform:rotate(-33.5deg);
	}
	
	#panama:hover div:last-child::after {
		width:100%; height:71.428571428571%;
		left:0; top:14.2857142857145%;
		background-color:Crimson;
	}
}

/* somalie */
@media (min-width: 36em) and (max-width:47.9em) {
	#panama:hover::after {
		content:"ID = of-toch-somalie";
	}
	
	#panama:hover {
		background-image: linear-gradient(to bottom, DodgerBlue 0%, DodgerBlue 100%), linear-gradient(to bottom, DodgerBlue 0%, DodgerBlue 100%);
		background-size:100% 100%;
	}
	
	#panama:hover div {
		width:40%; height:40%;
		left:30%; top:30%;
		background-color:white;
	}
}

/* cuba */
@media (min-width: 48em) and (max-width: 75.9em) {
	#panama:hover::after {
		content:"ID = of-toch-cuba";
	}
	
	#panama:hover {
		background-image: 
			repeating-linear-gradient(
				to bottom,
				rgb(0,51,102) 0, rgb(0,51,102) 20%,
				transparent 20%, transparent 40%
			), 
			repeating-linear-gradient(
				to bottom,
				rgb(0,51,102) 0, rgb(0,51,102) 20%,
				transparent 20%, transparent 40%
			);
		background-size:100% 100%;
	}
	
	#panama:hover div:first-child {
		-webkit-clip-path:polygon(50% 0, 100% 0, 100% 34.5%, 100% 100%, 80% 100%, 50% 100%, 20% 100%, 0% 100%, 0% 34.5%, 0% 0%, 50% 0);
		clip-path:polygon(50% 0, 100% 0, 100% 34.5%, 100% 100%, 80% 100%, 50% 100%, 20% 100%, 0% 100%, 0% 34.5%, 0% 0%, 50% 0);
		
		width:70.71067811865476%; height:70.71067811865476%;
		left:50%; top:50%;

		transform:translate(-120.71067811865476%, -50%) rotate(45deg);
	}
	
	#panama:hover div:last-child {
		left:7.5%; top:37.5%;
		background-color:white;
	}
}

/* nauru */
@media (min-width: 76em) and (max-width: 95.9em) {
	#panama:hover::after {
		content:"ID = of-toch-nauru";
	}
	
	#panama:hover {
		background-image: linear-gradient(to bottom, gold 0%, gold 100%), linear-gradient(to bottom, rgb(0,51,102) 0%, rgb(0,51,102) 100%);
		background-size:100% 6%, 100% 100%;
		background-position:center right, bottom left;
	}
	
	#panama:hover div {
		width:20%; height:20%;
		left:28%; top:56%;
		background-color:white;
	}
	
	#panama:hover div:last-child {
		transform:rotate(180deg);
	}
}

/* turkije */
@media (min-width: 96em) {
	#panama:hover::after {
		content:"ID = of-toch-turkije";
	}
	
	#panama:hover {
		background-image: linear-gradient(to bottom, crimson 0%, crimson 100%), linear-gradient(to bottom, crimson 0%, crimson 100%);
		background-size:100% 100%;
	}
	
	#panama:hover div:first-child {
		-webkit-clip-path:polygon(50% 0, 100% 0, 100% 34.5%, 100% 100%, 80% 100%, 50% 100%, 20% 100%, 0% 100%, 0% 34.5%, 0% 0%, 50% 0);
		clip-path:polygon(50% 0, 100% 0, 100% 34.5%, 100% 100%, 80% 100%, 50% 100%, 20% 100%, 0% 100%, 0% 34.5%, 0% 0%, 50% 0);
		
		width:50%; height:50%;
		left:16%; top:25%;
		
		background-color:white;
		border-radius:50%;
	}
	
	#panama:hover div:first-child::after {
		width:80%; height:80%;
		left:25%; top:10%;
		background-color:Crimson;
		border-radius:50%;
	}
	
	#panama:hover div:last-child {
		left:calc(60%); top:37.5%;
		transform:rotate(-370deg);
		background-color:white;
	}
}


/************/
/* ID = oog */
/************/
#oog div {
	--oog-color:YellowGreen;
	--oog-shade-inside:rgba(102,204,26,.5);
	--oog-shade-bottom:rgb(77,103,25);
	
	transform-style: preserve-3d;
	
	position:absolute;
	width:6em; height:6em;
	left:calc(50% - 3em); top:calc(50% - 3em);
	
	background-image:
		radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33% ),
		radial-gradient(circle, rgb(0,0,0) 0%, rgb(0,0,0) 33%, rgba(255,255,255,0) 33% );
	background-size:4em 4em;
	background-position:-.75em 0em,  0 0;
	background-repeat:no-repeat;
	
	border-color:black var(--oog-color) var(--oog-color) black;
	border-style:solid;
	border-width:.5em;
	border-radius:75% 0 75% 0;
			
	box-shadow:
		inset 3px 0 6px 3px rgba(0,0,0,.5),
		inset -10px 0px 20px var(--oog-shade-inside),
		inset -1px -1px 2px 1px rgba(0,0,0,1),
		5px 5px 40px var(--oog-shade-bottom),
		-5px -5px 40px rgba(0,0,0,1),
		0 0 0 20em var(--oog-color);
	
	transform:rotate(45deg);
	transition:2s;
}

#oog div::after {
  	content:"";
	position:absolute;
	width:4.2em; height:4.2em;
	
	background-color:var(--oog-color);
	background-image:
		radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80% ),	
		radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.35) 75%, rgba(0,0,0,.6) 100%, rgba(255,255,255,0) 100% );
	background-position:-1em 0, center center;
	background-repeat:no-repeat;
	border-radius:50%;
	
	transform:translate3D(-.1em, -.1em, -1em);
	transition:2s;
}

#oog:hover div {
	--oog-color:DodgerBlue;
	--oog-shade-inside:rgba(0,0,204,.5);
	--oog-shade-bottom:rgb(0,51,102);
}

#oog div:hover {
	--oog-color:Crimson;
	--oog-shade-inside:rgba(204,0,0,.5);
	--oog-shade-bottom: rgb(153,0,0);
}


/******************/
/* ID = follow-me */
/******************/
:root{
	--midX:50%;
	--midY:50%;
}

#follow-me {
	padding:0;
	background-image: url(../images/image-waldo.png);
	background-size:cover;
}

#follow-me div {
	position:absolute;
	width:100%; height:100%;
}

#follow-me div:nth-of-type(1) {
	-webkit-clip-path:polygon(0 0, var(--midX) var(--midY), 0 100%);
	clip-path:polygon(0 0, var(--midX) var(--midY), 0 100%);
	background-color:dodgerblue;
	transition:0 ease-in;
}
#follow-me div:nth-of-type(2) {
	-webkit-clip-path:polygon(0 0, var(--midX) var(--midY), 100% 0);
	clip-path:polygon(0 0, var(--midX) var(--midY), 100% 0);
	background-color:crimson;
	transition:.04s ease-in;
}
#follow-me div:nth-of-type(3) {
	-webkit-clip-path:polygon(100% 0, var(--midX) var(--midY), 100% 100%);
	clip-path:polygon(100% 0, var(--midX) var(--midY), 100% 100%);
	background-color:gold;
	transition:.08s ease-in;
}
#follow-me div:nth-of-type(4) {
	-webkit-clip-path:polygon(0 100%, var(--midX) var(--midY), 100% 100%);
	clip-path:polygon(0 100%, var(--midX) var(--midY), 100% 100%);
	background-color:yellowgreen;
	transition:.12s ease-in;
}


/***************/
/* ID = rating */
/***************/
#rating {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:row-reverse;
}

#rating input {
	position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

#rating label {
	position:relative;
	display:block;
	width:0; height:0;
	padding:0 0 20% 20%;
	overflow:hidden;
}

#rating label::before,
#rating label::after{
	content:"";
	position:absolute;
	-webkit-clip-path:polygon(50% 0, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.4%, 50% 69%, 20.6% 90.4%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%, 50% 0);
	clip-path:polygon(50% 0, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.4%, 50% 69%, 20.6% 90.4%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%, 50% 0);
	transition:.5s;
}

#rating label::before {
	width:100%; height:100%;
	left:0; top:0;
	background-color:gold;
}

#rating label::after {
	width:calc(100% - 2*.5em); height:calc(100% - 2*.5em);
	left:.5em; top:.5em;
	background-color:white;
}

#rating label:hover ~ label::after {
	background-color:gold;
}

#rating input:checked ~ label::after,
#rating input:checked ~ label::before{
	background-color:dodgerblue;
}

#rating label:hover::after,
#rating label:hover::before,

#rating label ~ label:hover::after,
#rating label ~ label:hover::before{
	background-color:crimson;
}


#rating input:checked + label::after,
#rating input:focus + label:hover::after,
#rating input:checked + label:hover::after,

#rating input:focus + label::before,
#rating input:checked + label::before,
#rating input:focus + label:hover::before,
#rating input:checked + label:hover::before{
	background-color:dodgerblue;
}

#rating input:focus + label {
	filter:drop-shadow(0 0 5px dodgerblue);
}


/***************************/
/* ID = check-box-schuiven */
/***************************/
#check-box-schuiven {
	display:flex;
	flex-direction:column;
	justify-content:center;
}

#check-box-schuiven input {
	position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

#check-box-schuiven label {
	position:relative;
	display:block;
	line-height:2em;
	margin:.75em 0;
	padding-left:4em;
}

#check-box-schuiven label::before {
	content:"";
	display:block;
	position:absolute;
	
	width:3.5rem; height:2rem;
	left:0; top:0;
	
	background-color:Crimson;
	border-radius:1rem;
	box-shadow:inset .125rem .125rem .25rem rgba(0,0,0,.5);
	transition:.25s;
}

#check-box-schuiven input:checked + label::before  {
	background-color:YellowGreen;
}

#check-box-schuiven label::after {
	content:"";
	display:block;
	position:absolute;
	
	width:1.75em; height:1.75em;
	left:.125rem; top:.125rem;
	
	background-image:
		radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 75%),
		linear-gradient(135deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 75%);
	background-color:rgb(204,204,204);
	background-repeat: no-repeat;
	background-position: 0 0, center center;
	background-size:50% 50%, 100% 100%;
	
	box-shadow:.0625rem .0625rem .0625rem rgba(0,0,0,.75),
				inset .125rem .125rem .125rem rgba(255,255,255,.5),
				inset .25rem .25rem .25rem rgba(255,255,255,.25),
				inset -.25rem -.25rem .25rem rgba(0,0,0,.125),
				inset -.125rem -.25rem .25rem .25rem rgba(0,0,0,.125),
				inset -.125rem -.125rem .125rem rgba(0,0,0,.25);
	
	border-radius:50%;
	transition:.25s;
}

#check-box-schuiven input:checked + label::after {
	transform:translate(1.5rem,0);	
}

#check-box-schuiven input:focus + label::after {
	background-color:white;
}


/********************/
/* ID = kat-en-muis */
/********************/
#kat-en-muis {
    overflow:hidden;
}

#kat-en-muis > div {
    --tempo:1s;
    position:relative;
    width:100%; height:100%;
    
    display:flex;
    justify-content:center;
    align-items:center;
}

/* spoor */
@keyframes spoor {
    from{ transform:rotate(43deg) scale(1.03); }
    to{ transform:rotate(403deg) scale(1.03); }
}

#kat-en-muis > div::before {
    content:"";
    position:absolute;
    width:100%; height:100%;
    border-style:solid;
    border-width:.2em .4em .6em 0;
    border-color:grey grey transparent transparent; 
    border-radius:50% 50% 50% 0;
    opacity:0;
    
    transition:calc(var(--tempo) /2);
    animation:spoor calc(var(--tempo) *2) linear infinite;
    animation-play-state:paused;
}

#kat-en-muis:hover > div::before {
    opacity:.125;
    transition:calc(var(--tempo) *4);
    animation-play-state:running;
}

/* kat */
#kat-en-muis .kat {
    --kat-color:dodgerblue;
    --kat-dark:rgb(23,108,191);
	
	position:relative;
    width:60%; height:40%;
    background-color:var(--kat-color);
    border-radius:25% 25% 50% 50% / 50%;
    
    display:flex;
    justify-content:center;
    align-items:center;
    
    transform:translateZ(.5em);
    transform-style: preserve-3d;
}

/* oor */
#kat-en-muis .kat .oor {
    position:absolute;
    width:30%; height:45%;
    top:0; left:5%;
    border-radius:100% 0 40% 50% / 40% 0 100% 50%;
    background-color:var(--kat-color);  
    transform:translateY(-50%) rotate(-55deg) skew(-5deg, -5deg) translateZ(-.25em);
}

#kat-en-muis .kat .oor + .oor{
    left:auto; right:5%;
    transform:scaleX(-1) translateY(-50%) rotate(-55deg) skew(-5deg, -5deg) translateZ(-.25em);
}

#kat-en-muis .kat .oor::before {
    content:"";
    position:absolute;
    width:60%; height:60%;
    left:20%; top:10%;
    background-image:linear-gradient(232deg, rgba(0,0,0,.25) 60%, transparent 60%);
    background:var(--kat-dark);
    border-radius:inherit;
}

/* oog */
#kat-en-muis .kat .oog {
    position:relative;
    width:32%; height:48%;
    margin:-2%;
    background-image:linear-gradient(transparent 25%, var(--kat-dark) 25%);
    border-radius:50%;
    transform:translateY(15%);
    transform-style: preserve-3d;
}

/* oogwit */
@keyframes oogwit {
    0%{border-radius:25% 25% 50% 50%/33.3% 33.3% 66.7% 66.7%; transform:scaleY(1) translateZ(1em);}
    87.5%{border-radius:50%; transform:scaleY(1.33) translateZ(1em);}
    100%{border-radius:50%; transform:scaleY(1.33) translateZ(1em);}
}

#kat-en-muis .kat .oog::after {
    content:"";
    position:absolute;
    width:100%; height:75%;
    left:0; bottom:15%;
    background-color:white;
    border-radius:25% 25% 50% 50%/33.3% 33.3% 66.7% 66.7%;
    transform-origin:center bottom;
    animation:oogwit var(--tempo) ease-in-out infinite alternate;
    animation-play-state:paused;
}
    
#kat-en-muis:hover .kat .oog::after {
    animation-play-state:running;
}

/* wenkbrouw */
@keyframes wenkbrouw1 {
    0%{transform:rotate(-10deg)}
    12.5%{transform:rotate(-10deg)}
    87.5%{transform:rotate(-27.5deg)}
    100%{transform:rotate(-27.5deg)}
}

@keyframes wenkbrouw2 {
    0%{transform:rotate(10deg)}
    12.5%{transform:rotate(10deg)}
    87.5%{transform:rotate(27.5deg)}
    100%{transform:rotate(27.5deg)}
}

#kat-en-muis .kat .oog::before {
    content:"";
    position:absolute;
    width:60%; height:20%;
    left:5%; top:-10%;
    background-color:var(--kat-dark);
    border-radius:80% 20% 20% 80%/90% 50% 50% 10%;
    transform-origin:-100% center;
    
    animation:wenkbrouw1 var(--tempo) ease-in-out infinite alternate;
    animation-play-state:paused;
}

#kat-en-muis .kat .oog + .oog::before {
    left:auto; right:5%;
    border-radius:20% 80% 80% 20%/50% 90% 10% 50%;
    transform-origin:200% center;
    
    animation:wenkbrouw2 var(--tempo) ease-in-out infinite alternate;
    animation-play-state:paused;
}

#kat-en-muis:hover .kat .oog::before {
    animation-play-state:running;
}

/* pupil */
@keyframes pupil {
    0%{transform:rotate(0deg) translateY(80%) translateZ(2em);}
    100%{transform:rotate(360deg) translateY(80%) translateZ(2em);}
}

#kat-en-muis .kat .oog div {
    position:absolute;
    width:30%; height:30%;
    top:20%;
    background-image: radial-gradient(var(--main-color) 70%, transparent 70%);
    animation:pupil calc(var(--tempo) *2) linear infinite;
    animation-play-state:paused;
}

#kat-en-muis .kat .oog div {
    left:42.5%; 
}

#kat-en-muis .kat .oog + .oog div {
    left:27.5%;
}

#kat-en-muis:hover .kat .oog div {
    animation-play-state:running;
}

/* neusje */
#kat-en-muis .kat .neusje {
    position:absolute;
    width:8%; height:12%;
    left:46%; top:76%;
    background-color:rgba(0,0,0,.25);
    background-color:var(--main-color);
    border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
    transform:rotate(45deg) skew(-10deg, -10deg);
}

/* mond */
#kat-en-muis .kat .mond {
    position:absolute;
    width:2%; height:10%;
    right:50%; top:87%;
    transform:translateX(50%);
}

#kat-en-muis .kat .mond::before,
#kat-en-muis .kat .mond::after {
    content:"";
    position:absolute;
    width:100%; height:100%;
    right:0; top:0;
    background-color:var(--main-color);
   
    border-radius:0 0 50% 50% / 0 0 100% 100%;
    transform-origin:center top;
    transform:rotate(55deg);
}

#kat-en-muis .kat .mond::after {
    transform:rotate(-55deg);
}

/* snorharen */
#kat-en-muis .kat .snorharen {
    position:absolute;
    width:1px; height:15%;
    top:86%;
    background-color:var(--main-color);
    transform-origin:center top;
}

#kat-en-muis .kat .snorharen {
    right:40%;
    transform:rotate(-60deg);
}

#kat-en-muis .kat .snorharen + .snorharen {
    left:40%;
    transform:rotate(60deg);
}

#kat-en-muis .kat .snorharen::before,
#kat-en-muis .kat .snorharen::after {
    content:"";
    position:absolute;
    width:100%; height:100%;
    top:0;
    background-color:inherit;
    transform-origin:center top;
}

#kat-en-muis .kat .snorharen::before {
    right:-200%;
    transform:rotate(-10deg);
}

#kat-en-muis .kat .snorharen::after {
    left:-200%;
    transform:rotate(10deg);
}

/* muis */
@keyframes muis {
    from{transform:rotate(0deg) translateY(328%);}
    to{transform:rotate(360deg) translateY(328%);}
}

#kat-en-muis .muis {
    --muis-color:grey;
    --muis-dark:pink;
    
    position:absolute;
    width:15%; height:15%;
    left:42.5%; top:42.5%;
    animation:muis calc(var(--tempo) *2) linear infinite;
    animation-play-state:paused;
    
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-content: flex-start;
    flex-wrap:wrap;
}

#kat-en-muis:hover .muis {
    animation-play-state:running;
}

/* lijf */
#kat-en-muis .muis::before {
    content:"";
    position:absolute;
    width:100%; height:100%;
    background-image:linear-gradient(225deg, var(--main-color) 8%, var(--muis-color) 8%);
    background-image:radial-gradient(circle at right top, var(--main-color) 12%, var(--muis-color) 12%);
    border-radius:100% 0 50% 50% / 50% 0 100% 50%;
    transform:rotate(225deg);   
}

/* staart */
@keyframes staart {
    0% { transform:rotate(0)}
    25% { transform:rotate(15deg)}
    50% { transform:rotate(0)}
    75% { transform:rotate(-15deg)}
    100% { transform:rotate(0)}
}

#kat-en-muis .muis::after {
    content:"";
    position:absolute;
    width:50%; height:10%;
    left:90%; top:45%;
    background-color:var(--muis-dark);
    border-radius:10% 90% 90% 10% / 50%;
    transform-origin:left center;
    
    animation:staart .125s linear infinite;
    animation-play-state:paused;
}

#kat-en-muis:hover .muis::after {
    animation-play-state:running;
}

/* oog */
@keyframes muis-oog {
    0% {transform:scaleX(1);}
    94% {transform:scaleX(1);}
    97% {transform:scaleX(.125);}
    100% {transform:scaleX(1);}
}

#kat-en-muis .muis .oog {
    position:relative;
    width:30%; height:30%;
    background-image: radial-gradient(circle at 40% center, var(--main-color) 30%, white 30%);
    border-radius:5em;
    
    transform-origin:25% center;
    animation:muis-oog calc(var(--tempo) *3.141592653589793) infinite linear; 
    
    display:flex;
    justify-content:center;
    align-items:center;
}

/* oor */
#kat-en-muis .muis .oor {
    position:relative;
    width:40%; height:50%;
    background-color:var(--muis-color);
    border-radius:50%;
    
    display:flex;
    justify-content:flex-start;
    align-items:center;
}

#kat-en-muis .muis .oor {
    transform:translateY(-10%) rotate(15deg);
}

#kat-en-muis .muis .oor + .oor {
    transform:translateY(10%) rotate(-15deg);
}

#kat-en-muis .muis .oor::before {
    content:"";
    width:80%; height:80%;
    background-color:var(--muis-dark);
    border-radius:inherit;
}


/******************/
/* ID = carrousel */
/******************/
#carrousel {
	padding:0;
}

#carrousel section {
/*
	position:relative;
	background-color:var(--main-background);
*/
}

/* de carrousel */
#carrousel > ul {
	padding:0;
	list-style:none;
	width:100%; height:100%;
	
	display:flex;
	align-items:center;
	
	overflow-x:scroll;
	overflow-y:hidden;
/*
	-webkit-overflow-scrolling:touch;
	-ms-overflow-style:none;
*/
	
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
}

#carrousel > ul::-webkit-scrollbar {
	display: none;
}

#carrousel > ul > li {
	height:77.5%;
	flex-basis:85%;
	flex-shrink:0;
	padding:0 3.75%;
	scroll-snap-align: center;
}

#carrousel > ul > li:first-of-type {
	flex-basis:88.75%;
	padding-left:7.5%;
}
#carrousel > ul > li:last-of-type {
	flex-basis:88.75%;
	padding-right:7.5%;
}

#carrousel > ul > li > img {
	display:block;
	width:100%;
}

/* prev en next */
a[href="previous"], a[href="next"] {
	box-sizing:border-box;
	position:absolute;
	width:0; height:calc(2*var(--main-padding));
	top:calc(50% - var(--main-padding));
	padding-left:calc(2*var(--main-padding));
	
	overflow:hidden;
	z-index:10;
	background:var(--main-background) url(../images/ui-to-the-left.svg) calc(1*var(--main-padding)) center / 1.5em no-repeat;
	cursor:pointer;
	outline:none;
	border-radius:50%;
}

a[href="previous"] {
	left:calc(-1*var(--main-padding));
}

a[href="next"] {
	right:calc(-1*var(--main-padding));
	transform:scaleX(-1);
}

a[href="previous"]:focus, a[href="next"]:focus {
	box-shadow:inset 0 0 0 2px dodgerblue;
}

/* de stippen */
#carrousel nav ul {
	position:absolute;
	width:100%;
	bottom:1em;
	margin:0; padding:0;
	
	display:flex;
	justify-content:center;
}

#carrousel nav li {
	margin:0 .125em; padding:0;
	list-style:none;
}

#carrousel nav li a {
	display:block;
	width:0; height:.5em;
	padding-left:.5em;
	overflow:hidden;
	background-color:rgb(210,204,198);
	border-radius:50%;
	outline:none;
	transition:.5s;
}

#carrousel nav li a.visible {
	background-color:dodgerblue;
}

#carrousel nav li a:focus {
	box-shadow:inset 0 0 0 1px dodgerblue, 0 0 0 1px dodgerblue;
}


/*************/
/* ID = wave */
/*************/
#wave {
	padding:0;
	perspective-origin: right center;
	perspective:20em;
	overflow:hidden;
}

#wave div {
	height:100%;
	width:100%;
	
	transform-origin: right center;
	transform:rotateY(45deg);
	
	perspective-origin: right center;
	perspective: 20em;
	transform-style: preserve-3d;
	
	transition:1.5s cubic-bezier(0.500, -0.300, 0.500, 1.300);
}

#wave:hover div {
	transform:rotateY(0);
}

#wave img {
	display:block;
	float:left;
	height:calc(100% /6);
	width:calc(100% /6);
	
	transform-origin:left center -6em;
	transition:1.5s cubic-bezier(0.500, -0.600, 0.500, 1.600);
}

#wave img:nth-of-type(-n + 18) {
	transform: rotateX(5deg) rotateY(20deg) skewx(5deg) translate(1.5em, -.25em);
}

#wave img:nth-of-type(-n + 12) {
	transform: rotateX(15deg) rotateY(20deg) skewx(15deg) translate(1.25em, -.75em);
}

#wave img:nth-of-type(-n + 6) {
	transform: rotateX(30deg) rotateY(20deg) skewx(30deg) translate(0.75em, -1.25em);
}

#wave img:nth-last-of-type(-n + 18) {
	transform: rotateX(-5deg) rotateY(20deg) skewx(-5deg) translate(1.5em, .25em);
}

#wave img:nth-last-of-type(-n + 12) {
	transform: rotateX(-15deg) rotateY(20deg) skewx(-15deg) translate(1.25em, .75em);
}

#wave img:nth-last-of-type(-n + 6) {
	transform: rotateX(-30deg) rotateY(20deg) skewx(-30deg) translate(0.75em, 1.25em);
}

#wave:hover img {
	transform: rotateX(0) rotateY(0) skew(0);
}


/******************/
/* ID = ms-pacman */
/******************/
#ms-pacman {
	display:flex;
	justify-content:space-around;
	align-items:center;
	background-color:black;
	background-image: url(../images/image-stippen.svg);
	background-repeat:no-repeat;
	background-position:120% center;
	background-size:50% 4%;
}

#ms-pacman:hover {
	animation: stippen 1s linear 0s infinite;
}

@keyframes stippen {
	0% {
   		background-position:120% center;
 	}
  	100% {
    	background-position:97% center;
  	}
}

/* lijf */
#ms-pacman > div {
	position:relative;
	width:0px;
	height:0px;
	
	border:solid 3em rgb(255,204,0);
	border-right-color:transparent;
 	border-radius: 3em;
}

@keyframes hapje {
  	25%, 75% {
   		border-right-color:transparent;
		transform:rotate(0);
 	}
  	26%, 74% {
    	border-right-color:rgb(255,204,0);
		transform:rotate(10deg);
  	}
}

#ms-pacman:hover > div {
	animation: hapje .25s infinite;
}

/* strikje */
#ms-pacman > div::after {
	content:"";
	position:absolute;
	width:2em;
	height:1em;
	background:url(../images/strikje-groen.svg) no-repeat center center / cover;
	transform:translate(-3em, -3em) rotate(-25deg);
}

@media (min-width: 30em) {
	#ms-pacman > div::after {
		background-image:url(../images/strikje-paars.svg);
	}
}

@media (min-width: 48em) {
	#ms-pacman > div::after {
		background-image:url(../images/strikje-rood.svg);
	}
}

@media (min-width: 84em) {
	#ms-pacman > div::after {
		background-image:url(../images/strikje-blauw.svg);
	}
}

@keyframes strikje {
  	35%, 85% {
   		transform:translate(-3em, -3em) rotate(-25deg);
 	}
  	36%, 84% {
    	transform:translate(-3.5em, -3em) rotate(-35deg);
  	}
}

#ms-pacman:hover > div::after {
	animation: strikje .25s infinite;
}

/* oog */
#ms-pacman > div > div {
	position:absolute;
	width:1em;
	height:1em;
	background-color:white;
	border-radius:50%;
	transform:translate(-.5em,-2em);
}

#ms-pacman > div > div::after {
	content:"";
	position:absolute;
	width:.5em;
	height:.5em;
	background-color:black;
	border-radius:50%;
	transform:translate(.5em,.25em);
}


/*****************/
/* ID = cmd-core */
/*****************/
#cmd-core ul {
	position:absolute;
	top:50%;
	left:50%;
	width:90%;
	height:90%;
	max-width:16em;
	max-height:16em;
	padding:0;
	background-color:Crimson;
	border-radius:50%;
	transform:translate(-50%,-50%);
}

#cmd-core li {
	margin:0;
	list-style:none;
	position:absolute;
	background-color:rgba(255,255,255,.5);
	width:8em;
	height:8em;
	top:50%;
	left:50%;
	text-align:center;
	border-radius:50%;
	line-height:1em;
}

#cmd-core li:nth-of-type(1) {
	padding:.5em 1.5em 0;
	transform-origin:50% 6em;
	transform:translate(-50%, calc(-50% - 2em)) rotate(-15deg);
}

#cmd-core li:nth-of-type(2) {
	padding:5.5em 1.5em 0;
	transform-origin:50% 2em;
	transform:translate(-50%, calc(-50% + 2em)) rotate(45deg);
}

#cmd-core li:nth-of-type(3) {
	padding:5.5em 1.5em 0;
	transform-origin:50% 2em;
	transform:translate(-50%, calc(-50% + 2em)) rotate(-75deg);
}

#cmd-core li:hover {
	background-color:rgba(1,153,0,.75);
	color:rgba(255,255,255,.75);
	z-index:1;
}

@media (min-width: 30em) {	
	#cmd-core li {
		width:7em;
		height:7em;
	}
	
	#cmd-core li:nth-of-type(1) {
		padding:.5em 1em 0;
		transform-origin:50% 5.5em;
	}
	
	#cmd-core li:nth-of-type(2) {
		padding:4.5em .5em 0;
		transform-origin:50% 1.5em;
	}
	
	#cmd-core li:nth-of-type(3) {
		padding:4.5em .5em 0;
		transform-origin:50% 1.5em;
	}					
}


/*********************/
/* ID = pannenkoeken */
/*********************/
#pannenkoeken {
	padding:0;
	background-color:rgb(134,128,122);
	overflow-x:hidden;
}

#pannenkoeken * {
	box-sizing:border-box;	
}

#pannenkoeken h2 {
	margin:0;
	padding:1em .5em 1em 3.5em;
	font-size:1em;
	line-height:1em;
	background:DodgerBlue;
	max-height:3em;
}

#pannenkoeken article {
	padding:1em;
	height:calc(100% - 3em);
	overflow:scroll;
	background-color:white;
}

/* het menu */
#pannenkoeken nav {
	position:absolute;
	top:0;
	left:0;
	width:calc(100% - 3em);
	transform:translateX(-100%);
	background-color:YellowGreen;
}

#pannenkoeken nav ul {
	margin:0;
	padding:0;
}

#pannenkoeken nav li {
	margin:0;
	padding:0;
	list-style:none;
}
#pannenkoeken nav li:not(:last-of-type) {
	border-bottom:dotted 1px rgba(0,0,0,.25);
}

#pannenkoeken nav li a {
	display:block;
	padding:1em 1em 1em 3em;
	line-height:1em;
	background-repeat:no-repeat;
	background-size:2em;
	background-position:.5em center;
	color:rgb(57,51,45);
	box-shadow:inset -7px 0 6px -4px rgba(0,0,0,.25);
	outline:none;
}
#pannenkoeken nav li a:hover{
	background-color:#8ab92d;
}

#pannenkoeken nav li a:focus{
	text-decoration:underline;
}

#pannenkoeken nav li:nth-of-type(1) a {
	background-image:url(../images/icon-cmd-cat.svg);	
}
#pannenkoeken nav li:nth-of-type(2) a {
	background-image:url(../images/icon-cmd-onderbroek.svg);
}
#pannenkoeken nav li:nth-of-type(3) a {
	background-image:url(../images/icon-cmd-pizza.svg);
}
#pannenkoeken nav li:nth-of-type(4) a {
	background-image:url(../images/icon-cmd-kaarten.svg);
}

/* de hamburger */
#pannenkoeken nav > a {
	position:absolute;
	top:0;
	right:-3em;
	width:3em;
	height:3em;
	padding-left:3em;
	overflow:hidden;
	background:gold url(../images/icon-cmd-hamburger.svg) center center / 1.5em no-repeat;
	outline:none;
}

#pannenkoeken nav > a:hover,
#pannenkoeken nav > a:focus{
	background-color:#8ab92d;
}

/* toon menu */
#pannenkoeken > * {
	transition:.5s ease-out;
}

#pannenkoeken.toon-menu > * {
	transform:translateX(calc(100% - 3em));
}


/***********************/
/* ID = zon-aarde-maan */
/***********************/
@keyframes orbit {
    from { transform:rotate(0deg) translateY(300%); }
    to { transform:rotate(360deg) translateY(300%); }
}

@keyframes anti-orbit {
    from { transform:rotate(360deg);}
    to { transform:rotate(0deg);}
}

@keyframes maand {
    0%, 8.2% {--maand: "januari";}
    8.3%, 16.6% {--maand: "februari";}
    16.7%, 25% {--maand: "maart";}
    25.1%, 33.2%{--maand: "april";}
    33.3%, 41.6% {--maand: "mei";}
    41.7%, 50% {--maand: "juni";}
    50.1%, 58.3% {--maand: "juli";}
    58.4%, 66.6% {--maand: "augustus";}
    66.7%, 75% {--maand: "september";}
    75.1%, 83.3% {--maand: "oktober";}
    83.4%, 91.6% {--maand: "november";}
    91.7%, 100% {--maand: "december";}
}

@keyframes getal {
	0%, 9.9% {--getal:"0"}
	10%, 19.9% {--getal:"1"}
	20%, 29.9% {--getal:"2"}
	30%, 39.9% {--getal:"3"}
	40%, 49.9% {--getal:"4"}
	50%, 59.9% {--getal:"5"}
	60%, 69.9% {--getal:"6"}
	70%, 79.9% {--getal:"7"}
	80%, 89.9% {--getal:"8"}
	90%, 100% {--getal:"9"}
}

@keyframes tiental {
	0%, 9.99% {--tiental:"0"}
	10%, 19.99% {--tiental:"1"}
	20%, 29.99% {--tiental:"2"}
	30%, 39.99% {--tiental:"3"}
	40%, 49.99% {--tiental:"4"}
	50%, 59.99% {--tiental:"5"}
	60%, 69.99% {--tiental:"6"}
	70%, 79.99% {--tiental:"7"}
	80%, 89.99% {--tiental:"8"}
	90%, 100% {--tiental:"9"}
}

@keyframes honderdtal {
	0%, 9.999% {--honderdtal:"0"}
	10%, 19.999% {--honderdtal:"1"}
	20%, 29.999% {--honderdtal:"2"}
	30%, 39.999% {--honderdtal:"3"}
	40%, 49.999% {--honderdtal:"4"}
	50%, 59.999% {--honderdtal:"5"}
	60%, 69.999% {--honderdtal:"6"}
	70%, 79.999% {--honderdtal:"7"}
	80%, 89.999% {--honderdtal:"8"}
	90%, 100% {--honderdtal:"9"}
}

@keyframes duizendtal {
	0%, 9.9999% {--duizendtal:"0"}
	10%, 19.9999% {--duizendtal:"1"}
	20%, 29.9999% {--duizendtal:"2"}
	30%, 39.9999% {--duizendtal:"3"}
	40%, 49.9999% {--duizendtal:"4"}
	50%, 59.9999% {--duizendtal:"5"}
	60%, 69.9999% {--duizendtal:"6"}
	70%, 79.9999% {--duizendtal:"7"}
	80%, 89.9999% {--duizendtal:"8"}
	90%, 100% {--duizendtal:"9"}
}

#zon-aarde-maan {
    --jaar: 48s; 
    --maand: "januari";
    --duizendtal: "2";
	--honderdtal: "0";
	--tiental: "0";
	--getal: "0";
	
    padding:.25em 0 0;
    background:url(../images/image-stars.jpg) center / cover;
	
    animation:
		maand var(--jaar) calc(var(--jaar) /100 *-8.3) linear infinite paused,
		getal calc(var(--jaar) *10) calc(var(--jaar) *-8) linear infinite paused,
		tiental calc(var(--jaar) *100) calc(var(--jaar) *-18) linear infinite paused,
		honderdtal calc(var(--jaar) *1000) calc(var(--jaar) *-18) linear infinite paused,
		duizendtal calc(var(--jaar) *10000) calc(var(--jaar) *-2018) linear infinite paused;
    
	overflow:hidden;
    
    display:grid;
    grid-template-columns:min-content;
    justify-content:center;
    align-items:center;
}

#zon-aarde-maan:hover {
    animation-play-state:running;
}

#zon-aarde-maan::before {
    content:var(--maand) " " var(--duizendtal) var(--honderdtal) var(--tiental) var(--getal);
    line-height:1em;
    text-align:center;
    font-size:.66em;
    opacity:0;
    
    transition:.5s;
    z-index:1000;
}

#zon-aarde-maan:hover::before {
    opacity:1;
    transition:1s;
}

/* de ruimtedingen */
#zon-aarde-maan div {
    position:absolute;
    width:35%; height:35%;
    top:32.5%; left:32.5%;
}

#zon-aarde-maan img {
	position:absolute;
	display:block;
	width:100%; height:100%;
	left:0; right:0;
	top:0; bottom:0;
}

/* zon */
#zon-aarde-maan .zon {
    background-image:radial-gradient(white 60%, gold 100%);
    border-radius:50%;
    box-shadow:0 0 .5em gold, 0 0 1em gold, 0 0 2em gold, 0 0 3em gold, 0 0 5em crimson;
}

/* aarde */
#zon-aarde-maan .aarde {
    animation:orbit var(--jaar) linear infinite paused;
}

#zon-aarde-maan .aarde > img {
    animation:anti-orbit calc( var(--jaar) /91) linear infinite paused reverse;
}

/* maan */
#zon-aarde-maan .maan {
	animation:orbit calc(var(--jaar) /11) linear infinite paused;
}

/* schaduw */
#zon-aarde-maan div div::after {
  	content:"";
  	position:absolute;
  	left:-1px; right:-1px;
	top:-1px; bottom:-1px;
	border-radius:50%;
	background-image:linear-gradient(transparent 12.5%, rgba(0,0,0,.9) 50%);
}

#zon-aarde-maan .maan::after {
    animation:anti-orbit calc(var(--jaar) /11) linear infinite paused;
}

/* animatie aarde, maan en shade maan */
#zon-aarde-maan:hover .aarde,
#zon-aarde-maan:hover .aarde img,
#zon-aarde-maan:hover .maan,
#zon-aarde-maan:hover .maan::after{
    animation-play-state:running;
}


/******************/
/* ID = star-wars */
/******************/
@font-face {
    font-family: 'starwars';
    src: url('../fonts/starwars.eot');
    src: url('../fonts/starwars.eot?#iefix') format('embedded-opentype'),
         url('../fonts/starwars.woff') format('woff'),
         url('../fonts/starwars.ttf') format('truetype'),
         url('../fonts/starwars.svg#distant_galaxyregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

#star-wars {
	background:url(../images/image-stars.jpg) center center / cover repeat-y;
	overflow:hidden;
}

#star-wars::before {
	content:"STAR WARS";
	position:absolute;
	font-size:2.2em;
	width:100%;
	left:0;
	bottom:50%;
	font-family:starwars;
	text-align:center;
	color:rgb(255,255,255);
	opacity:.5;
	
	transform-origin:bottom center;
	transform:perspective(6em) rotateX(45deg) scale(.5, .75);
	transition:1s ease-out;
}

#star-wars:hover::before {
	transform:perspective(6em) rotateX(0deg) scale(1,1);
}

#star-wars > div {
	position:absolute;
	width:4%;
	height:80%;
	transform-origin:center 85%;
	transition:.25s .75s ease-in;
}

#star-wars > div:first-child {
	bottom:10%;
	left:20%;
	transform:rotate(-15deg);
}
#star-wars > div:last-child {
	bottom:10%;
	right:20%;
	transform:rotate(15deg);
}

#star-wars:hover > div:first-child {
	transform:translate(300%,-5%) rotate(25deg);
}
#star-wars:hover > div:last-child {
	transform:translate(-300%,-5%) rotate(-25deg);
}

#star-wars > div div:last-child {
	position:absolute;
	width:100%;
	height:20%;
	bottom:0;
	left:0;
	background-image:linear-gradient(to right,
		rgb(51,51,51) 0%,
		rgb(153,153,153) 20%,
		rgb(255,255,255) 25%,
		rgb(153,153,153) 30%,
		rgb(51,51,51) 100%);
}

#star-wars > div div:last-child::before {
	content:"";
	position:absolute;
	width:60%;
	height:15%;
	top:10%;
	left:50%;
	transform:translate(-50%,0);
	background-color:rgb(128,128,128);
	border-radius:50%;
	box-shadow:-1px -1px 1px rgba(255,255,255,.75), 1px 1px 1px rgba(0,0,0,.75);
}

#star-wars > div div:last-child::after {
	content:"";
	position:absolute;
	width:60%;
	height:15%;
	top:10%;
	left:50%;
	transform:translate(-50%,0) scale(.7);
	background-color:rgb(102,102,102);
	border-radius:50%;
	box-shadow:-1px -1px 1px rgba(255,255,255,.75), 1px 1px 1px rgba(0,0,0,.75);
}

#star-wars > div div:last-child::after {
	box-shadow:1px 1px 1px rgba(255,255,255,1), -1px -1px 1px rgba(0,0,0,1);
}

#star-wars:hover > div:first-child div:last-child::after {
	background-color:rgba(0,255,0,.75);
	box-shadow:
		0 0 3px rgba(0,255,0,.75),
		0 0 6px rgba(0,255,0,.375),
		0 0 9px rgba(0,255,0,.2);
}

#star-wars:hover > div:last-child div:last-child::after {
	background-color:rgba(255,0,0,.875);
	box-shadow:
		0 0 3px rgba(255,0,0,.75),
		0 0 6px rgba(255,0,0,.375),
		0 0 9px rgba(255,0,0,.2);
}

#star-wars > div div:first-child {
	position:absolute;
	width:50%;
	height:10%;
	bottom:20%;
	left:25%;
	border-radius:1em 1em 0 0;
	transition:all .5s ease-out;
}

#star-wars:hover > div:first-child div:first-child {
	height:80%;
	background-color:rgba(0,255,0,.75);
	box-shadow:
		inset 0 -10px 5px 2px rgba(255,255,255,1),
		0 0 1px 1px rgba(0,255,0,1),
		0 0 6px 1px rgba(0,255,0,1),
		0 0 9px 1px rgba(0,255,0,1),
		0 0 15px rgba(255,255,255,1);
}

#star-wars:hover > div:last-child div:first-child {
	height:80%;
	background-color:rgba(255,0,0,.75);
	box-shadow:
		inset 0 -10px 5px 2px rgba(255,255,255,1),
		0 0 1px 1px rgba(255,0,0,1),
		0 0 6px 1px rgba(255,0,0,1),
		0 0 9px 1px rgba(255,0,0,1),
		0 0 15px rgba(255,255,255,1);
}


/*****************/
/* ID = helix */
/*****************/
#helix {
    padding:.5em;
    display:grid;
    justify-content:flex-start;
    overflow:hidden;
}

/* de radio buttons */
#helix label {
    position:relative;
    font-size:.66em;
    color:var(--main-color);
    opacity:0;
    z-index:10;    
    display:flex;
    align-items:center;
}

#helix label::before {
    content:"";
    display:inline-block;
    width:.5em; height:1px;
    margin-right:.25em;
    background-color:currentColor;
}

#helix input:checked + label {
    color:var(--sannes-blue);
}

#helix:hover label {
    opacity:.125;
}

#helix label:hover,
#helix input:focus + label,
#helix:hover input:checked + label {
    opacity:1;
}

/* de helix container */
#helix section {
	position:absolute;
	left:0; right:0; top:0; bottom:0;
   transform-style:preserve-3d;
}

/* de helix items */
#helix div {
    --maat:20%;
    
    --item-color:30,144,255;
    --item-color-van:rgba(var(--item-color),0);
    --item-color-naar:rgb(var(--item-color));
    
    --spin-tijd:4s;
    --spin-delay:3;
	--op-neer-tijd:8s;
    
    position:absolute;
    width:var(--maat); height:var(--maat);
	left:calc(50% - var(--maat)/2);
    
	top:40%;
    padding:5%;
    font-size:.66em;
    line-height:1.2em;
    background:radial-gradient(var(--item-color-van) 15%, var(--item-color-naar) 35%);
	border-radius:50%;
	
    display:none;
    align-items:center;
	justify-content:center;
    text-align:center;
    
    transform-origin:center center -7.25em;
    
    animation-duration:
        var(--spin-tijd), 
        var(--op-neer-tijd);
    animation-delay:
        calc( var(--spin-tijd) /12 *( var(--spin-delay) - var(--spin-offset) ) ),
        calc( var(--op-neer-tijd) /24 *var(--op-neer-offset) );
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-play-state:paused;
}

#helix div:nth-of-type(1) {
    display:flex;
}

#helix:hover div{
	animation-play-state:running;
}

#helix div:nth-of-type(12n+1)  { --spin-offset: 4; --op-neer-offset: -1; }
#helix div:nth-of-type(12n+2)  { --spin-offset: 6; --op-neer-offset: -3; }
#helix div:nth-of-type(12n+3)  { --spin-offset: 8; --op-neer-offset: -5; }
#helix div:nth-of-type(12n+4)  { --spin-offset: 10; --op-neer-offset: -7; }
#helix div:nth-of-type(12n+5)  { --spin-offset: 12; --op-neer-offset: -9; }
#helix div:nth-of-type(12n+6)  { --spin-offset: 14; --op-neer-offset: -11; }
#helix div:nth-of-type(12n+7)  { --spin-offset: 16; --op-neer-offset: -13; }
#helix div:nth-of-type(12n+8)  { --spin-offset: 18; --op-neer-offset: -15; }
#helix div:nth-of-type(12n+9)  { --spin-offset: 20; --op-neer-offset: -17; }
#helix div:nth-of-type(12n+10) { --spin-offset: 22; --op-neer-offset: -19; }
#helix div:nth-of-type(12n+11) { --spin-offset: 24; --op-neer-offset: -21; }
#helix div:nth-of-type(12n+12) { --spin-offset: 26; --op-neer-offset: -23; }

/* spin */
#spin:checked ~ section div:nth-of-type(1) {
    --spin-tijd:2s;
    background:rgb(var(--item-color));
	border-radius:30%;
    transform-origin:center;
    animation-name:spin;
}

@keyframes spin {
	from { transform:rotateY(0); }
	to { transform:rotateY(360deg); }
}

/* 3D spin */
#drieD-spin:checked ~ section div:nth-of-type(1) {
    --spin-tijd:2s;
    background:rgb(var(--item-color));
	border-radius:30%;
    transform-origin:center;
    animation-name:drieD-spin;
}

@keyframes drieD-spin {
	from { transform:perspective(24em) rotateY(0); }
	to { transform:perspective(24em) rotateY(360deg); }
}
    
/* offset spin */
#offset-spin:checked ~ section div:nth-of-type(1) {
    background:rgb(var(--item-color));
	border-radius:30%;
    animation-name:offset-spin;
}

@keyframes offset-spin {
	from { transform:perspective(24em) rotateY(0); }
	to { transform:perspective(24em) rotateY(360deg); }
}

/* verloop spin */
#verloop-spin:checked ~ section div:nth-of-type(1) {
    animation-name:verloop-spin;
}

@keyframes verloop-spin {
	from { transform:perspective(24em) rotateY(0); }
	to { transform:perspective(24em) rotateY(360deg); }
}

/* fade spin */
#fade-spin:checked ~ section div:nth-of-type(1) {
    animation-name:fade-spin;
}

@keyframes fade-spin {
	from { transform:perspective(24em) rotateY(0);}
	15% { opacity:1;}
	50% { opacity:.625;}
	85% { opacity:1;}
	to { transform:perspective(24em) rotateY(360deg);}
}

/* duet spin */
#duet-spin:checked ~ section div:nth-of-type(-n + 2) {
    animation-name:duet-spin;
}

#duet-spin:checked ~ section div:nth-of-type(2)  {
    --item-color:154,205,50;
    display:flex;
	animation-delay:calc(var(--spin-tijd) * -.5);
}

@keyframes duet-spin {
	from { transform:perspective(24em) rotateY(0);}
	15% { opacity:1;}
	50% { opacity:.625;}
	85% { opacity:1;}
	to { transform:perspective(24em) rotateY(360deg);}
}

/* solo helix */
#solo-helix:checked ~ section div:nth-of-type(1) {
    --spin-delay:0;
    --spin-offset:0;
    --op-neer-offset:-12;
    
    animation-name:solo-helix, solo-op-en-neer;
}	

@keyframes solo-helix {
	from { transform:perspective(24em) rotateY(0);}
	15% { opacity:1;}
	50% { opacity:.625;}
	85% { opacity:1;}
	to { transform:perspective(24em) rotateY(360deg);}
}

@keyframes solo-op-en-neer {
	from { top:105%; }
	to { top:calc(-5% - var(--maat)); }
}

/* twaalf helix */
#twaalf-helix:checked ~ section div:nth-of-type(-n + 12) {
    display:flex;
    animation-name:twaalf-helix, twaalf-op-en-neer;
}

@keyframes twaalf-helix {
	from { transform:perspective(24em) rotateY(0);}
	15% { opacity:1;}
	50% { opacity:.625;}
	85% { opacity:1;}
	to { transform:perspective(24em) rotateY(360deg);}
}

@keyframes twaalf-op-en-neer {
	from { top:105%; }
	to { top:calc(-5% - var(--maat)); }
}

/* dubbel helix */
#dubbel-helix:checked ~ section div:nth-of-type(-n + 24) {
    display:flex;
    animation-name:dubbel-helix, dubbel-op-en-neer;
}

#dubbel-helix:checked ~ section div:nth-of-type(-n + 24):not(:nth-of-type(-n + 12)) {
    --item-color:154,205,50;
    --spin-delay:-3;
}

@keyframes dubbel-helix {
	from { transform:perspective(24em) rotateY(0);}
	15% { opacity:1;}
	50% { opacity:.625;}
	85% { opacity:1;}
	to { transform:perspective(24em) rotateY(360deg);}
}

@keyframes dubbel-op-en-neer {
	from { top:105%; }
	to { top:calc(-5% - var(--maat)); }
}

/* anti helix */
#anti-helix:checked ~ section div:nth-of-type(-n + 24) {
    display:flex;
    animation-name:anti-helix, anti-op-en-neer;
}

#anti-helix:checked ~ section div:nth-of-type(-n + 24):not(:nth-of-type(-n + 12)) {
    --item-color:154,205,50;
    --spin-delay:-3;
    animation-direction:reverse;
}

@keyframes anti-helix {
	from { transform:perspective(24em) rotateY(0);}
	15% { opacity:1;}
	50% { opacity:.625;}
	85% { opacity:1;}
	to { transform:perspective(24em) rotateY(360deg);}
}

@keyframes anti-op-en-neer {
	from { top:105%; }
	to { top:calc(-5% - var(--maat)); }
}

/* sneller helix */
#sneller-helix:checked ~ section div:nth-of-type(-n + 24) {    
    display:flex;
    animation-name:sneller-helix, sneller-op-en-neer;
}

#sneller-helix:checked ~ section div:nth-of-type(-n + 24):not(:nth-of-type(-n + 12)) {
    --item-color:154,205,50;
    --spin-tijd:8s;
	--spin-delay:-3;
	--op-neer-tijd:5.333333333s;
    animation-direction:reverse;
}

#sneller-helix:checked ~ section div:nth-of-type(-n + 12) {
    --spin-tijd:2s;
}

@keyframes sneller-helix {
	from { transform:perspective(24em) rotateY(0);}
	15% { opacity:1;}
	50% { opacity:.625;}
	85% { opacity:1;}
	to { transform:perspective(24em) rotateY(360deg);}
}

@keyframes sneller-op-en-neer {
	from { top:105%; }
	to { top:calc(-5% - var(--maat)); }
}

/* twee maten helix */
#maten-helix:checked ~ section div:nth-of-type(-n + 24) {
    display:flex;
    animation-name:maten-helix, maten-op-en-neer;
}

#maten-helix:checked ~ section div:nth-of-type(-n + 24):not(:nth-of-type(-n + 12)) {
    --item-color:154,205,50;
    --maat-top:.1;
	--maat-bottom:.25;
    --spin-tijd:8s;
	--spin-delay:-3;
	--op-neer-tijd:5.333333333s;
    animation-direction:reverse;
}

#maten-helix:checked ~ section div:nth-of-type(-n + 12) {
    --maat-top:.25;
	--maat-bottom:.1;
    --spin-tijd:2s;
}

@keyframes maten-helix {
	from { transform:perspective(24em) rotateY(0);}
	15% { opacity:1;}
	50% { opacity:.625;}
	85% { opacity:1;}
	to { transform:perspective(24em) rotateY(360deg);}
}

@keyframes maten-op-en-neer {
	0% {
		left:calc(50% - 100% * var(--maat-top)/2);
		top:calc(120% - 100% * var(--maat-top)/2); 
		width:calc(100% * var(--maat-top));
		height:calc(100% * var(--maat-top));
	}
	
	50% {
		left:calc(50% - 100% * var(--maat-bottom)/2);
		top:calc(50% - 100% * var(--maat-bottom)/2); 
		width:calc(100% * var(--maat-bottom)); 
		height:calc(100% * var(--maat-bottom));
	}
	
	100% {
		left:calc(50% - 100% * var(--maat-top)/2);
		top:calc(-20% - 100% * var(--maat-top)/2); 
		width:calc(100% * var(--maat-top));
		height:calc(100% * var(--maat-top));
	}
}

/* kwartet helix */
#kwartet-helix:checked ~ section div:nth-of-type(-n + 48) {
    display:flex;
    transform-origin:center center -5em;
    animation-name:kwartet-helix, kwartet-op-en-neer;
}

#kwartet-helix:checked ~ section div:nth-of-type(-n + 24) {    
    --maat-top:.125;
	--maat-bottom:.075;
    --spin-tijd:2s;
    --spin-delay:3;
	--op-neer-tijd:8s;
}

#kwartet-helix:checked ~ section div:nth-of-type(-n + 12) {
    --spin-tijd:4s;
	--spin-delay:-3;
	--op-neer-tijd:99999999999s;
}

#kwartet-helix:checked ~ section div:nth-last-of-type(-n + 24) {
	--item-color:154,205,50;
    --maat-top:.075;
	--maat-bottom:.125;
    --spin-tijd:8s;
	--spin-delay:0;
	--op-neer-tijd:5.333333333s;
	animation-direction:reverse;
}

#kwartet-helix:checked ~ section div:nth-last-of-type(-n + 12) {
    --item-color:255,215,0;
    --spin-tijd:4s;
	--spin-delay:6;
	--op-neer-tijd:4s;
}

@keyframes kwartet-helix {
	from { transform:perspective(24em) rotateY(0);}
	15% { opacity:1;}
	50% { opacity:.625;}
	85% { opacity:1;}
	to { transform:perspective(24em) rotateY(360deg);}
}

@keyframes kwartet-op-en-neer {
	0% {
		left:calc(50% - 100% * var(--maat-top)/2);
		top:calc(120% - 100% * var(--maat-top)/2); 
		width:calc(100% * var(--maat-top));
		height:calc(100% * var(--maat-top));
	}
	
	50% {
		left:calc(50% - 100% * var(--maat-bottom)/2);
		top:calc(50% - 100% * var(--maat-bottom)/2); 
		width:calc(100% * var(--maat-bottom)); 
		height:calc(100% * var(--maat-bottom));
	}
	
	100% {
		left:calc(50% - 100% * var(--maat-top)/2);
		top:calc(-20% - 100% * var(--maat-top)/2); 
		width:calc(100% * var(--maat-top));
		height:calc(100% * var(--maat-top));
	}
}


/*****************/
/* ID = draaibal */
/*****************/
#draaibal {
	perspective:20em;
	overflow:hidden;
}

@keyframes draaibal {
	0%{
		transform: rotateY(0turn) rotateX(0turn) rotateZ(0turn) translateZ(calc(var(--balMaat) *2/3 *1em));
	}
	100%{
		transform: rotateY(1turn) rotateX(2turn) rotateZ(3turn) translateZ(calc(var(--balMaat) *2/3 *1em));
	}
}

#draaibal ul {
	--draaiTijd:12;
	--balMaat:9;
	--aantalSlices:48;
	position:absolute;
	width:calc(var(--balMaat) * 1em); height:calc(var(--balMaat) * 1em);
	left:calc(50% - (var(--balMaat) / 2 * 1em));
	top: calc(50% - (var(--balMaat) / 2 * 1em));
	margin:0; padding:0;
	list-style:none;
	transform-style: preserve-3d;
	animation:draaibal calc(var(--draaiTijd) * 2.5 * 1s) linear infinite paused;
}

#draaibal ul:nth-of-type(1) {animation-delay: calc(var(--draaiTijd) * 5 / 4 * 0 * 1s)}
#draaibal ul:nth-of-type(2) {animation-delay: calc(var(--draaiTijd) * 5 / 4 * -1 * 1s)}
#draaibal ul:nth-of-type(3) {animation-delay: calc(var(--draaiTijd) * 5 / 4 * -2 * 1s)}
#draaibal ul:nth-of-type(4) {animation-delay: calc(var(--draaiTijd) * 5 / 4 * -3 * 1s)}
#draaibal ul:nth-of-type(5) {animation-delay: calc(var(--draaiTijd) * 5 / 5 * -4 * 1s)}

#draaibal:hover ul {
	animation-play-state: running;
}

@keyframes draaibalSlice {
	0%{
		transform: rotateY(calc( (360 / var(--aantalSlices) * var(--sliceNummer) + 0 ) *1deg));
	}
	40% {
		transform: rotateY(calc( (360 / var(--aantalSlices) * var(--sliceNummer) - 22.5 ) *1deg));
	}
	60% {
		transform: rotateY(calc( (360 / var(--aantalSlices) * var(--sliceNummer) + 22.5 ) *1deg));
	}
	100% {
		transform: rotateY(calc( (360 / var(--aantalSlices) * var(--sliceNummer) + 0 ) *1deg));
	}
}

@property --start {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes twirl {
	0% {
		--start:0deg;
	}
	100% {
		--start:360deg;
	}
}

#draaibal li {
	position:absolute;
	width:50%; height:100%;
	top:0; left:0;

	background-image:
		radial-gradient(
			farthest-side circle at right center,
			var(--sliceColorInner) 30%,
			var(--sliceColorOuter) 33%,
			transparent 33% 97%,
			#0006
		),
		conic-gradient(
			from calc( 360deg * var(--sliceNummer) / var(--aantalSlices) + var(--start, 0deg))
			at right center,
			crimson,
			darkorange,
			gold,
			yellowgreen,
			dodgerblue,
			rebeccapurple,
			crimson
		);

	-webkit-mask:
		radial-gradient(
			farthest-side circle at right center,
			red 33%,
			transparent 33% 67%,
			#000c
		);

	border-radius:100% 0 0 100% / 50% 0 0 50%;
	
	transform-origin:right center;
	animation:
		draaibalSlice linear infinite paused, 
		twirl linear infinite paused;
	animation-duration:
		calc(var(--draaiTijd) / 3 * 1s);
	animation-delay:
		calc( var(--draaiTijd) * var(--sliceNummer) / var(--aantalSlices) * -1s ),
		0s;
}

#draaibal:hover ul li {
	animation-play-state: running;
}

#draaibal li:nth-child(even) {
	--sliceColorInner:#999;
	--sliceColorOuter:#999;
}
#draaibal li:nth-child(odd) {
	--sliceColorInner:#666;
	--sliceColorOuter:#666;
}

#draaibal li:nth-child(1) { --sliceNummer:0; }
#draaibal li:nth-child(2) { --sliceNummer:1; }
#draaibal li:nth-child(3) { --sliceNummer:2; }
#draaibal li:nth-child(4) { --sliceNummer:3; }

#draaibal li:nth-child(5) { --sliceNummer:4; }
#draaibal li:nth-child(6) { --sliceNummer:5; }
#draaibal li:nth-child(7) { --sliceNummer:6; }
#draaibal li:nth-child(8) { --sliceNummer:7; }

#draaibal li:nth-child(9) { --sliceNummer:8; }
#draaibal li:nth-child(10) { --sliceNummer:9; }
#draaibal li:nth-child(11) { --sliceNummer:10; }
#draaibal li:nth-child(12) { --sliceNummer:11; }

#draaibal li:nth-child(13) { --sliceNummer:12; }
#draaibal li:nth-child(14) { --sliceNummer:13; }
#draaibal li:nth-child(15) { --sliceNummer:14; }
#draaibal li:nth-child(16) { --sliceNummer:15; }


#draaibal li:nth-child(17) { --sliceNummer:16; }
#draaibal li:nth-child(18) { --sliceNummer:17; }
#draaibal li:nth-child(19) { --sliceNummer:18; }
#draaibal li:nth-child(20) { --sliceNummer:19; }

#draaibal li:nth-child(21) { --sliceNummer:20; }
#draaibal li:nth-child(22) { --sliceNummer:21; }
#draaibal li:nth-child(23) { --sliceNummer:22; }
#draaibal li:nth-child(24) { --sliceNummer:23; }

#draaibal li:nth-child(25) { --sliceNummer:24; }
#draaibal li:nth-child(26) { --sliceNummer:25; }
#draaibal li:nth-child(27) { --sliceNummer:26; }
#draaibal li:nth-child(28) { --sliceNummer:27; }

#draaibal li:nth-child(29) { --sliceNummer:28; }
#draaibal li:nth-child(30) { --sliceNummer:29; }
#draaibal li:nth-child(31) { --sliceNummer:30; }
#draaibal li:nth-child(32) { --sliceNummer:31; }


#draaibal li:nth-child(33) { --sliceNummer:32; }
#draaibal li:nth-child(34) { --sliceNummer:33; }
#draaibal li:nth-child(35) { --sliceNummer:34; }
#draaibal li:nth-child(36) { --sliceNummer:35; }

#draaibal li:nth-child(37) { --sliceNummer:36; }
#draaibal li:nth-child(38) { --sliceNummer:37; }
#draaibal li:nth-child(39) { --sliceNummer:38; }
#draaibal li:nth-child(40) { --sliceNummer:39; }

#draaibal li:nth-child(41) { --sliceNummer:40; }
#draaibal li:nth-child(42) { --sliceNummer:41; }
#draaibal li:nth-child(43) { --sliceNummer:42; }
#draaibal li:nth-child(44) { --sliceNummer:43; }

#draaibal li:nth-child(45) { --sliceNummer:44; }
#draaibal li:nth-child(46) { --sliceNummer:45; }
#draaibal li:nth-child(47) { --sliceNummer:46; }
#draaibal li:nth-child(48) { --sliceNummer:47; }