/* ********** */
/* Linker arm */
/* ********** */

/* Experement */
/* div.linkerarm {

  animation-name: linkerarm;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-direction: alternate-reverse;
  transform-origin: top;
} */

/* @keyframes linkerarm {
  0% {
    transform: translateY(0);
    rotate: 2deg;
  }
  100% {
    transform: translateY(-0.5em);
    rotate: -4deg;
  }
} */

div.linker-mouw-boven {
    position: absolute;
    left: 3em;
    top: 5.5em;
  
    width: 2em;
    height: 5.5em;
    background-color: var(--colour-mouwboven-en-shadow);
  
    clip-path: polygon(
        0 1em, 
        2em 0, 
        2em 1em, 
        1.5em 5.5em, 
        0 1em
    );
}
  
div.linker-mouw-onder {
    position: absolute;
    left: 2em;
    top: 6.5em;
  
    z-index: 99;
  
    width: 2.5em;
    height: 4.5em;
    background-color: var(--colour-mouwonder-en-shadow);
  
    clip-path: polygon(
        1em 0, 
        2.5em 4.5em, 
        0.5em 4em, 
        0 3.5em, 
        1em 0
    );
}
  
div.linker-eleboog-buiten {
    position: absolute;
    left: 2em;
    top: 10.5em;
  
    z-index: 98;
  
    width: 1.5em;
    height: 1.5em;
    background-color: var(--colour-arm-buiten);
  
    clip-path: polygon(
        0.5em 0, 
        1.5em 0, 
        1.5em 1em, 
        0 1.5em, 
        0.5em 0
    );
}
  
div.linker-eleboog-binnen {
    position: absolute;
    left: 3.5em;
    top: 10.5em;
  
    z-index: 98;
  
    width: 0.5em;
    height: 1.5em;
    background-color: var(--colour-mouwboven-en-shadow);
  
    clip-path: polygon(
        0 0, 
        0.5em 0, 
        0.5em 1.5em, 
        0 1em, 
        0 0
    );
}
  
div.linker-bovenarm-buiten {
    position: absolute;
    left: 1.5em;
    top: 11.5em;
  
    z-index: 98;
  
    width: 2.5em;
    height: 4.5em;
    background-color: var(--colour-arm-binnen);
  
    animation-name: l-bovenarm-buiten;
    animation-duration: var(--animation-speed-arms);
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: alternate;
}
  
@keyframes l-bovenarm-buiten {
    0% {
        clip-path: polygon(
            0.5em 0.5em, 
            2em 0, 
            0.5em 4.5em, 
            0 4.5em, 
            0.5em 0.5em
        );
    }
    50% {
        clip-path: polygon(
            0.5em 0.5em, 
            2em 0, 
            1.5em 4.5em, 
            1em 4.5em, 
            0.5em 0.5em
        );
    }
    100% {
        clip-path: polygon(
            0.5em 0.5em, 
            2em 0, 
            2.5em 3.5em, 
            2em 3.5em, 
            0.5em 0.5em
        );
    }
}
  
div.linker-bovenarm-binnen {
    position: absolute;
    left: 2em;
    top: 11.5em;
  
    z-index: 98;
  
    width: 2.5em;
    height: 4.5em;
    background-color: var(--colour-mouwonder-en-shadow);
  
    animation-name: l-bovenarm-binnen;
    animation-duration: var(--animation-speed-arms);
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: alternate;
}
  
@keyframes l-bovenarm-binnen {
    0% {
        clip-path: polygon(
            1.5em 0, 
            2em 0.5em, 
            0.5em 4em, 
            0 4.5em, 
            1.5em 0
        );
    }
    50% {
        clip-path: polygon(
            1.5em 0, 
            2em 0.5em, 
            1.5em 4em, 
            1em 4.5em, 
            1.5em 0
        );
    }
    100% {
        clip-path: polygon(
            1.5em 0, 
            2em 0.5em, 
            2.5em 3.5em, 
            2em 3.5em, 
            1.5em 0
        );
    }
}
  
div.linker-hand-buiten {
    position: absolute;
    left: 1em;
    top: 15em;
  
    width: 3em;
    height: 3.5em;
    background-color: var(--colour-arm-buiten);
  
    animation-name: l-hand-buiten;
    animation-duration: var(--animation-speed-arms);
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: alternate;
}
  
