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


/* achtergrond */
html,
body {
  height: 100%;
  margin: 0;
  background-color: var(--achtergrond);
  overflow: hidden;
}

/* ALLE KLEUREN AANGEGEVEN IN DE ROOT */
:root {
  --wit: white;
  --achtergrond: #020304;
  --zwart: #020304;
  --paars: #46267e;
  --donkerpaars: #332766;
  --huidskleur: #c36972;
  --huidkleurschaduw: #974660;
  --hoed: #3d0d23;
  --hoedschaduw: #390c21;
  --binnenkantoor: #8e434b;
  --oorenhoedkleur: #4f0e2e;
  --highlightblauw: #424898;
  --hoedbandvoor: #711642;
  --lichtpaars: #553a8f;
  --ooggeel: #fdd945;
  --oogschaduw: #f7a53e;
  --ooglid: #640f2c;
  --neus: #7c2846;
  --sjaalhighlight: #6667ad;
  --sjaal: #66328a;
  --torso: #4f0d27;
  --gloeilamp: #f9ee64;
  --gloed: #93182c;
  --lampschroef: #9081a0;
  --schroefschaduw: #774996;
  --bovenarm: #731533;
  --onderarm: #9a2955;
  --armschaduw: #691330;
}

/* ALLE KLEUREN VERANDERD IN DE ROOT */
:root.dark-mode {
  --wit: #d1eaf0;
  --zwart: #3c1336;
  --achtergrond: #05060b;
  --paars: #2a2f86;
  --donkerpaars: #2b2b6a;
  --huidskleur: #786980;
  --huidkleurschaduw: #5c496d;
  --hoed: #201026;
  --hoedschaduw: #1d0f23;
  --binnenkantoor: #524155;
  --oorenhoedkleur: #2a1433;
  --highlightblauw: #324b9b;
  --hoedbandvoor: #3f1d4c;
  --lichtpaars: #344295;
  --ooggeel: #cbd855;
  --oogschaduw: #cda843;
  --ooglid: #240c1c;
  --neus: #533a5d;
  --sjaalhighlight: #4464ac;
  --sjaal: #3a3a8f;
  --torso: #371333;
  --gloeilamp: #bfccea;
  --gloed: transparent;
  --lampschroef: #5a6fb3;
  --schroefschaduw: #464a9a;
  --bovenarm: #40183a;
  --onderarm: #592a5e;
  --armschaduw: #3b1436;
}

/* de container waar alle lichaamselementen inzitten */
.niko {
  position: absolute;
	bottom: 0;
  left: calc(50% - 17.5em);
	width: 35em;
  height: 48em;

	display:grid;
	justify-items:center;
}

/* hoed van Niko */
.hoed {
  position: absolute;
  top: 5em;
	z-index: 20;
  width: 14.5em;
  height: 6em;

  background-image: radial-gradient(
    300px 120px at bottom,
    var(--hoed) 50%,
    var(--hoedschaduw) 0
  );
  border-radius: 50% / 100% 100% 0 0;
}

.hoedband {
	position: absolute;
	top: 9.25em;
	width: 30em;
  height: 5em;
}

.hoedband .voorkant,
.hoedband .achterkant {
  position: absolute;
  inset:0;
  border-radius: 50% / 70% 70% 30% 30%;
}

.hoedband .voorkant {
  z-index: 50;
	background-image: radial-gradient(
    25em 4.375em at bottom,
    transparent 70%,
    var(--hoedbandvoor) 0
  );
}

.hoedband .achterkant {
  background-color: var(--oorenhoedkleur);
}

/* oren van Niko */
.oor {
  position: absolute;
  top: 3em;
	z-index: 30;
	width: 6em;
  height: 7em;
	
	background-color: var(--oorenhoedkleur);
}

.oor.links {
  right: calc(50% + 3em);
  border-radius: 3% 74% 62% 28% / 51% 59% 50% 42%;
}

.oor.rechts {
  left: calc(50% + 3em);
  border-radius: 74% 3% 28% 62% / 59% 51% 42% 50%;
}

