body {
    --oranje:#F2843A;
    --groenig:#0d7bc5;
    
    --light:white;
    --dark:#333;
    
    --accent-kleur:var(--oranje);
    --main-kleur:var(--light);
    
    --snelheid:6s;
    
}

body.slow {
    --snelheid:30s;
}

:target body.groenig {
    --accent-kleur:var(--groenig);
}

:target body.dark {
    --main-kleur:var(--dark);
}

* {
    box-sizing: border-box;
}

html {
    height:100%; width:100vw;
    margin:0; padding:0;
    overflow:hidden;
}

body {
    position:relative;
    height:100%; width:100vw;
    margin:0; padding:0;
    background-color: #333;
    overflow:hidden;
}

.bb8 {
    position: absolute;
    width:15em; min-width:25em; height:25em;
    top:calc(50vh - 12.5em); left:calc(50vw - 12.5em);
    z-index:2;
    transform-origin: bottom center;
}

.bb8::after {
    content:"";
    position: absolute;
    width: 25em; height: 25em;
    top:0; left:0;
    border-radius: 50%;
    box-shadow: inset -2.5em -2.5em 0 rgba(51,51,51,.1);
    z-index:100;
}

:target .move .bb8,
:target .slow .bb8 {
    animation: hobbelen var(--snelheid) infinite;
}

@keyframes hobbelen {
    2%{ transform:translateY(0) scaleY(1); }
    5%{ transform:translateY(-.75em) scaleY(1.02); }
    7%{ transform:translateY(0) scaleY(.99); }
    
    8%{ transform:translateY(0) scaleY(1); }
    11%{ transform:translateY(-5em) scaleY(1.04); }
    17%{ transform:translateY(0) scaleY(.97); }
    19%{ transform:translateY(-.75em) scaleY(1.02); }
    21%{ transform:translateY(0) scaleY(.99); }
    
    22%{ transform:translateY(0) scaleY(1); }
    25%{ transform:translateY(-.75em) scaleY(1.02); }
    27%{ transform:translateY(0) scaleY(.99); }
    
    30%{ transform:translateY(-1.5em) scaleY(1.02); }
    32%{ transform:translateY(0) scaleY(.99); }
    34%{ transform:translateY(-.75em) scaleY(1.01); }
    36%{ transform:translateY(0) scaleY(1); }
    
    42%{ transform:translateY(0) scaleY(1); }
    45%{ transform:translateY(-1.5em) scaleY(1.02); }
    47%{ transform:translateY(0) scaleY(.99); }
    49%{ transform:translateY(-.75em) scaleY(1.01);  }
    51%{ transform:translateY(0) scaleY(1); }
    
    52%{ transform:translateY(0) scaleY(1); }
    55%{ transform:translateY(-.75em) scaleY(1.02); }
    57%{ transform:translateY(0) scaleY(.99); }
    59%{ transform:translateY(-.375em) scaleY(1.01); }
    61%{ transform:translateY(0) scaleY(1); }
    
    62%{ transform:translateY(0) scaleY(1); }
    65%{ transform:translateY(-1.5em) scaleY(1.02); }
    67%{ transform:translateY(0) scaleY(.99); }
    
    70%{ transform:translateY(-.75em) scaleY(1.02); }
    72%{ transform:translateY(0) scaleY(.99); }
    
    75%{ transform:translateY(-1.5em) scaleY(1.02); }
    77%{ transform:translateY(0) scaleY(.99); }
    79%{ transform:translateY(-.75em) scaleY(1.01); }
    81%{ transform:translateY(0) scaleY(1); }
    
    82%{ transform:translateY(0) scaleY(1); }
    85%{ transform:translateY(-.75em) scaleY(1.02); }
    87%{ transform:translateY(0) scaleY(.99); }
    
    90%{ transform:translateY(-.75em) scaleY(1.02); }
    92%{ transform:translateY(0) scaleY(.99); }
    
    95%{ transform:translateY(-.75em) scaleY(1.02); }
    97%{ transform:translateY(0) scaleY(.99); }
    99%{ transform:translateY(-.375em) scaleY(1.01); }
    1%{ transform:translateY(0) scaleY(1); }
}

