/* CSS Document */
*, *::after, *::before {
  box-sizing:border-box;  
}

body {
  --achtergrond1: #4413AA;
  --achtergrond2: #e05d46;
  --wolken: #7919CC;
  --basis: #DEF1FB;
  --schaduw: #BEE6FF;
  --rondjes: #BEE6FF;
  --bloos: #F988B8;
  --mond: #FF7EBC;
  --tong: #FF4F9F;
}

body.zon {
  --achtergrond1: #027DFD;
  --achtergrond2: #B2D397;
  --wolken: #16AAFC;
  --basis: #FFBB01;
  --schaduw: #F69F02;
  --rondjes: transparent;
  --bloos: #F8840D;
  --mond: #FD5300;
  --tong: #c04304;
}

html, body {
  height:100%;
  margin:0;
	overflow:hidden;
  background-image:
		linear-gradient(
			to bottom,
			var(--achtergrond1) 40%,
			var(--achtergrond2)
		);
}


/* BUTTON ///////////////////////////////////////////////*/
button {
	position: relative;
	margin:1em;
	padding:.5em;
	font-size:1em;
	cursor:pointer;
	z-index: 200;
}


/* LUCHT ///////////////////////////////////////////////*/
.lucht div {
  position: absolute;
	width: 13em; height: 5em;
	background-color: var(--wolken);
  border-radius: 50% / 80% 80% 40% 40%;
}

.lucht div:before,
.lucht div:after {
	content: "";
	position: absolute;
	background-color: inherit;
	border-radius: inherit;
}

.lucht div:before {
	width: 6em; height: 3em;
	left: 2em; top: -1.5em;
}

.lucht div:after {
	width: 4em; height: 2em;
	left: 7em; top: -0.8em;
}

.wolk_3 {
	left: 3em; top: 3em;
}

.wolk_2 {
	right: 2em; top: 5em;
  scale:0.8;
	filter:brightness(.95);
}

.wolk_1 {
  right: 5em; top: 12em;
  scale:0.5;
	filter:brightness(.9);
}


/* HELE MAAN /////////////////////////////*/
.maan {
  position: absolute;
  width: 25em; height: 25em;
  left:calc(50% - 12.5em);
  bottom:calc(50% - 12.5em);
	scale:.5;

	filter:drop-shadow(0 0 2em var(--schaduw));
}

@media (min-width:25em) {
	.maan {
		scale:.75;
	}
}

@media (min-width:36em) {
	.maan {
		scale:1;
	}
}

/* LIJF */
.lijf {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background-image:
		radial-gradient(
			circle at center 33%,
			var(--basis) 50%,
			var(--schaduw) 65%
		);
}

/* RONDJES ///////////////////////////////*/
@keyframes move-rondje {
  0% {
    translate:0 0;
  }
  100% {
    translate:0 -4em;
  }
}

.rondjes div {
  position: absolute;
  background-color: var(--rondjes);
  border-radius: 50%;
	rotate:var(--rondjeRotate, 0deg);

	animation: move-rondje 3s ease-in-out infinite alternate;
}

.rondje_1 { /* link onder */
  width: 5.3em; height: 6em;
	left: 3em; top: 15em;
  --rondjeRotate:-400deg;
}

.rondje_2 { /* rechts onder */
  width: 4em; height: 4.4em;
	left: 17.3em; top: 16em;
  --rondjeRotate:40deg;
}

.rondje_3 { /* 1inks boven klein*/
  width: 1.9em; height: 1.7em;
	left: 3em; top: 9em;
  --rondjeRotate:10deg;
}

.rondje_4 { /* 1inks boven middel*/
  width: 2.2em; height: 2em;
	left: 4.5em; top: 7.2em;
}

.rondje_5 { /* rechts boven klein*/
  width: 1.9em; height: 1.7em;
	left: 19.8em; top: 12.2em;
  --rondjeRotate:-5deg;
}

.rondje_6 { /* rechts boven middel*/
  width: 3em; height: 3.4em;
	left: 11.8em; top: 5em;
  --rondjeRotate:-50deg;
}

.rondje_7 { /* rechts boven groot*/
  width: 5.3em; height: 6em;
	left: 15.8em; top: 6em;
  --rondjeRotate:-40deg;
}

/* ARMEN //////////////////////////////////*/
@keyframes wiegen {
  0% {
    rotate:calc( -5deg * var(--dir, 1) );
  }
  100% {
    rotate:calc( -8deg * var(--dir, 1) );
  }
}

.arm{
  position: absolute;
	width: 4.1em; height: 14em;
	top: 15em;
  z-index: -1;

	border-radius: 50%;

	transform-origin:center .5em;
	animation: wiegen 3s ease-in-out infinite alternate;
}