.binnenkant {
  position: absolute;
	top: 0.5em;
	width: 3em;
  height: 6em;
	
	background-color: var(--binnenkantoor);
}
.binnenkant.links {
  left:.3em;
  border-radius: 5% 100% 38% 82% / 36% 75% 24% 85%;
}

.binnenkant.rechts {
  right:.3em;
  border-radius: 100% 5% 82% 38% / 75% 36% 85% 24%;
}

/* hoofd van Niko */
.hoofd {
  position: absolute;
  top: 5em;
  z-index: 10;
	width: 15em;
  height: 14em;

  background-image:
		radial-gradient(
    	200px 125px at bottom,
    	var(--huidskleur) 66%,
    	var(--huidkleurschaduw) 34%
  	);
	border-radius: 50% / 45% 45% 55% 55%;
}

/* haar van Niko */
.haarlok {
	position: absolute;
}

.haarlok.links1,
.haarlok.links2  {
	box-shadow: inset .25em 0 var(--highlightblauw);
}

.haarlok.links1 {
  top: 5em;
  left: -1em;
	width: 3em;
  height: 3.5em;

	background-image: radial-gradient(
    12.5em 3.125em at bottom right,
    var(--paars) 50%,
    var(--donkerpaars) 0
  );
  border-radius: 34% 7% 100% 0% / 100% 10% 89% 0%;

	rotate:-10deg;
}

.haarlok.links2 {
  top: 6em;
  left: 0;
	z-index: 20;
	width: 3em;
  height: 8em;

	background-image: radial-gradient(
    18.75em 14.375em at bottom right,
    var(--paars) 50%,
    var(--donkerpaars) 0
  );
  border-radius: 2% 10% 5% 96% / 20% 0% 98% 74%;
}

.haarlok.afsnijding {
	top: 6em;
  left: 0;
	z-index: 20;
	width: 3em;
  height: 8em;

  background-image: radial-gradient(
    300px 230px at bottom right,
    transparent 50%,
    var(--donkerpaars) 0
  );
  border-radius: 2% 10% 5% 96% / 20% 0% 98% 74%;
}

.haarlok.links3 {
  top: 3.4em;
  left: 2.8em;
	width: 4em;
  height: 5em;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

	background-color: var(--paars);
  box-shadow: inset 2.5em .625em var(--donkerpaars);
	
  rotate:80deg;
}

.haarlok.midden1 {
  top: 5em;
  left: 5.5em;
	width: 2em;
  height: 3.5em;

	background-color: var(--paars);
  border-radius: 2% 10% 5% 96% / 20% 0% 98% 74%;
}

.haarlok.midden2 {
  top: 4.5em;
  right: 6em;
	width: 1.6em;
  height: 3.5em;
	
	background-color: var(--paars);
  border-radius: 2% 10% 5% 96% / 20% 0% 98% 74%;
	
  rotate:20deg;
}

.haarlok.rechts1 {
  top: 3.4em;
  right: 2.8em;
	z-index: 50;
	width: 4em;
  height: 5em;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

	background-color: var(--lichtpaars);
  box-shadow: inset 40px 10px var(--donkerpaars);
  
  scale:1 -1;
	rotate:100deg;
}

.haarlok.rechts2 {
	top: 5em;
  right: 0;
	width: 3em;
  height: 9em;

  background-image: radial-gradient(
    18.75em 14.375em at bottom left,
    var(--lichtpaars) 50%,
    var(--donkerpaars) 0
  );
  border-radius: 10% 23% 96% 5% / 0% 20% 74% 98%;
	box-shadow: inset -.3125em 0 var(--donkerpaars);
}

/* ogen van Niko */
.oog {
	position: absolute;
  top: 7.25em;
	z-index: 40;
	width: 3.5em;
  height: 4em;

  background-image: radial-gradient(
    9.375em 4.625em at bottom right,
    var(--ooggeel) 50%,
    var(--oogschaduw) 0
  );
  border-radius: 90% 88% 80% 100% / 90% 91% 72% 71%;
  box-shadow: inset .125em .3125em var(--ooglid);
}

