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

html,
body {
  height: 100%;
  margin: 0;
	overflow: hidden;
}

:root {
  --skinColor: white;
	--eye-size:.8em;
	--eyeColor: black;
	--eyeGlowColor: white;
	--finger2Color: rgb(233 233 233);
  --finger3Color: rgb(211 211 211);
  --lightShadowColor: #c9c9c933;
  --darkShadowColor: #8d8d8d33;

	--skyColor1: rgb(0 140 255);
  --skyColor2: rgb(116 173 238);
  --skyColor3: rgb(160 217 235);

	--stars1: #fff, #fff0;
	--stars2: #fcf, #fff0;
	--stars3: #c9f, #fff0;

	--starsAnimation: stars infinite;
  
	--floorColor1: rgb(208 255 194);
  --floorColor2: rgb(162 226 143);
  --floorColor3: rgb(95 182 69);
  --floorColor4: rgb(59 151 31);
  
	--roadColor: rgb(116 116 116);

	--orb-size:7em;
	--sunColor: rgb(255 230 0);
	--sunRadientColor: rgb(255 196 0);
  --sunBgColor: rgb(255 196 0);
	--sunGlowColor: rgb(255 196 0 / .5);

	--buttonBgColor:var(--skinColor);
	--switchColor:rgb(185 185 185);
	--sunIconColor:rgb(138 138 138);
	--moonIconColor:rgb(223 223 223);
}

:root.darkmode {
  --skinColor: rgb(255 248 221);
	--finger2Color: rgb(227 231 192);
  --finger3Color: rgb(201 207 169);	
	--lightShadowColor: #aaeedd33;
  --darkShadowColor: #33aa9933;
	--filter:drop-shadow(0em 0em 2em rgb(255 248 221));

  --skyColor1: rgb(6 0 95);
  --skyColor2: rgb(66 9 112);
  --skyColor3: rgb(146 66 161);

  --floorColor1: rgb(14 11 9);
  --floorColor2: rgb(26 20 16);
  --floorColor3: rgb(31 25 19);
  --floorColor4: rgb(41 35 29);

  --roadColor: rgb(19 17 15);

	--buttonBgColor:rgb(57 51 45);
	--switchColor:rgb(106 100 94);
	--sunIconColor:rgb(144 138 132);
	--moonIconColor:rgb(229 223 217);
}

/* baymax */
.baymax,
.baymax div,
/* sun and moon */
.orb,
.orb div,
/* switch */
.switch,
input,
/* world */
.floor,
.space {
  position: absolute;
} 





/*********/
/* WORLD */
/*********/

/* sky */
body {
  background-image:
		linear-gradient(
			var(--skyColor1) 5%,
			var(--skyColor2) 35%,
			var(--skyColor3) 50%
		);
}

/* floor with road  */
.floor {
  inset:50% 0 0 0;
  background-image:
		conic-gradient(
			at center -50%,
			transparent 160deg,
			var(--roadColor) 0 200deg,
			transparent 0
		),
		linear-gradient(
			var(--floorColor1),
			var(--floorColor2),
			var(--floorColor3),
			var(--floorColor4)
		);
}





/**********/
/* BAYMAX */
/**********/

/* container */
.baymax {
  left: calc(50% - 11em);
  bottom: 30%;
  height: 27em;
  width: 22em;
  z-index: 700;

	display:grid;
	justify-items:center;
}

/* glow effect on baymax */
:root.darkmode .baymax {
  filter:var(--filter);
}


/* hoofd */
.hoofd {
  z-index: 200;
	width: 6em;
  height: 4em;

	display: grid;
	place-items:center;
	
	background:
		/* kleur */
		var(--skinColor)
		/* streepje */
		linear-gradient(var(--eyeColor) 0 0)
		center /
		3em 0.11em
		no-repeat;
  border-radius: 45% 45% 30% 30% / 55% 55% 45% 45%;
  box-shadow:
		0em .5em .5em var(--lightShadowColor),
		inset 0em 1em 1em var(--lightShadowColor),
		inset 0em -.5em 1em var(--lightShadowColor);

	transform-origin: center bottom;
	animation: headtilt 1s ease-in-out infinite alternate;
}

.hoofd:hover {
  transform-origin: center;
	animation: headflip 2s ease-in-out infinite;
}