@keyframes l-hand-buiten {
    0% {
        clip-path: polygon(
            0.5em 1em,
            1em 1em,
            1em 1.5em,
            0.5em 2em,
            0.5em 3.5em,
            0 3em,
            0 2em,
            0.5em 1.5em,
            0.5em 1em
        );
    }
    50% {
        clip-path: polygon(
            1.5em 1em,
            2em 1em,
            2em 1.5em,
            1.5em 2em,
            1.5em 3.5em,
            1em 3em,
            1em 2em,
            1.5em 1.5em,
            1.5em 1em
        );
    }
    100% {
        clip-path: polygon(
            2.5em 0,
            3em 0,
            3em 0.5em,
            2.5em 1em,
            2.5em 2.5em,
            2em 2em,
            2em 1em,
            2.5em 0.5em,
            2.5em 0
        );
    }
}
  
div.linker-hand-binnen {
    position: absolute;
    left: 1.5em;
    top: 15em;
  
    width: 3em;
    height: 3em;
    background-color: var(--colour-arm-binnen);
  
    animation-name: l-hand-binnen;
    animation-duration: var(--animation-speed-arms);
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: alternate;
}
  
@keyframes l-hand-binnen {
    0% {
        clip-path: polygon(
            1em 0.5em,
            1em 2em,
            0 3em,
            0 2em,
            0.5em 1.5em,
            0.5em 1em,
            1em 0.5em
        );
    }
    50% {
        clip-path: polygon(
            2em 0.5em,
            2em 2em,
            1em 3em,
            1em 2em,
            1.5em 1.5em,
            1.5em 1em,
            2em 0.5em
        );
    }
    100% {
        clip-path: polygon(
            3em 0,
            3em 1em,
            2em 2em,
            2em 1em,
            2.5em 0.5em,
            2.5em 0,
            3em 0
        );
    }
}

/* *********** */
/* Rechter arm */
/* *********** */

div.rechter-mouw-boven {
    position: absolute;
    left: 9em;
    top: 5.5em;
  
    transform: scalex(-1);
  
    width: 2em;
    height: 5.5em;
    background-color: var(--colour-mouwboven-en-shadow);
  
    clip-path: polygon(
        0 1em, 
        2em 0, 
        2em 1em, 
        1.5em 5.5em, 
        0 1em
    );
}
  
div.rechter-mouw-onder {
    position: absolute;
    left: 9.5em;
    top: 6.5em;
  
    transform: scalex(-1);
  
    z-index: 99;
  
    width: 2.5em;
    height: 4.5em;
    background-color: var(--colour-mouwonder-en-shadow);
  
    clip-path: polygon(
        1em 0, 
        2.5em 4.5em, 
        0.5em 4em, 
        0 3.5em, 
        1em 0
    );
}
  
div.rechter-eleboog-buiten {
    position: absolute;
    left: 10.5em;
    top: 10.5em;
  
    transform: scalex(-1);
  
    z-index: 98;
  
    width: 1.5em;
    height: 1.5em;
    background-color: var(--colour-arm-buiten);
  
    clip-path: polygon(
        0.5em 0, 
        1.5em 0, 
        1.5em 1em, 
        0 1.5em, 
        0.5em 0
    );
}
  
div.rechter-eleboog-binnen {
    position: absolute;
    left: 10em;
    top: 10.5em;
  
    transform: scalex(-1);
  
    z-index: 98;
  
    width: 0.5em;
    height: 1.5em;
    background-color: var(--colour-mouwboven-en-shadow);
  
    clip-path: polygon(
        0 0, 
        0.5em 0, 
        0.5em 1.5em, 
        0 1em, 
        0 0
    );
}
  
div.rechter-bovenarm-buiten {
    position: absolute;
    left: 10em;
    top: 11.5em;
  
    z-index: 98;
  
    width: 2.5em;
    height: 4.5em;
    background-color: var(--colour-arm-binnen);
  
    animation-name: r-bovenarm-buiten;
    animation-duration: var(--animation-speed-arms);
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: alternate-reverse;
}
  