/*********/
/* HOOFD */
/*********/
.hoofd {
    position: absolute;
    width: 11.875em; height: 7.188em;
    bottom: 50%; left: calc(50% - 5.9375em);

    border-radius: 5.625rem 5.625rem 0rem 0rem;
    border: 0.375rem solid grey;

    background-image: linear-gradient(to bottom, 
        var(--main-kleur) 10%, 
        grey 10%, 
        grey 20%, 
        var(--main-kleur) 20%, 
        var(--main-kleur) 30%, 
        var(--accent-kleur) 30%, 
        var(--accent-kleur) 45%, 
        var(--main-kleur) 45%);

    transform-origin: center bottom;
    transform: rotate(0deg) translateY(-14.25rem) translateZ(1em);
    
    z-index:200;
}

.hoofd::after {
    content:"";
    position:absolute;
    width:11.875em; height:2.625em;
    left:-.375em; bottom:-4em;
    background:rgba(51,51,51,.5);
    border-radius:0 0 50% 50% / 0 0 100% 100%;
}

/* oog */
.oog {
    position: absolute;
    width: 2.5em; height: 2.5em;
    top: 2em; left: 50%;
    border-radius: 50%;
    background-color: #2e2e2e;
    transform: translateX(-50%);
    box-shadow: 0 0 0 10px var(--main-kleur);
}

.oog::after {
    content:"";
    position:absolute;
    width:1em; height:1em;
    top:.625em; left:.25em;
    background-color: grey;
    border-radius: 50%;
}

/* sensors */
.sensor {
    position: absolute;
    border-radius: 50%;
}
.sensor.onder {
    width: 1rem; height: 1rem;
    top: 5.25rem; left: 50%;
    border: 0.25rem solid grey;
    transform: translateX(-50%);
}

.sensor.rechts {
    width: 1.875rem; height: 1.875rem;
    top: 4rem; left: 7.375rem;
    border: 0.25rem solid grey;
    background-color: #2e2e2e;
}

/* antennes */
.antenne {
    position: absolute;
    bottom:100%; 
    background-color: grey;
    transform-origin: bottom center;
}

.antenne.groot {
  width: 0.375rem; height: 3.750rem;
  left: 6.25rem;
}

.antenne.klein {
  width: 0.375rem; height: 1.25rem;
  left: 5.188rem;
}

/* oranje blokjes */
.oranje-blokjes {
    position: absolute;
    height:1.25em; width:100%;
    bottom:-.375em; left:0;
    background-image: linear-gradient(to right,
        transparent 6%,
        var(--accent-kleur) 6%,
        var(--accent-kleur) 11%,
        transparent 11%,
        transparent 14%,
        var(--accent-kleur) 14%,
        var(--accent-kleur) 23%,
        transparent 23%,
        transparent 26%,
        var(--accent-kleur) 26%,
        var(--accent-kleur) 31%,
        transparent 31%,
        transparent 89%,
        var(--accent-kleur) 89%,
        var(--accent-kleur) 94%,
        transparent 94%
    );
}

.grijze_bar {
    position: absolute;
    height:0; width: calc(100% + .75em);
    top: calc(100% + .375em);
    left:-.375em;
    border-left: 0.75rem solid transparent;
    border-right: 0.75rem solid transparent;
    border-top: 1rem solid grey;
}

:target .move .hoofd,
:target .slow .hoofd {
    animation: hoofd var(--snelheid) infinite linear;
}

