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

html, body {
  position:relative;
  height:100%;
  overflow:hidden;
}

body {
  font-size:1.5vw;
  
  margin:0; padding:3em;
  background-color: lightgray;
  
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap:6em;
  grid-row-gap:15em;
  justify-content:center;
  align-content:center;
}

@media (min-width:56em) {
  body {
    padding:4.5em 7.5em 4.5em 1.5em;
    font-size:1vw;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}


/*********/
/* VOGEL */
/*********/
.vogel {
  position: relative;
  justify-self:center;
  align-self:flex-end;
  
  color:var(--lijfkleur);
  background-color: currentColor;
  
  transform:translateY( calc(var(--opstokmaat) * 1em ) ) rotate(calc(var(--vogelhoek) * 1deg)) ;
  transform-style: preserve-3d;
}

.vogel:hover {
  cursor: pointer;
}

/* hint */
.vogel .clickme {
  position: absolute;
  display: none;
  font-family:saira;
  white-space: nowrap;
}

.vogel:hover .clickme {
  display: block;
  transform:rotate(calc(var(--vogelhoek) * -1deg));
}

/* head */
.vogel .head {
  position:absolute;
}

/* oog */
@keyframes knipper {
  0%, 48% {
    transform:rotate(calc(var(--ooghoek) * 1deg)) scaleY(1);
  }
  50% {
    transform:rotate(calc(var(--ooghoek) * 1deg)) scaleY(0);
  }
  52%, 100% {
    transform:rotate(calc(var(--ooghoek) * 1deg)) scaleY(1);
  }
}

.vogel .eye {
  position: absolute;
  width: calc(var(--oogmaat) * 1em / 16); height: calc(var(--oogmaat) * 1em / 16);
  background-color: var(--oogkleur);
  border-radius: 50%;
  
  animation-name: knipper;
  animation-duration: calc(var(--knippertijd) * 1s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.vogel .eye::before {
  content:"";
  width: 50%; position: absolute;
  height: 100%;
  left: 0; top: 0;
  
  background-color:inherit;
  
  clip-path:polygon(100% 10%, 100% 90%, 0% 50%, 100% 10%);  
  transform-origin: 162% center;
  transform:translateX(-62%);
}

.vogel .eye::after {
  content:"";
  position: absolute;
  width: calc(var(--pupilmaat) * 1em / 16); height: calc(var(--pupilmaat) * 1em / 16);
  left: 50%; top: 50%;
  transform:translate(-50%, -50%);
  
  background-color: var(--pupilkleur);
  border-radius: 50%;
}

/* snaveltje */
.vogel .snaveltje {
  position: absolute;
  width: 3.125em; height: 3.125em;

  background-color: var(--snavelkleur);
  border-radius: 3.125em 0 3.125em 0;

  transform: rotate(calc(var(--snaveltjehoek) * 1deg));
}

/* vleugel */
@keyframes wapper {
  0% {
    transform: rotate( calc(var(--vleugelhoek) * 1deg) );
  }
  50% {
    transform: rotate( calc(( var(--vleugelhoek) + var(--vleugeluitslag)) * 1deg) );
  }
  100% {
    transform: rotate( calc(var(--vleugelhoek) * 1deg) );
  }
}

.vogel .vleugel {
  position:absolute;
  transform: rotate(calc(var(--vleugelhoek) * 1deg));
}

.vogel:hover .vleugel {
  animation-name: wapper;
  animation-duration: calc(var(--vleugeltijd) * 1s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* staart */
@keyframes staart {
  0% {
    transform: rotate(calc( (0 + var(--staarthoek)) * 1deg));
  }
  50% {
    transform: rotate(calc( (var(--staartuitslag) + var(--staarthoek)) * 1deg));
  }
  100% {
    transform: rotate(calc( (0 + var(--staarthoek)) * 1deg));
  }
}

.vogel .staart {
  position:absolute;
  transform: rotate(calc(var(--staarthoek) * 1deg));
}

.vogel:hover .staart {
  animation-name: staart;
  animation-duration:calc(var(--staarttijd) * 1s);
  animation-delay:calc(var(--staarttijd) * .25s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* poot */
.vogel .poot {
  position: absolute;
  width:3.5em; height:1.3125em;
  
  background-image:
    linear-gradient( var(--pootkleur),  var(--pootkleur) ),
    radial-gradient(closest-side,  var(--pootkleur) 100%, transparent 100% ),
    radial-gradient(closest-side,  var(--pootkleur) 100%, transparent 100% ),
    radial-gradient(circle at 1.3125em .875em,  transparent .4375em, var(--pootkleur) .4375em );
  background-size:
    1.3125em 1.3125em,
    .875em .875em,
    .875em .875em,
    2.625em .875em;
  background-position:
    left top,
    .875em bottom,
    right bottom,
    right top;
  background-repeat: no-repeat;
  border-radius:.875em .4375em .4375em .4375em;
}

/* pootje */
.vogel .pootje {
  position: absolute;
  width: .625em; height: 6.25em;
  
  background-color: var(--pootkleur);
  border-radius: .3125em;
  
  transform-origin:.3125em .3125em;
  transform: rotate(calc(var(--pootjehoek) * 1deg)) translateZ(-.1em) scalex(var(--pootjerichting));
}

.vogel .pootje::before,
.vogel .pootje::after {
  content:"";
  position: absolute;
  width:.625em; height:2.5em;
  left:0; bottom:0;
  
  background-color:inherit;
  border-radius: inherit;
  
  transform-origin:.3125em 2.1875em;
}

.vogel .pootje::before {
  transform: rotate(75deg);
}

.vogel .pootje::after {
  transform: rotate(105deg);
}


/**********/
/* TOEKAN */
/**********/
.toekan {
  --opstokmaat:0;
  --vogelhoek:0;
  --ooghoek:0;
  --staarthoek:0;
  --staartuitslag:-15;
  --vleugelhoek:0;
  --vleugeluitslag:-30;
  
  --hoofdkleur:white;
  --lijfkleur:black;
  --oogkleur:rgb(24, 122, 255);
  --pupilkleur:black;
  --pootkleur:var(--oogkleur);
  
  --snavellicht:#e5b000;
  --snavelmidden:#e57200;
  --snaveldark:#e53e00;
    
  --oogmaat:36;
  --pupilmaat:16;
  
  --knippertijd:16;
  --staarttijd:.5;
  --vleugeltijd:.5;
  
  width: 5em; height: 15.625em;
  border-radius: 3.125em 0 .625em 2.5em;
}

/* hint */
.toekan .clickme {
  left: 4.25em; top: -2.125em;
}

/* head */
.toekan .head {
  width: 3.75em; height: 9.375em;
  right:0; top:0;
  background-color: var(--snavelmidden);
  background-image: linear-gradient(transparent 1.875em, var(--hoofdkleur) 1.875em);
  border-radius: 1.875em 0 1.875em 1.875em;
  transition:background-color 10s;
}

/* oog */  
.toekan .eye {
  right: .375em; top: .75em;
}

/* snavel */
.toekan .snavel {
  position: absolute;
  width: 9.375em; height: 4.375em;
  left: 100%; top:0;

  background-color: currentColor;
  border-radius: 0 3.125em 0 0;
}

.toekan .snavel div {
  position: absolute;
  width:6.25em;
  left: 0;
  transition: background-color 10s;
}

.toekan .snavel .top {
  top:0;
  height: 1.875em;
  background-color:var(--snavellicht);
}

.toekan .snavel .midden {
  top: 1.875em;
  height: 1.25em;
  background-color: var(--snavelmidden);    
}

.toekan .snavel .onder {
  top: 3.125em;
  height: 1.25em;
  background-color: var(--snaveldark);
}

.toekan:hover {
  --snavellicht: #2bbc36;
  --snavelmidden: #1daa17;
  --snaveldark: #10741f;
}

/* vleugel */
.toekan .vleugel {
  width: 3.75em; height: 10em;
  left: 3.125em; top: 5.3125em;

  background-color: currentColor;
  border-radius: .625em 3.125em 3.125em .625em/ .625em 5em 5em .625em;
  transform-origin: .625em .625em;
}

/* staart */
.toekan .staart {
  width: 3.4375em; height: 9.375em;
  right: 0; top: 13.75em;
  background-color: currentColor;
  border-radius: 0 0 0 6.25em;
  transform-origin: 0.9375em 0.9375em;
}

/* poot */
.toekan .poot {
  right: 0.4375em; top: 14.6875em;
}

.toekan .poot + .poot {
  left:-0.875em;
  mix-blend-mode: darken;
}


/***************/
/* ROODBORSTJE */
/***************/
.roodborstje {
  --opstokmaat:-2.4;
  --vogelhoek:0;
  --ooghoek:-15;
  --staarthoek:40;
  --staartuitslag:-15;
  --snaveltjehoek:30;
  --vleugelhoek:10;
  --vleugeluitslag:10;
  --pootjehoek:-15;
  --pootjerichting:1;
  
  --hoofdkleur:rgb(255, 17, 17);
  --hoofdschaduw:#891500;
  --lijfkleur:white;
  --vleugelkleur:black;
  --vleugelschaduw:rgb(118, 118, 118);
  --oogkleur:white;
  --pupilkleur:black;
  --snavelkleur:black;
  --pootkleur:black;
  
  --oogmaat:30;
  --pupilmaat:20;
  
  --knippertijd:12;
  --staarttijd:.4;
  --vleugeltijd:.3;
  
  width: 12.5em; height: 15.625em;
  border-radius: 15.625em 0 15.625em 0;
}

/* hint */
.roodborstje .clickme {
  left: 5.25em; top: -6.25em;
}

/* head */
.roodborstje .head {
  width: 7.5em; height: 7.5em;
  left: 5.625em; top: -4.375em;

  background-color:var(--hoofdkleur);
  border-radius: 0 3.75em 3.75em 3.75em;

  transition:transform 0.2s;
}

.roodborstje:hover .head {
  transform: rotate(-30deg);
}

/* eye */
.roodborstje .eye {
  left: 4.375em; top: 3.125em;
}

/* snaveltje */
.roodborstje .snaveltje {
  left: 6.25em; top: 3.75em;
}

/* borst */
.roodborstje .borst {
  position: absolute;
  width: 7.5em; height: 7.5em;
  right: -2.3em; top:1.225em;
  
  background-color: var(--hoofdkleur); 
  background-image: radial-gradient(
    circle at 5em 7em, 
    var(--hoofdschaduw) 5em, 
    var(--hoofdkleur) 5em);
  border-radius: 0 0 7.5em 0;

  transform: rotate(-37deg);
}

/* vleugel & staart */
.roodborstje .vleugel {
  width: 7.5em; height: 13.75em;
  left: 1.25em; top: 2.0625em;

  background-color:var(--vleugelschaduw);
  border-radius: 33.125em 9.375em 31.25em 0;
  
  transform-origin: calc(100% - 1.25em) 0;
}

.roodborstje .staart {
  width: 1.875em; height: 13.75em;
  left: 1.25em; top: 11.25em;

  background-color: var(--vleugelschaduw);
  border-radius: 0 0 1.875em 0;

  transform-origin: left top;
}

.roodborstje .vleugel::after,
.roodborstje .staart::after{
  content:"";
  position: absolute;
  width: 100%; height: 100%;
  left:0; top:0;
  background-color: var(--vleugelkleur);
  border-radius: inherit;
  transform-origin:right top; 
  transform:rotate(5deg);
}

/* pootje */
.roodborstje .pootje {
  left: 5.625em; top: 12.375em;
}


/***********/
/* PARKIET */
/***********/
.parkiet {
  --opstokmaat:.9;
  --vogelhoek:-75;
  --ooghoek:-89;
  --snaveltjehoek:110;
  --staarthoek:75;
  --staartuitslag:-5;
  --vleugelhoek:4;
  --vleugeluitslag:-6;
  --pootjehoek:75; 
  
  --lijfkleur:rgb(61, 117, 191);
  --hoofdkleur:#f07801;
  --hoofdlicht:rgb(255, 226, 0);
  --hoofddonker:black;
  --hoofdaccent:var(--vleugelkleur);
  --oogkleur:white;
  --pupilkleur:var(--vleugelkleur);
  --snavelkleur:black;
  --vleugelkleur:rgb(27, 78, 33);
  --vleugelschaduw:rgb(37, 136, 48);
  --staartkleur:#121638;
  --pootkleur:var(--staartkleur);
  
  --oogmaat:30;
  --pupilmaat:16;
  
  --staarttijd:.4;
  --vleugeltijd:.2;
  --knippertijd:10;

  width: 11.25em; height: 15.625em;
  border-radius: 15.625em 0 15.625em 0;
}

.parkiet .clickme {
  left: 15.25em; top: -2.5em;
}

/* vleugel */
.parkiet .vleugel {
  width: 9.375em; height: 12.5em;
  left: 1.9em; top: 3.125em;
  
  background-color: var(--vleugelschaduw);
  border-radius: 9.375em 0 9.375em 0;
  
  transform-origin: 9.375em 1.5em;
}

.parkiet .vleugel::after {
  content:"";
  position:absolute;
  width:100%; height:100%;
  
  background-color: var(--vleugelkleur);
  border-radius:inherit;
  
  transform-origin:inherit;
  transform:rotate(-5deg);
}

/* staart */
.parkiet .staart {
  width: 1.875em; height: 15em;
  left:0; top: 21.25em;
  background-color: var(--staartkleur);
  border-radius: 0 0 0 1.875em;

  transform-origin: 8.125em -.625em;
}

/* head */
.parkiet .head {
  width: 7.5em; height: 7.5em;
  left: 8.2em; top: -3.75em;
  background-color:var(--hoofdkleur);  
  background-image: conic-gradient(
    at 50% 1.25em, 
    var(--hoofddonker) 0deg 180deg,
    var(--hoofdlicht) 0deg 210deg,
    var(--hoofdkleur) 210deg 360deg
  );
  border-radius: 50%;
  transition:transform .3s;
}

.parkiet:hover .head {
  transform: rotate(20deg); 
}

.parkiet .head .accent {
  position: absolute;
  width: 4.6875em; height: 1.875em;
  left: 2.5em; top: 1em;

  background-color: var(--hoofdaccent);
  border-radius: 0.9375em;

  transform: rotate(45deg);
}

/* eye */
.parkiet .eye {
  left: 2.8125em; top: 1.5625em;
}

/* snaveltje */
.parkiet .snaveltje {
  left: 1.25em; top: -1.25em;
}

/* nek */
.parkiet .nek {
  position: absolute;
  width: 5.625em; height: 1.25em;
  left: 6.95em; top: 1.6em;

  background-color: var(--oogkleur);

  transform: rotate(45deg);
}

/* pootje */
.parkiet .poot {
  left: -1.875em; top: 11.3125em;
  transform: rotate(75deg)
}


/**********/
/* EKSTER */
/**********/
.ekster {
  --opstokmaat:-3;
  --vogelhoek:-12;
  --ooghoek:-213;
  --snaveltjehoek:50;
  --vleugelhoek:-80;
  --vleugeluitslag:-7;
  --pootjehoek:24; 
  --pootjerichting:-1;
  --staarthoek:35;
  --staartuitslag:10;
  
  --lijfkleur:white;
  --hoofdkleur:rgb(255, 17, 17);
  --hoofdaccent:var(--vleugelkleur);
  --oogkleur:rgb(255, 235, 0);
  --pupilkleur:black;
  --snavelkleur:lightgray;
  --snavelaccent:black;
  --vleugelkleur:#19154b;
  --pootkleur:var(--hoofdkleur);
  --staartkleur:black;
  
  --oogmaat:30;
  --pupilmaat:12;
  
  --knippertijd:14;
  --vleugeltijd:.3;
  --staarttijd:.6;
  
  width: 12.5em; height: 12.5em;
  background-image: linear-gradient(
    165deg,
    var(--hoofdkleur) 5.1em,
    transparent 5.1em
  );
  border-radius: 0 11.25em 0 7.5em / 0 11.25em 0 7.5em;
}

.ekster .clickme {
  left: 1.25em; top: -3.125em;
}

/* head */
.ekster .head {
  width: 7.5em; height: 7.5em;
  left: -1.5em; top:-1.5em;

  background-color:var(--hoofdkleur);
  background-image: radial-gradient(
    circle at 0.9375em 0, 
    var(--hoofdaccent) 3.75em, 
    var(--hoofdkleur) 3.75em);
  border-radius: 7.5em;

  clip-path: polygon(-50% -50%, 100% -50%, 100% 30.5%, 7.5% 100%, -50% 100%, -50% -50%);
}

/* eye */
.ekster .eye {
  left: 1.625em; top: 2.25em;
}

/* snavel */
@keyframes snaveltop {
  0% {
    transform: rotate( 0 );
  }
  50% {
    transform: rotate( 6deg );
  }
  100% {
    transform: rotate( 0 );
  }
}

@keyframes snavelbottom {
  0% {
    transform: rotate( 0 );
  }
  50% {
    transform: rotate( -2deg );
  }
  100% {
    transform: rotate( 0 );
  }
}

.ekster .snaveltje {
  left: -1.25em; top: 3.625em;
  transform-origin: right top;
}

.ekster .snaveltje::before,
.ekster .snaveltje::after {
  content:"";
  position:absolute;
  width:100%; height:100%;
  top:0; left:0;
  
  background-color:var(--snavelaccent);
  border-radius:inherit;
  
  transform-origin:right top;
  animation-duration: .7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.ekster .snaveltje::before {
  clip-path:polygon(0 0, 100% 0, 0 100%, 0 0);
}

.ekster .snaveltje::after {
  clip-path:polygon(100% 100%, 0 100%, 100% 0, 100% 100%);  
}

.ekster:hover .snaveltje::before {
  animation-name: snaveltop;
}

.ekster:hover .snaveltje::after {
  animation-name: snavelbottom;
}

/* vleugel */
.ekster .vleugel {
  width: 10.5em; height: 12.5em;
  left: -5.5em; top: 1.5em;
  background-color: var(--vleugelkleur);
  border-radius: 31.25em 6.25em 31.25em 0/ 31.25em 9.375em 31.25em 0;
  
  transform-origin: 10em .625em;
}

/* pootje */
.ekster .pootje {
  left:6.875em; top:10em;
}

/* staart */
.ekster .staart {
  width: 0.875em; height: 13.75em;
  right: -0.4375em; bottom: 0;
  
  background-color: var(--staartkleur);
  border-radius:0.4375em;
  
  transform-origin:0.4375em calc(100% - 0.4375em);
  transform: rotate(calc(var(--staarthoek) * 1deg));
}

.ekster .staart::before,
.ekster .staart::after {
  content: "";
  position: absolute;
  width:100%; height:86%;
  left:0; bottom:0.875em;
  
  background-color:inherit;
  border-radius:inherit;
  
  transform-origin:center bottom;
}

.ekster .staart::before {
  transform: rotate(9deg);
}

.ekster .staart::after {
  transform: rotate(-9deg);
}