@keyframes headtilt {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

@keyframes headflip {
	60%, 100% {
		rotate:360deg;
	} 

  0% {
    translate:0 0;
  }
  50% {
    translate:0 -8%;
  }
  60% {
    translate:0 4%;
  }
  70% {
    translate:0 -2%;
	}
	80% {
    translate:0 1%;
	}
	90% {
		translate:0 -.5%;
	}
	100% {
    translate:0 0;
  }
}


/* ogen */
.oog {
	width: var(--eye-size);
  aspect-ratio:1;
	
	background-color: var(--eyeColor);
  border-radius: 1em;
  
  animation: knipperen 4s linear infinite;
}

.oog.rechts {
  left:calc(50% + 1.3em - var(--eye-size) / 2 );
}

.oog.links {
  right:calc(50% + 1.3em - var(--eye-size) / 2 );
}

@keyframes knipperen {
  0%, 48%, 52%, 100% {
    transform: none;
  }
  50% {
    transform: scaleY(0);
  }
}


/* buik */
.buik {
  top: 3em;
	z-index: 100;
	width: 15em;
  height: 20.6em;

	display:grid;
	justify-items:center;
}

.buik .boven {
	height: 12em;
  width: 13em;

  background-color: var(--skinColor);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	box-shadow: inset 0 1em 1em var(--lightShadowColor);
}

.buik .onder {
	top:4.6em;
  height: 16em;
  width: 15em;

  border-radius: 7.5em;
  background-color: var(--skinColor);
  box-shadow: inset 0em -2em 2em var(--lightShadowColor);
  
  animation: buikie 1s ease-in-out infinite alternate;
}

@keyframes buikie {
  0% {
		translate:.07em;
  }
  100% {
    translate:-.07em;
  }
}

.badge {
	top: 15%;
  right: 28%;
	height: 1.5em;
  width: 1.3em;

  background-image: linear-gradient(
      rgb(223, 223, 223) calc(.75em - 1px),
      rgb(165, 165, 165) 0 calc(.75em + 1px),
      rgb(197, 197, 197) 0);
  border-radius: 50%;

  transform:skew(5deg, 5deg);
}


/* armen */
.arm {
	top: 3.75em;
	width: 4em;
  height: 15em;

  background-color: var(--skinColor);
  
  animation: 1s ease-in-out infinite running;
}

.arm.links {
  right: calc(50% + 4.875em);

  border-radius: 50% 20% 50% 50%;
  box-shadow: inset -2.5em 3em 1em var(--darkShadowColor);

  transform-origin: 70% 50%;
	animation-name: armpie-links;
  animation-direction: alternate-reverse;
}


.arm.rechts {
  left:calc(50% + 4.875em);

  border-radius: 20% 50% 50% 50%;
  box-shadow: inset 2.5em 3em 1em var(--darkShadowColor);

  transform-origin: 30% 50%;
	animation-name: armpie-rechts;
  animation-direction: alternate;
}

@keyframes armpie-links {
  0% {
    rotate:31deg;
  }
  100% {
  	rotate:34deg;
  }
}

@keyframes armpie-rechts {
  0% {
    rotate:-31deg;
  }
  100% {
    rotate:-34deg;
  }
}

/* vingers */
.links .vinger {
	border-radius: 20% 50% 50% 50%;
}

.rechts .vinger {
	border-radius: 50% 20% 50% 50%;
}

.vinger:nth-child(1) {
  top: 13.6em;
	z-index: 50;
  width: 1.3em;
  height: 2em;

	background-color: var(--skinColor);
}

.links .vinger:nth-child(1) {
  rotate:-40deg;
  left: 39%;
  box-shadow: inset 0.3em 0.4em 0.5em var(--darkShadowColor);
}

.rechts .vinger:nth-child(1) {
  rotate:40deg;
  right: 39%;
  box-shadow: inset -0.3em 0.4em 0.5em var(--darkShadowColor);
}

.vinger:nth-child(2) {
  top: 13.7em;
	z-index: 25;
  width: 1.3em;
  height: 1.9em;
  
  background-color: var(--finger2Color);
}

.links .vinger:nth-child(2) {
  rotate:-55deg;
  left: 47%;
}

.rechts .vinger:nth-child(2) {
  rotate:55deg;
  right: 47%;
}

.vinger:nth-child(3) {
  top: 13.5em;
  width: 1.3em;
  height: 1.9em;
  
  background-color: var(--finger3Color);
}

.links .vinger:nth-child(3) {
  rotate:-70deg;
  left: 50%;
}

.rechts .vinger:nth-child(3) {
  rotate:70deg;
  right: 50%;
}

.duim {
  top: 11.5em;
	width: 1.3em;
  height: 2.1em;
  
  background-color: var(--skinColor);
}

.links .duim {
  left: 60%;
	rotate:-50deg;
  border-radius: 50% 10% 50% 50%;
  box-shadow: inset -0.3em 0.4em 0.5em var(--darkShadowColor);
}

.rechts .duim {
  right: 60%;
	rotate:50deg;
  border-radius: 10% 50% 50% 50%;
  box-shadow: inset 0.3em 0.4em 0.5em var(--darkShadowColor);
}

/* benen */
.been {
	top:16em;
	width: 5em;
  height: 11em;

  background-color: var(--skinColor);
  border-radius: 47%;

  transform-origin: center bottom;
	animation: lekkerlopen 1s ease-in-out infinite running;
}

.been.links {
  right:calc(50% - .5em);
  rotate:-7deg;

  box-shadow:
		inset -1.5em 6em 1em var(--lightShadowColor),
		inset .5em -1em 1em var(--lightShadowColor);

  animation-direction: alternate;
}

.been.rechts {
  left:calc(50% - .5em);
  rotate:7deg;

  box-shadow:
		inset 1.5em 6em 1em var(--lightShadowColor),
		inset -.5em -1em 1em var(--lightShadowColor);

  animation-direction: alternate-reverse;
}

@keyframes lekkerlopen {
  100% {
    scale:.9 1;
		translate:0 -.5em;
    background: var(--finger2Color);
  }
}





/****************/
/* SUN AND MOON */
/****************/

.orb {
	left: calc(16% - var(--orb-size) / 2);
	top: 6%;
	z-index: 600;

	width: var(--orb-size);
  aspect-ratio: 1;

	border-radius: 50%;	
}


/* sun */
:root:not(.darkmode) .orb {
	background-color: var(--sunColor);
	box-shadow: 0em 0em 1em var(--sunRadientColor);

	transform-style:preserve-3d;

	display:grid;
	place-items:center;
}

/* stralenkrans */
:root:not(.darkmode) .orb div {
	width:115%;
	aspect-ratio:1;

	background: var(--sunBgColor);
	box-shadow: 0 0 4em var(--sunGlowColor);

	transform: translateZ(-1em);
	animation: zonnetje 10s linear infinite;
}

:root:not(.darkmode) .orb div:nth-child(2) {
	animation-delay: calc(10s/3*-1);
}

:root:not(.darkmode) .orb div:nth-child(3) {
	animation-delay: calc(10s/3*-2);
}

@keyframes zonnetje {
 100% {
    rotate:360deg;
  }
}


/* moon */
:root.darkmode .orb {
	background-color: white;

	animation: maan 1.5s ease-in-out infinite alternate;
}

@keyframes maan{
  0%{
    box-shadow: 0 0 1.5em var(--skinColor);
  }
  100%{
    box-shadow: 0 0 3.5em var(--skinColor);
  }
}

/* kraters */
:root.darkmode .orb div {
	background-color: var(--lightShadowColor);
}

:root.darkmode .orb div:nth-child(1) {
	left: 25%;
  top: 16%;
	height: 28%;
  width: 23%;
	border-radius: 71% 29% 37% 63% / 44% 33% 67% 56%;
  box-shadow:inset .2em -.2em 0em var(--darkShadowColor);
}

:root.darkmode .orb div:nth-child(2) {
	left: 70%;
  top: 37%;
	height: 20%;
  width: 14%;
	border-radius: 71% 29% 37% 63% / 44% 33% 67% 56%;
  box-shadow:inset -.15em -.25em 0em var(--darkShadowColor);
}

:root.darkmode .orb div:nth-child(3) {
	left: 28%;
  top: 60%;
	height: 26%;
  width: 21%;
	border-radius: 71% 29% 37% 63% / 44% 33% 67% 56%;
  box-shadow:inset -.15em -.25em 0em var(--darkShadowColor);
}





/***********/
/* STERREN */
/***********/

:root.darkmode .space {
	width:100vmax;
	height:100vmax;
	left:calc( (100vw - 100vmax) / 2 );
	top:calc( (100vh - 100vmax) / 2 );

  background-position:center;
	background-size:250px 250px;
}

:root.darkmode .stars1 {
  background-image:
    radial-gradient( 1px 1px     at 25px 5px,   var(--stars1)),
    radial-gradient( 1px 1px     at 50px 25px,  var(--stars1) ),
    radial-gradient( 1px 1px     at 125px 20px, var(--stars1) ),
    radial-gradient( 1.5px 1.5px at 50px 75px,  var(--stars1) ),
    radial-gradient( 2px 2px     at 15px 125px, var(--stars1) ),
    radial-gradient( 2.5px 2.5px at 110px 80px, var(--stars1) ),
    radial-gradient( 1px 1px     at 100px 20px, var(--stars1) ),
    radial-gradient( 2px 2px     at 20px 50px,  var(--stars1) ),
    radial-gradient( 2.5px 2.5px at 100px 5px,  var(--stars1) );

  animation: var(--starsAnimation) 140s -3s;
}

:root.darkmode .stars2 {
  background-image:
    radial-gradient( 1px 1px     at 75px 125px,  var(--stars2) ),
    radial-gradient( 1px 1px     at 100px 75px,  var(--stars2) ),
    radial-gradient( 1.5px 1.5px at 199px 100px, var(--stars2) ),
    radial-gradient( 2px 2px     at 20px 50px,   var(--stars2) ),
    radial-gradient( 2.5px 2.5px at 100px 5px,   var(--stars2) ),
    radial-gradient( 2.5px 2.5px at 5px 5px,     var(--stars2) );

  animation: var(--starsAnimation) 120s;
}

:root.darkmode .stars3 {
  background-image:
  	radial-gradient( 1px 1px     at 25px 5px,    var(--stars3) ),
    radial-gradient( 1px 1px     at 50px 25px,   var(--stars3) ),
    radial-gradient( 1px 1px     at 125px 20px,  var(--stars3) ),
    radial-gradient( 1.5px 1.5px at 50px 75px,   var(--stars3) ),
    radial-gradient( 2px 2px     at 15px 125px,  var(--stars3) ),
    radial-gradient( 2.5px 2.5px at 110px 80px,  var(--stars3) ),
    radial-gradient( 1px 1px     at 75px 125px,  var(--stars3) ),
    radial-gradient( 1px 1px     at 100px 75px,  var(--stars3) ),
    radial-gradient( 1.5px 1.5px at 199px 100px, var(--stars3) ),
    radial-gradient( 2.5px 2.5px at 5px 5px,     var(--stars3) );

  animation: var(--starsAnimation) 110s -5s;
}

@keyframes stars {
  40% {
    opacity: 0.9;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 0.9;
  }
  100% {
    rotate:360deg;
  }
}





/***********/
/* BUTTONS */
/***********/

.switch {
	left: calc(50% - 3.4em);
	bottom: 10%;

	width: 6.8em;
  height: 3.4em;
	padding:.3em;

	background-color: var(--buttonBgColor);
	background-image: radial-gradient(closest-side circle, var(--switchColor) 100%, transparent 0);
	background-position:right center;
	background-size:2.8em 2.8em;
	background-repeat: no-repeat;
	background-origin: content-box;
	border-radius: 1.7em;
}

:root.darkmode .switch {
	background-position:left center;
}

/* the radio buttons */
input {
	appearance: none;
	inset:0;
	margin:0;

	display: flex;
	align-items: center;

	border-radius: inherit;
	font-size: 1em;

	cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym57.cur), auto;
}