@keyframes hoofd{
    0%{ transform: rotate(23deg) translateY(-14.25rem); }
    
    5%{ transform: rotate(23deg) translateY(-14.25rem); }
    7%{ transform: rotate(25deg) translateY(-14.5rem); }
    9%{ transform: rotate(23deg) translateY(-14.25rem); }
    
    10%{ transform: rotate(23deg) translateY(-14.25rem); }
    16%{ transform: rotate(45deg) translateY(-15rem); }
    20% { transform: rotate(20deg) translateY(-14.5rem); }
    26%{ transform: rotate(25deg) translateY(-14.375rem); }
    28%{ transform: rotate(22deg) translateY(-14.125rem); }
    30%{ transform: rotate(23deg) translateY(-14.25rem); }
    
    30%{ transform: rotate(23deg) translateY(-14.25rem); }
    34%{ transform: rotate(30deg) translateY(-14.5rem); }
    40% { transform: rotate(20deg) translateY(-14.125rem); }
    45.5%{ transform: rotate(24deg) translateY(-14.25rem); }
    
    45.5%{ transform: rotate(23deg) translateY(-14.25rem); }
    49%{ transform: rotate(30deg) translateY(-14.5rem); }
    55% { transform: rotate(20deg) translateY(-14.125rem); }
    61%{ transform: rotate(24deg) translateY(-14.25rem); }
    63%{ transform: rotate(23deg) translateY(-14.25rem); }
    
    65%{ transform: rotate(23deg) translateY(-14.25rem); }
    69%{ transform: rotate(30deg) translateY(-14.5rem); }
    75% { transform: rotate(20deg) translateY(-14.125rem); }
    
    79%{ transform: rotate(30deg) translateY(-14.5rem); }
    85% { transform: rotate(20deg) translateY(-14.125rem); }
    91%{ transform: rotate(24deg) translateY(-14.25rem); }
    93%{ transform: rotate(23deg) translateY(-14.25rem); }
    
    100%{ transform: rotate(23deg) translateY(-14.25rem); }
}

:target .move .antenne.groot,
:target .slow .antenne.groot{
    animation:antennegroot var(--snelheid) infinite;
}

:target .move .antenne.klein,
:target .slow .antenne.klein{
    animation:antenneklein var(--snelheid) infinite;
}

@keyframes antennegroot {
    0% { transform:rotate(15deg); }
    
    15% { transform:rotate(15deg); }
    17% { transform:rotate(30deg); }
    20% { transform:rotate(5deg); }
    23% { transform:rotate(15deg); }
    
    32% { transform:rotate(15deg); }
    34% { transform:rotate(22deg); }
    36% { transform:rotate(11deg); }
    38% { transform:rotate(15deg); }
    
    47% { transform:rotate(15deg); }
    49% { transform:rotate(22deg); }
    51% { transform:rotate(11deg); }
    53% { transform:rotate(15deg); }
    
    67% { transform:rotate(15deg); }
    69% { transform:rotate(22deg); }
    71% { transform:rotate(11deg); }
    73% { transform:rotate(15deg); }
    
    77% { transform:rotate(15deg); }
    79% { transform:rotate(22deg); }
    81% { transform:rotate(11deg); }
    83% { transform:rotate(15deg); }
    
    100% { transform:rotate(15deg); }
}

@keyframes antenneklein {
    0% { transform:rotate(12deg); }
    
    15% { transform:rotate(12deg); }
    17% { transform:rotate(20deg); }
    20% { transform:rotate(5deg); }
    23% { transform:rotate(12deg); }
    
    32% { transform:rotate(12deg); }
    34% { transform:rotate(17deg); }
    36% { transform:rotate(7deg); }
    39% { transform:rotate(12deg); }
    
    47% { transform:rotate(12deg); }
    49% { transform:rotate(17deg); }
    51% { transform:rotate(7deg); }
    53% { transform:rotate(12deg); }
    
    67% { transform:rotate(12deg); }
    69% { transform:rotate(17deg); }
    71% { transform:rotate(7deg); }
    73% { transform:rotate(12deg); }
    
    77% { transform:rotate(12deg); }
    79% { transform:rotate(17deg); }
    81% { transform:rotate(7deg); }
    83% { transform:rotate(12deg); }
    
    100% { transform:rotate(12deg); }
}

/***********/
/* LICHAAM */
/***********/

.lichaam {
    position: relative;
    width: 100%; height: 100%;
    border: 0.375rem solid grey;
    background-color: var(--main-kleur);
    background-image:
        linear-gradient(to right, transparent 49.25%, grey 49.25%, grey 50.75%,transparent 50.75%),
        linear-gradient(to bottom, transparent 49.25%, grey 49.25%, grey 50.75%,transparent 50.75%);
    border-radius: 50%;
    overflow: hidden;
    transform: rotate(330deg);
}

:target .move .lichaam,
:target .slow .lichaam {
    animation: draaien calc(var(--snelheid)/24) infinite linear;
}