.oog.links {
  left: 3em;
  animation: 5s linear 0s infinite running knipperlinks;
}

.oog.rechts {
  scale:-1 1;
  right: 3em;
  animation: 5s linear 0s infinite running knipperrechts;
}

.oog .pupil {
  position: absolute;
  top: 0.7em;
  left: 1.5em;
	z-index: 50;
  width: .9em;
  height: 2.5em;

  border-radius: 100% 0% 0% 100% / 50% 0% 0% 50%;
  background-image: linear-gradient(
    to right,
    transparent 50%,
    var(--zwart) 0
  );
}

.oog .glinster {
  position: absolute;
  top: 1em;
  z-index: 50;
	width: .625em;
  height: .625em;
  background-color: var(--wit);
  border-radius: 50%;
}

.oog .glinster.links {
  left: 1.3em;
}

.oog .glinster.rechts {
  right: 0.4em;
}

@keyframes knipperlinks {
  0%, 48% {
    scale:1;
  }
  50% {
    scale:1 0;
  }
  52%, 100% {
    scale:1;
  }
}

@keyframes knipperrechts {
  0%, 48% {
		scale:-1 1;
  }
  50% {
    scale:-1 0;
  }
  52%, 100% {
    scale:-1 1;
  }
}

/* neus van Niko */
.neus {
  position: absolute;
  top: 9.8em;
	left:calc(50% - .3125em);
  width: .625em;
  height: .1875em;
  background-color: var(--neus);
}

/* mond van Niko */
.mond {
  position: absolute;
  top: 11.5em;
  left: calc(50% - .625em);
  width: 1.25em;
  height: .5em;
  background-image: radial-gradient(
    1em .625em at bottom,
    var(--wit) 50%,
    transparent 0
  );
}

/* snorharen van Niko */
.snorharen {
  z-index: 3;
  position: absolute;
  top: 13em;
  width: 3.2em;
  height: 2.8em;

	display: flex;
	flex-direction: column;
	justify-content:space-between;
}

.snorharen.links {
  left: 8em;
  scale:-1 1;
  animation: 5s linear 0s infinite running whiskerlinks;
}

.snorharen.rechts {
  right: 8em;
  animation: 5s linear 0s infinite running whiskerrechts;
}

.snorharen * {
	width: 3.2em;
  height: 0.7em;
  background-color: var(--paars);
  border-radius: 100%;
}

.snorharen .midden {
  rotate:10deg;
}

.snorharen .onder {
  width: 2.5em;
  rotate:20deg;
}

@keyframes whiskerlinks {
  0%, 4% {
		rotate:0deg;
  }
  4%, 8% {
		rotate:-10deg;
  }
  8%, 100% {
		rotate:10deg;
  }
}

@keyframes whiskerrechts {
  0%, 4% {
    rotate:0deg;
  }
  4%, 8% {
    rotate:10deg;
  }
  8%, 100% {
    rotate:-10deg;
  }
}

/* nek van Niko */
.nek {
  position: absolute;
  top: 18em;
  z-index: 5;
	width: 3em;
  height: 2em;

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

/* sjaal van Niko */
.sjaal {
  position: absolute;
	top: 18em;
	display:grid;
	justify-items:center;
}

.sjaal .voorkant,
.sjaal .achterkant {
	position: absolute;
	box-shadow: inset 0 -1.875em var(--sjaal);
}

.sjaal .voorkant {
	z-index: 5;
  width: 13em;
	height: 4em;
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0% 100%);

  background-image: radial-gradient(
    9.375em 3.125em at top,
    transparent 50%,
    var(--sjaalhighlight) 0
  );
	border-radius: 0 0 50% 50%;
}

.sjaal .achterkant {
  top: .3em;
	z-index: 3;
  width: 9.5em;
	height: 2.5em;
  background-color: var(--sjaalhighlight);
}