@keyframes r-bovenarm-buiten {
    0% {
        transform: scalex(-1);
        clip-path: polygon(
            0.5em 0.5em, 
            2em 0, 
            0.5em 4.5em, 
            0 4.5em, 
            0.5em 0.5em
        );
    }
    50% {
        transform: scalex(-1);
        clip-path: polygon(
            0.5em 0.5em, 
            2em 0, 
            1.5em 4.5em, 
            1em 4.5em, 
            0.5em 0.5em
        );
    }
    100% {
        transform: scalex(-1);
        clip-path: polygon(
            0.5em 0.5em, 
            2em 0, 
            2.5em 3.5em, 
            2em 3.5em, 
            0.5em 0.5em
        );
    }
}
  
div.rechter-bovenarm-binnen {
    position: absolute;
    left: 9.5em;
    top: 11.5em;
  
    z-index: 98;
  
    width: 2.5em;
    height: 4.5em;
    background-color: var(--colour-mouwonder-en-shadow);
  
    animation-name: r-bovenarm-binnen;
    animation-duration: var(--animation-speed-arms);
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: alternate-reverse;
}
  
@keyframes r-bovenarm-binnen {
    0% {
        transform: scalex(-1);
        clip-path: polygon(
            1.5em 0, 
            2em 0.5em, 
            0.5em 4em, 
            0 4.5em, 
            1.5em 0
        );
    }
    50% {
        transform: scalex(-1);
        clip-path: polygon(
            1.5em 0, 
            2em 0.5em, 
            1.5em 4em, 
            1em 4.5em, 
            1.5em 0
        );
    }
    100% {
        transform: scalex(-1);
        clip-path: polygon(
            1.5em 0, 
            2em 0.5em, 
            2.5em 3.5em, 
            2em 3.5em, 
            1.5em 0
        );
    }
}
  
div.rechter-hand-buiten {
    position: absolute;
    left: 10em;
    top: 15em;
  
    width: 3em;
    height: 3.5em;
    background-color: var(--colour-arm-buiten);
  
    animation-name: r-hand-buiten;
    animation-duration: var(--animation-speed-arms);
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: alternate-reverse;
}
  
@keyframes r-hand-buiten {
    0% {
        transform: scalex(-1);
        clip-path: polygon(
            0.5em 1em,
            1em 1em,
            1em 1.5em,
            0.5em 2em,
            0.5em 3.5em,
            0 3em,
            0 2em,
            0.5em 1.5em,
            0.5em 1em
        );
    }
    50% {
        transform: scalex(-1);
        clip-path: polygon(
            1.5em 1em,
            2em 1em,
            2em 1.5em,
            1.5em 2em,
            1.5em 3.5em,
            1em 3em,
            1em 2em,
            1.5em 1.5em,
            1.5em 1em
        );
    }
    100% {
        transform: scalex(-1);
        clip-path: polygon(
            2.5em 0,
            3em 0,
            3em 0.5em,
            2.5em 1em,
            2.5em 2.5em,
            2em 2em,
            2em 1em,
            2.5em 0.5em,
            2.5em 0
        );
    }
}
  
div.rechter-hand-binnen {
    position: absolute;
    left: 9.5em;
    top: 15em;
  
    width: 3em;
    height: 3em;
    background-color: var(--colour-arm-binnen);
  
    animation-name: r-hand-binnen;
    animation-duration: var(--animation-speed-arms);
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: alternate-reverse;
}
  
@keyframes r-hand-binnen {
    0% {
        transform: scalex(-1);
        clip-path: polygon(
            1em 0.5em,
            1em 2em,
            0 3em,
            0 2em,
            0.5em 1.5em,
            0.5em 1em,
            1em 0.5em
        );
    }
    50% {
        transform: scalex(-1);
        clip-path: polygon(
            2em 0.5em,
            2em 2em,
            1em 3em,
            1em 2em,
            1.5em 1.5em,
            1.5em 1em,
            2em 0.5em
        );
    }
    100% {
        transform: scalex(-1);
        clip-path: polygon(
            3em 0,
            3em 1em,
            2em 2em,
            2em 1em,
            2.5em 0.5em,
            2.5em 0,
            3em 0
        );
    }
}