@keyframes draaien {
  from {transform: rotate(330deg);}
  to {transform: rotate(-30deg);}
}

/* lichaam binnen & randcirkels */
.cirkel {
    position: absolute;
    width: 52%; height: 52%;
    top: 24%; left: 24%;
    border: 0.375rem solid grey;
    background: var(--accent-kleur);
    border-radius: 50%;
}

.cirkel:nth-child(2) { transform:translateY(-14.75em); }
.cirkel:nth-child(3) { transform:translateX(14.75em); }
.cirkel:nth-child(4) { transform:translateY(14.75em); }
.cirkel:nth-child(5) { transform:translateX(-14.75em); }

/* pies */
.pie,
.pie div {
    position:absolute;
    width: 0; height: 0;
    transform-origin:bottom center;
}

.pie{
    left:calc(50% - 2.8em); top:calc(50% - 4.8em);
    border-left: 2.8em solid transparent;
    border-right: 2.8em solid transparent;
    border-top: 4.8em solid grey;
    border-radius: 50% 50% 0 0 / 32% 32% 0 0;
}

.pie:nth-of-type(1) {transform:rotate(0deg) translateY(0.4em);}
.pie:nth-of-type(2) {transform:rotate(90deg) translateY(0.4em);}
.pie:nth-of-type(3) {transform:rotate(180deg) translateY(0.4em);}
.pie:nth-of-type(4) {transform:rotate(270deg) translateY(0.4em);}

.pie > div {
    left:-2.15em; top:-4.425em; 
    border-left: 2.15em solid transparent;
    border-right: 2.15em solid transparent;
    border-top: 3.6em solid var(--main-kleur);
    border-radius: 50% 50% 0 0 / 28% 28% 0 0;
}

.pie > div > div {
    left:-1.7em; top:-3.35em; 
    border-left: 1.7em solid transparent;
    border-right: 1.7em solid transparent;
    border-top: 3em solid grey;
    border-radius: 50% 50% 0 0 / 24% 24% 0 0;
}

.pie > div > div > div {
    left:-1.4em; top:-2.25em; 
    border-left: 1.4em solid transparent;
    border-right: 1.4em solid transparent;
    border-top: 2.25em solid var(--main-kleur);
    border-radius: 50% 50% 0 0 / 24% 24% 0 0;
}

/* vierkanten */
.vierkant.achter {
    position:absolute;
    width:46%; height:46%;
    top:27%; left:27%;
    background:grey; 
    transform:rotate(45deg);
}

.vierkant.voor {
    position:absolute;
    width:calc(46% - .75em); height:calc(46% - .75em);
    top:calc(27% + .375em); left:calc(27% + .375em);
    background-image:
        linear-gradient(var(--main-kleur), var(--main-kleur)),
        linear-gradient(346deg, var(--main-kleur) 1em, transparent 1em),
        linear-gradient(104deg, var(--main-kleur) 1em, transparent 1em),
        linear-gradient(var(--main-kleur), var(--main-kleur)),
        linear-gradient(284deg, var(--main-kleur) 1em, transparent 1em),
        linear-gradient(166deg, var(--main-kleur) 1em, transparent 1em);
    background-size:52% 52%;
    background-position: left top, right top, right top, right bottom, left bottom, left bottom;
    background-repeat:no-repeat;
    transform:rotate(45deg);
}

.vierkant.voor div {
    position:absolute;
    width:calc(100% - .5em); height:calc(50% - .25em);
    top:.25em; left:.25em;
    background-image: radial-gradient(at bottom center, var(--main-kleur) 42%, grey 42%);
    border-radius:50% 50% 0 0 / 100% 100% 0 0;
    transform-origin:bottom center;
    transform:rotate(135deg);
    
}

.vierkant.voor div::before {
    content:"";
    position:absolute;
    width:50%; height:1em;
    left:50%; top:100%;
    background:var(--main-kleur);
    transform-origin: top left;
    transform: rotate(-28deg);
}

.vierkant.voor div::after {
    content:"";
    position:absolute;
    width:100%; height:200%;
    background-image: radial-gradient(var(--main-kleur) 42%, transparent 42%);
}