input:not(:checked) {
	z-index: 900;
}

/* sun icon */
input[value="lightmode"] {
	background-image: linear-gradient(var(--sunIconColor) 0 0);
	background-repeat: no-repeat;
	background-size: 1.4em 1.4em;
	background-position: calc(100% - 1em) center;
}

input[value="lightmode"]::before, 
input[value="lightmode"]::after {
	content:"";
	position: absolute;
	right:1em;
	width:1.4em;
	aspect-ratio:1;
	background-color: var(--sunIconColor);
}

input[value="lightmode"]::before {
	rotate:30deg;
} 

input[value="lightmode"]::after {
	rotate:60deg;
}

/* moon icon */
input[value="darkmode"]::before {
	content:"";
	position: absolute;
	left:.85em;
	width:1.7em;
	aspect-ratio:1;
	border-radius: 50%;
	box-shadow: inset .625em -.3125em var(--moonIconColor);
}





/****************/
/* SMALL SCREEN */
/****************/

@media (max-width: 600px), (max-height: 600px) {
  :root {
		--skinColor: rgb(63 63 63);
		--eye-size:1.2em;
		--finger2Color: rgb(48 48 48);
		--finger3Color: #000;
		--lightShadowColor: #111c;
		--darkShadowColor: #111;
		
		--skyColor1: rgb(163 163 163);
		--skyColor2: rgb(201 201 201);
		--skyColor3: rgb(255 255 255);
	
		--floorColor1: rgb(0 0 0);
		--floorColor2: rgb(63 63 63);
		--floorColor3: rgb(136 136 136);
		--floorColor4: rgb(219 219 219);
	
		--orb-size:5em;
		--sunColor: rgb(0 0 0);
		--sunRadientColor:rgb(255 255 255 / 0.63);
		--sunBgColor: rgb(100 100 100);
		--sunGlowColor: rgb(100 100 100 / .5);
		
		--roadColor: rgb(255 255 255);
  }

	/* container */
  .baymax {
		bottom:35%;
		transform-origin: bottom;
    transform: scale(.5);
  }

	/* ogen */
	.oog {
		background-image: radial-gradient(at 33% 33%, var(--eyeGlowColor) 20%, transparent 0);
	}
}