.sjaallinksonder,
.sjaalrechtsonder {
  position: absolute;
	top: 32em;
	height: 18em;
  width: 7.5em;
  clip-path: polygon(
    33% 0,
    6% 29%,
    24% 67%,
    0 100%,
    100% 90%,
    100% 64%,
    85% 30%,
    100% 0
  );

  background-image:
		linear-gradient( 110deg, transparent 50%, var(--lichtpaars) 0 ),
    linear-gradient( 80deg, var(--highlightblauw) 30%, transparent 0 ),
    linear-gradient( -70deg, transparent 80%, var(--highlightblauw) 0 );
  background-color: var(--lichtpaars);
}

.sjaallinksonder {
  left: 3em;
	rotate:20deg;
}

.sjaalrechtsonder {
  right: 3em;
	scale:-1 1;
	rotate:-20deg;
}

/* lichaam van Niko */
.lichaam {
  position: absolute;
  bottom: 0;
  width: 17em;
  height: 29em;

	display:grid;
	justify-items:center;
}

/* torso van Niko */
.torso {
  position: absolute;
  bottom: 0;
  width: 24em;
  height: 27em;
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0% 100%);
  background-image: radial-gradient(
    56em 56em at top,
    var(--torso) 50%,
    transparent 0
  );
}

/* gloeilamp */
.gloeilamp,
.gloed {
	position: absolute;
  top: 2em;
	width: 16em;
  height: 16em;
	border-radius: 50%;
}

.gloeilamp {
  z-index: 5;
	background-color: var(--gloeilamp);
  border: solid .625em var(--wit);
}

.gloed {
  z-index: 2;
  animation:gloeien 2s linear infinite alternate;
}

@keyframes gloeien {
  from {
    box-shadow: 0 0 100em 6.5em var(--gloed);
  }
  to {
    box-shadow: 0 0 100em 1.5em var(--gloed);
  }
}

.glinster {
  position: absolute;
  background-color: var(--wit);
  transform: rotate(30deg);
}

.glinster.groot {
  top: 1em;
  right: 3em;
  width: 4em;
  height: 3em;
  border-radius: 44% 55% 45% 56% / 38% 39% 60% 61%;
}

.glinster.klein {
  top: 4em;
  right: 1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
}

.lampschroef {
  position: absolute;
  top: 16.5em;
  left: 3em;
	z-index: 2;
  width: 5em;
  height: 3em;

  background-image: radial-gradient(
    6.25em 3.125em at top,
    var(--schroefschaduw) 45%,
    var(--lampschroef) 45%,
    var(--lampschroef) 60%,
    var(--schroefschaduw) 60%,
    var(--schroefschaduw) 70%,
    var(--lampschroef) 70%
  );
  box-shadow: inset 2.5em 0 0 0 var(--schroefschaduw);
  border-radius: 20%;

  rotate:20deg;
}

/* armen van Niko */
.arm.boven {
  position: absolute;
  top: 2em;
  width: 5em;
  height: 12em;
  background-color: var(--bovenarm);
	border-radius: 10% 10% 100% 100%;
}

.arm.boven.links {
	left:-.125em;
  rotate:26deg;
}

.arm.boven.rechts {
  right:-.125em;
  rotate:-26deg;
}

.arm.beneden {
  position: absolute;
  top: 6.4em;
	z-index: 10;
  width: 4.5em;
  height: 8em;
  border-radius: 49% 51% 51% 49% / 74% 74% 26% 26%;
  background-image: linear-gradient(
    to right,
    var(--onderarm) 60%,
    var(--armschaduw) 0
  );
}

.arm.beneden.links {
	left:0;
  rotate:40deg;
}

.arm.beneden.rechts {
  right: 0;
  rotate:-40deg;
	scale:-1 1;
}

.mouw {
  position: absolute;
  top: 7.5em;
  z-index: 11;
  clip-path: polygon(35% 0%, 65% 0%, 100% 100%, 0% 100%);
  background-color: var(--onderarm);
  border-radius: 50%;
  width: 7em;
  height: 11em;
}

.mouw.links {
  left: 0.48em;
}

.mouw.rechts {
  right: 0.48em;
  scale:-1 1;
}