/* schroeven */
.schroeven div {
    position: absolute;
    width: 1em; height: 1em;
    top: calc(50% - .5em); left: calc(50% - .5em);
    border: 0.250rem solid grey;
    border-radius: 50%;
}

.lichaam > .schroeven div:nth-child(1) { transform:rotate(28deg) translateY(-7.75em); }
.lichaam > .schroeven div:nth-child(2) { transform:rotate(-28deg) translateY(-7.75em); }
.lichaam > .schroeven div:nth-child(3) { transform:rotate(118deg) translateY(-7.75em); }
.lichaam > .schroeven div:nth-child(4) { transform:rotate(-118deg) translateY(-7.75em); }
.lichaam > .schroeven div:nth-child(5) { transform:rotate(208deg) translateY(-7.75em); }
.lichaam > .schroeven div:nth-child(6) { transform:rotate(-208deg) translateY(-7.75em); }
.lichaam > .schroeven div:nth-child(7) { transform:rotate(298deg) translateY(-7.75em); }
.lichaam > .schroeven div:nth-child(8) { transform:rotate(-298deg) translateY(-7.75em); }

.cirkel > .schroeven div:nth-child(1) { transform:rotate(45deg) translateY(-3.625em); }
.cirkel > .schroeven div:nth-child(2) { transform:rotate(135deg) translateY(-3.625em); }
.cirkel > .schroeven div:nth-child(3) { transform:rotate(225deg) translateY(-3.625em); }
.cirkel > .schroeven div:nth-child(4) { transform:rotate(315deg) translateY(-3.625em); }


/*********/
/* GROND */
/*********/
.grond {
    --grond-size:160em;
    
    position:absolute;
    width:calc(2*var(--grond-size)); height:calc(2*var(--grond-size));
    top:calc(50vh + 12.5em); left:calc(50vw - var(--grond-size));
    background-color:#2e2e2e;
    border-radius:50%;
    box-shadow: 0 0 0 var(--accent-kleur);
    opacity:0;
    transition:box-shadow var(--snelheid);
}

:target .grond {
    box-shadow: 0 0 20em var(--accent-kleur);
    opacity:1;
}

/* stenen containers*/
.grond > div {
    position:absolute;
    width:100%; height:100%;
    border-radius:50%;
}

.grond > div:nth-child(2) { transform: rotate(270deg); }
.grond > div:nth-child(3) { transform: rotate(180deg); }
.grond > div:nth-child(4) { transform: rotate(90deg); }

/* de containers draaien en niet de hele grond om een repaint issue in chrome op te lossen */
:target .move .grond > div,
:target .slow .grond > div {
    animation: deaardedraait calc(4*var(--snelheid)) infinite linear;
}
:target .move .grond > div:nth-child(2),
:target .slow .grond > div:nth-child(2) {
    animation: deaardedraait2 calc(4*var(--snelheid)) infinite linear;
}
:target .move .grond > div:nth-child(3),
:target .slow .grond > div:nth-child(3) {
    animation: deaardedraait3 calc(4*var(--snelheid)) infinite linear;
}
:target .move .grond > div:nth-child(4),
:target .slow .grond > div:nth-child(4) {
    animation: deaardedraait4 calc(4*var(--snelheid)) infinite linear;
}