.arm::after {
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;

	border-style: solid;
  border-width: 1.6em;
	border-color: transparent transparent transparent var(--schaduw);

	-webkit-mask:conic-gradient(from 0deg at 50% 90%, #0000 270deg, red 0);
}

.arm.links {
  left: 0;
}


.arm.rechts {
	--dir:-1;
  right: 0;
	scale:-1 1;
}

/* HANDEN */
.hand {
	position:absolute;
	width: 2.5em; height: 2.5em;
	left:0m; top: 11.1em;
	border-radius: 50%;
}

/* VINGERS */
.hand div {
	position:absolute;
  width: 1em; height: 2.2em;
	background-color: var(--schaduw);
  border-radius: 50%;
  transform-origin: center top;
}

.pink {
  left: .5em;
	top: 0.3em;
  rotate:40deg;
}
.ringvinger {
  left: 0.8em;
	top: 0.6em;
  rotate:20deg;
}
.wijsvinger {
  left: 1em;
	top: 0.6em;
  rotate:-10deg;
}
.duim {
  left: .8em;
	top: 0.3em;
  rotate:-60deg;
}


/* GEZICHT //////////////////////////////////*/
.gezicht {
  position: absolute;
  width: 10em; height: 10em;
  left: calc(50% - 10em/2);
  top: calc(50% - 10em/2);
}

/* OGEN /////////////////////////////////////*/
@keyframes ogen-sluiten {
  0%, 82% {
    background-color: white;
  }
  90% {
    background-color: black;
  }
  100% {
    top: 0em;
    height: 10%;
    background-color: black;
  }
}

.oog {
  position: absolute;
	width: 4.5em; height: 4.5em;
  left: 0em; top: 0.8em;
	
	background-image:radial-gradient(black 1.4em, #0000 0 );
	border-radius: 50%;

	transform-origin: 5em bottom;
 	animation: ogen-sluiten 3s ease-in-out infinite alternate;
}

.oog.links {
	rotate:-6deg;
}
	
.oog.rechts {
	rotate:6deg;
	scale:-1 1;
}

/* ooglid */
.oog::after {
	content:"";
	position:absolute;
	inset: -5% 0% 50% 0%;
	background-color: var(--basis);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* WENKBRAUWEN */
.wenkbrauw {
	position: absolute;
  width: 1.8em; height: 0.5em;
  left: calc(50% - 2.4em/2); top: -2em;
	background-color: black;
  border-radius: .25em;
	rotate:-5deg;
}

/* BLOZEN */
.bloos {
	position:absolute;
  width: 2em; height: 0.8em;
  left: -1.5em; bottom: -1.25em;
	background-color: var(--bloos);
  border-radius: 50%;
  box-shadow: 0px 0px 9px 9px var(--bloos);
  transform: rotate(8deg);
}

/* MOND */
@keyframes gapen {
  0% { /* mond dicht */
    scale:1 .75;
  }
  100% { /* mond open */
    scale:1 1.9;
    border-radius: 50%;
    top: 5em;
  }
}
.mond {
  position: absolute;
  width: 7em; height: 3em;
  left: calc(50% - 7em/2);
	top: 6em;
	overflow: hidden; 
	
	background-color: var(--mond);
  border-radius: 50% 50% 50% 50% / 25% 25% 75% 75%;

  transform-origin: center bottom 10%;
  animation: gapen 3s ease-in-out infinite alternate;
}

.mond .tong {
  position: absolute;
  width: 7em; height: 1em;
  left: calc(50% - 7em/2);
	bottom: 0em;
  background-color: var(--tong);
  border-radius: 50% 50% 100% 100% / 100%;
}



/* CLASS ZON /////////////////////////////////////////////*/
/* OGEN */
body.zon .rondjes div {
	display:none;
}

/* OOG */
body.zon .oog {;
	background-image: 
		radial-gradient(
			transparent 1.4em,
			white 0
		),
		conic-gradient(
			from var(--from, -54deg) at var(--at, 40%) 50%,
			black 300deg,
			white 0
		);

	animation:none;
}

body.zon .oog.rechts {
	--from:-234deg;
	--at:60%;
}

/* ooglid */
body.zon .oog::after {
	display:none;
}

/* WENKBRAUWEN */
body.zon .wenkbrauw {
	top: -2.5em;
	rotate:-15deg;
}

/* MOND */
body.zon .mond {
	top: 6.3em;
	border-radius: 20% 20% 50% 50% / 40% 40% 60% 60%;
  animation: none;
}

body.zon .mond .tong {
  width: 5em;
  left: calc(50% - 5em/2);
}

/* ARMEN */
@keyframes zwaaien {
  0% {
    rotate:calc( -120deg * var(--dir, 1) );
  }
  100% {
    rotate:calc( -150deg * var(--dir, 1) );
  }
}

body.zon .arm {
	animation: zwaaien .1s ease-in-out infinite alternate;
}

body.zon .arm.links {
 left:auto; right:0;
}	

body.zon .arm.rechts {
	left:0; right:auto;
}