@keyframes deaardedraait {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes deaardedraait2 {
  from { transform: rotate(270deg); }
  to { transform: rotate(630deg); }
}
@keyframes deaardedraait3 {
  from { transform: rotate(180deg); }
  to { transform: rotate(540deg); }
}
@keyframes deaardedraait4 {
  from { transform: rotate(90deg); }
  to { transform: rotate(450deg); }
}

/* stenen */
.stenen div{
    position:absolute;
    width:1em; height:1em;
    top:calc(50% - .5em); left:calc(50% - .5em);
    background-color:#2e2e2e;
    border-radius:50%;
}

/* grote stenen */
.stenen.groot div:nth-child(1)  {transform:rotate(calc(-10.125*.9deg))     translateY(calc(-1*var(--grond-size)))  scale(2.5); }

/* middel stenen */
.stenen.middel div:nth-child(1) { transform:rotate(calc(-28.7*.9deg)) translateY(calc(-1*var(--grond-size)))  scale(1.5); }
.stenen.middel div:nth-child(2) { transform:rotate(calc(-43.7*.9deg)) translateY(calc(-1*var(--grond-size)))  scale(1.5); }
.stenen.middel div:nth-child(3) { transform:rotate(calc(-63.7*.9deg)) translateY(calc(-1*var(--grond-size)))  scale(1.5); }
.stenen.middel div:nth-child(4) { transform:rotate(calc(-73.7*.9deg)) translateY(calc(-1*var(--grond-size)))  scale(1.5); }

/* kleine stenen */
.stenen.klein div:nth-child(1)  { transform:rotate(calc(-3.5*.9deg))     translateY(calc(-1*var(--grond-size))); }
.stenen.klein div:nth-child(2)  { transform:rotate(calc(-23.5*.9deg))    translateY(calc(-1*var(--grond-size))); }
.stenen.klein div:nth-child(3)  { transform:rotate(calc(-53.5*.9deg))    translateY(calc(-1*var(--grond-size))); }
.stenen.klein div:nth-child(4)  { transform:rotate(calc(-68.5*.9deg))    translateY(calc(-1*var(--grond-size))); }
.stenen.klein div:nth-child(5)  { transform:rotate(calc(-83.5*.9deg))    translateY(calc(-1*var(--grond-size))); }
.stenen.klein div:nth-child(6)  { transform:rotate(calc(-88.5*.9deg))    translateY(calc(-1*var(--grond-size))); }
.stenen.klein div:nth-child(7)  { transform:rotate(calc(-93.5*.9deg))    translateY(calc(-1*var(--grond-size))); }


/************/
/* SCHUIFJE */
/************/
.extras {
    --extras-font:'Roboto Slab', sans-serif;
    --extras-margin:.25em;
    --extras-size:1rem;
    
    --extras-title-active-color:grey;
    
    --extras-schuif-idle-color:rgba(255,255,255,.1);
    --extras-schuif-active-color:var(--accent-kleur);
    --extras-schuif-active-background:var(--main-kleur);
    --extras-schuif-border-width:2px;

    --extras-neg-text:"nee";
    --extras-pos-text:"ja";
}


/************/
/* CONTROLS */
/************/
aside {
    display:none;
    position: absolute;
    width:100%;
    bottom:calc(4vh - .75em); left:0;
    text-align: center;
    z-index:500;
}

:target aside {
    display:block;
}

/* buttons */
aside button {
    position: relative;
    width:4em; height:4em;
    margin:0 .25em;
    
    font-size:1em;
    color:transparent;
    border:solid .375em grey;
    border-radius:50%;
    
    outline:none;
    cursor:pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    user-select: none;
}

/* power */
#power {
    background: url("../images/rocket.svg") center top / 100% auto repeat-y;
    background-color:var(--main-kleur);
    transform: rotate(45deg);
}

.move #power {
    animation:power calc(var(--snelheid)/6) linear infinite;
}

@keyframes power {
    0%{ background-position: center top; }
    100%{ background-position: center -3.25em; }
}

/* slomo */
#slomo {
    background:url("../images/snail.svg") left center / 100% auto repeat-x;
    background-color:var(--main-kleur);
}

.slow #slomo {
    animation:slomo var(--snelheid) linear infinite;
}

@keyframes slomo {
    0%{ background-position: left center; }
    100%{ background-position: 3.25em center; }
}

/* accent-kleur */
#accent-kleur {
    background:var(--main-kleur)
        radial-gradient(
        var(--groenig) .625em,
        grey .625em,
        grey .825em,
        transparent .825em
    ) center / 60% 60%;
    transform:rotate(330deg);
}

.groenig #accent-kleur {
    background-image:radial-gradient(
        var(--oranje) .625em,
        grey .625em,
        grey .825em,
        transparent .825em
    );
}

/* main-kleur */
#main-kleur {
    background-color: var(--dark);
}

.dark #main-kleur {
    background-color: var(--light);
}

/* focus */
aside button:focus-visible {
    box-shadow:0 0 1.25em .25em var(--accent-kleur);
}