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

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

body {
  margin:0; padding:2em;
  display:flex;
  justify-content:center;
  align-items:flex-end;
}

/***********/
/* SCENERY */
/***********/

/* ZWEMBAD */
@keyframes vooruitmetdiesnor {
    0% {background-position:center center, center 0px, center center;}
    67% {background-position:center center, center calc(var(--tegel-maat) / 2), center center;}
    100% {background-position:center center, center var(--tegel-maat), center center;}
}

body[data-thema="lekkerzwemmen"] {
  --tegel-maat: 100px;
  background:
    /* de 2 banen */
    linear-gradient(
      to right,
      transparent 0px 1px,
      rgb(103, 175, 187) 1px calc(var(--tegel-maat) - 1px),
      transparent calc(var(--tegel-maat) - 1px) calc(var(--tegel-maat) * 5 + 1px),
      rgb(103, 175, 187) calc(var(--tegel-maat) * 5 + 1px ) calc(var(--tegel-maat) * 6 - 1px),
      transparent calc(var(--tegel-maat) * 6 - 1px) calc(var(--tegel-maat) * 6)
    ) center center / calc(var(--tegel-maat) * 6) 100% no-repeat ,
    /* horizontale strepen */
    linear-gradient(
      to bottom,
      transparent 0px calc(var(--tegel-maat) / 2 - 1px),
      rgb(204,250,255) calc(var(--tegel-maat) / 2 - 1px) calc(var(--tegel-maat) / 2 + 1px),
      transparent calc(var(--tegel-maat) / 2 + 1px) var(--tegel-maat)
    ) center center / var(--tegel-maat) var(--tegel-maat) repeat,
    /* verticale strepen */
    linear-gradient(
      to right,
      transparent 0px calc(var(--tegel-maat) / 2 - 1px),
      rgb(204,245,255) calc(var(--tegel-maat) / 2 - 1px) calc(var(--tegel-maat) / 2 + 1px),
      transparent calc(var(--tegel-maat) / 2 + 1px) var(--tegel-maat)
    ) center center / var(--tegel-maat) var(--tegel-maat) repeat,
    /* kleur */
    rgb(129, 201, 216);
  animation: vooruitmetdiesnor 2s -1.5s linear infinite;
}

/* STRAND */
body[data-thema="ophetstrand"] {
  background-image: linear-gradient( to bottom, rgb(255, 204, 102), rgb(204, 164, 82) );
}

@keyframes nacht {
  0%, 50%{
    background-color:crimson;
    opacity:0;
  }
  60% {
    background-color:crimson;
    opacity:.5;
  }
  70% {
    background-color:midnightblue;
    opacity:.9;
  }
  100% {
    background-color:midnightblue;
    opacity:.99;
  }
}

body[data-thema="ophetstrand"]::after {
  content:"";
  position: fixed;
  left:0; right:0; top:0; bottom:0;
  z-index:400;
  animation:nacht 60s ease-in-out infinite alternate;
}

/* SNEEUW */
body[data-thema="indesneeuw"] {
  background-color: rgb(211, 221, 233);
}

/***********/
/* ZWEMMER */
/***********/
.zwemmer {
  --huidkleur: rgb(240, 145, 55);
  --haarkleur: black;
  --oogkleur: black;
  --neuskleur: rgb(236, 128, 53);
  --mondkleur: rgb(228, 125, 92);
  --kledingkleur: rgb(73, 68, 196);
  --kledingdonker: rgb(20, 30, 180);
  position: absolute;
  width: 250px; height: 500px;
}

.zwemmer.vrouw {
  --huidkleur: rgb(120, 92, 80);
  --haarkleur: rgb(45, 34, 30);
  --oogkleur: black;
  --neuskleur: rgb(165, 126, 110);
  --mondkleur: rgb(228, 125, 92);
  --kledingkleur: rgb(225, 211, 0);
  --kledingdonker: rgb(218, 165, 32);
  display:none;
}

body[data-thema="lekkerzwemmen"] .zwemmer {
  left:50%; top:50%;
  transform: translate(-50%, -50%);
}

body[data-thema="ophetstrand"] .zwemmer {
  left: calc(50% - 300px); top: calc(50% - 250px);
  transform: rotate(-20deg);
}

body[data-thema="indesneeuw"] .zwemmer {
  left: calc(50% + 200px); top: calc(50% - 270px);
  transform: rotate(40deg);
}

body[data-thema="indesneeuw"] .zwemmer.vrouw {
  display:block;
  left: calc(50% - 450px); top: calc(50% - 200px);
  transform: rotate(-25deg);
}

/* POPKE */
.popke {
  position:relative;
  width:100%; height:100%;
  z-index: 20;
  
  display:flex;
  flex-direction:column;
  align-items:center;
}

body[data-thema="lekkerzwemmen"] .popke {
   filter: drop-shadow(4em 4em .25em rgba(0, 102, 255, .25));
}

body[data-thema="ophetstrand"] .popke {
  filter: drop-shadow(-.25em .25em .25em rgba(0, 153, 0, .25));
}

body[data-thema="indesneeuw"] .popke {
  filter: drop-shadow(.125em .375em rgba(0, 102, 200, .25));
}

body[data-thema="indesneeuw"] .vrouw .popke {
  filter: drop-shadow(-.25em .25em rgba(0, 102, 200, .25));
}

/* HOOFT */
.hooft {
  position: relative;
  width: 100px; height: 125px;
}

.gezicht {
  position: relative;
  width: 100%; height: 100%;
  background-color: var(--huidkleur);
  border-radius: 30% 30% 50% 50%;
  
  display:grid;
  grid-template-columns:1fr 10px 10px 1fr;
  grid-template-rows:40px 40px 1fr;
}

.pony {
  width: 32px; height: 16px;
  grid-column:1/-1;
  justify-self:center;
  background: var(--haarkleur);
}
.vrouw .pony {
  width: 75%; height:8px;
  border-radius:0 0 50% 50% / 0 0 100% 100%;
}

.oog {
  width: 12px; height: 24px;
  background-color: var(--oogkleur);
  border-radius: 6px;
}

.oog.links {
  justify-self:flex-end;
}

.oog.rechts {
  justify-self:flex-start;
}

.neus {
  width: 24px; height: 24px;
  grid-column:2/4;
  grid-row:2;
  justify-self:center;
  align-self:flex-end;
  background-color: var(--neuskleur);
  border-radius: 100px;
  clip-path: polygon(50% 0, 100% 100%, 0% 100%, 50% 0);
}

.oor {
  position: absolute;
  width: 35px; height: 30px;
  top: 55px;
  background-color: inherit;
  border-radius: 50%;
}

.oor.links {
  right: calc(100% - 17px);
}

.oor.rechts {
  left: calc(100% - 17px);
}

@keyframes snorlinks {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(16deg);}
}

@keyframes snorrechts {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(-16deg);}
}

.snor {
  width: 32px; height: 12px;
  margin:3px 3px;
  background-color: var(--haarkleur);
}

.snor.links {
  grid-column:1/3;
  justify-self:flex-end;
  border-radius: 20px 0;
  transform-origin: calc(100% - 6px) 50%;
  animation: snorlinks 1s alternate infinite ease-in-out;
}

.snor.rechts {
  grid-column:3/5;
  justify-self:flex-start;
  border-radius: 0 20px;
  transform-origin: 6px 50%;
  animation: snorrechts 1s alternate infinite ease-in-out;
}

.lach {
  width: 40px; height: 20px;
  margin:6px;
  grid-column:1/-1;
  justify-self:center;
  background-image:radial-gradient( ellipse at center top, var(--mondkleur) 70.7%, transparent 70.7%);
}

/* Lach van de vrouw */
.haar {
  position: absolute;
  width: 200px; height: 200px;
  left: calc(50% - 100px); top: -25px; 
  background: var(--haarkleur);  
  background-color: var(--haarkleur);
  border-radius: 50% 50% 20% 20% / 80% 80% 20% 20%;
}

.vrouw .haar {
  height: 130px;
  top: -30px;
  border-radius: 50% 50% 20% 20% / 80% 80% 20% 20%;
}

.haarband {
  position: absolute;
  width: calc(100% + 10px); height: 15px;
  left: -5px; top: 13px;
  background-image: linear-gradient(to bottom,
    var(--kledingkleur) 33%,
    white 33% 67%,
    var(--kledingkleur) 67%);
  border-radius: 7px 7px 2px 2px / 13px 13px 2px 2px;
  z-index: 30;
}

@keyframes matje {
  0%, 100% {
    transform:scale(1.05, .9);
    border-radius: 50% 50% 30% 30% / 70% 70% 30% 30%;
  }
  45% {
    transform:scale(.95, 1.05);
    border-radius: 50% 50% 15% 15% / 75% 75% 15% 15%;
  }
}

body[data-thema="lekkerzwemmen"] .man .haar {
  transform-origin:center top;
  animation:matje 2s -2.35s infinite linear;
}

/*******/
/* NEK */
/*******/
.nek {
  position:relative;
  width:40px; height: 8px; 
  margin-top:-5px;
  margin-bottom:-.5px;
  
  background-color: var(--huidkleur);
  clip-path: polygon(4px 0, 36px 0, 100% 100%, 0% 100%, 4px 0);
  z-index: 40;
}

/*********/
/* TORSO */
/*********/
.torso {
  position:relative;
  margin-bottom:-.5px;
}

.man .torso {
  width: 130px; height: 117px;
}

.vrouw .torso {
  width: 112px; height: 120px;
}

.romp {
  height:100%;
  background-color: var(--huidkleur);
  
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:75% 1fr;
}

.man .romp {
  border-radius:45px 45px 0 0 / 6px 6px 0 0;
  clip-path:polygon(4px 0, 126px 0, 100% 12px, 107px 99px, 114px 100%, 16px 100%, 23px 99px, 0 12px, 4px 0);
}

.vrouw .romp {
  border-radius: 45px 45px 4px 4px / 6px 6px 30% 30%;
  clip-path:polygon(4px 0, 108px 0, 100% 12px, 100% 100%, 0 100%, 0 12px, 4px 0);
}

/* TEPELS $ NAVEL */
.tepel, .navel {
  width: 5px; height: 5px;
  justify-self:center;
  align-self:center;
  background-color: var(--neuskleur);
  border-radius: 50%;
}

.navel {
  height: 10px;
  grid-column:1/-1;  
}

/* TOPJE */
.bikini .topje {
  position: absolute;
  top:30px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid var(--kledingkleur);
  border-radius:40%;
}

.bikini .topje.links {
  right: calc(50% + 3px);   
}

.bikini .topje.rechts {
  left: calc(50% + 3px)
}

.bikini .touwtje {
  position: absolute;
  background: var(--kledingdonker);
  border-radius:1px;
}

.bikini .touwtje.horizontaal {
  height: 3px;
  left:-1px; right:-1px; top:60px;
}

.bikini .touwtje.links {
  width: 2px; height: 36px;
  right: calc(50% - 24px); top:0;
}

.bikini .touwtje.rechts {
  width: 2px; height: 36px;
  left: calc(50% - 24px); top:0;
}



/**************/
/* ONDERGEDOE */
/**************/
.ondergedoe {
  position:relative;
}

/* ZWEMBROEK */
.zwembroek {
  width: 115px; height: 40px;
  background-color: var(--kledingkleur);
  border-radius: 15px 15px 5px 5px / 55px 55px 5px 5px;
  box-shadow:inset 0 20px 0 -10px var(--kledingdonker);
}

.man .zwembroek::after {
  content:"";
  position: absolute;
  width: 34px; height: 40px;
  right: calc(50% - 17px); top: 20px;
  border-radius:50px;
  background-color: inherit;
}

.vrouw .zwembroek {
  height: 55px;
  border-radius: 5% 5% 0% 0% / 55% 55% 0% 0%;
  box-shadow:inset 0 10px 0 -5px var(--kledingdonker);
}

/*****************/
/* ARMEN & BENEN */
/*****************/
.arm, .been {
  position: absolute;
}

.arm { 
  top: 4px; 
}
.been { 
  top: 30px; 
}
.vrouw .been { 
  top: 23px; 
}

.arm.links { 
  left:-38px; 
}
.arm.rechts {
  right:-38px;
  transform:scalex(-1);
}
.been.links { 
  left:-1px; 
}
.been.rechts {
  right:-1px;
  transform:scalex(-1);
}

/* LEDEMATEN */
.arm *, .been * {
  position: absolute;
  background-color: var(--huidkleur);
}

/* armen */
.bovenarm {
  width: 55px; height: 25px;
  transform-origin: 42px 12px;
  transform: rotate(-70deg);
}

.onderarm {
  width: 25px; height: 85px;
  left: 0; bottom: 0;
  transform-origin: 12px 73px;
  transform: rotate(-110deg);
}

.hand {
  width: 25px; height: 40px;
  right: 0; top: -16px;
  transform-origin: 13px 28px;
  transform: rotate(-20deg);
}

.arm * {
  border-radius: 40px;
}

/* benen */
.bovenbeen {
  width: 50px; height: 80px;
  border-radius: 50% 50% 40% 20% / 20% 20% 80% 80%;
  box-shadow: inset 0 .125em .125em rgba(0,0,0,.25);
  transform-origin: 35px 10px;
  transform: rotate(10deg);
}

.vrouw .bovenbeen {
  width: 60px; height: 75px;
  border-radius: 50% 50% 45% 25% / 30% 30% 70% 70%;
}

.onderbeen {
  width: 25px; height: 90px;
  left: 8px; top: calc(100% - 12px);
  border-radius: 50px;
  transform-origin: 12px 12px;
  transform: rotate(-40deg);
}

.vrouw .onderbeen {
  width:35px; height: 82px;
  left: 9px; top: calc(100% - 20px);
  border-radius: 18px 18px 20px 8px/ 18px 18px 74px 74px;
}

.voet {
  width: 25px; height: 50px;
  left: 0; top: 68px;
  border-radius: 100px 50px;
  transform: rotate(50deg);
  transform-origin: 12px 12px;
}

.vrouw .voet {
  left: 5px;
}

/* animations */
@keyframes bovenarmZwemmen {
  0% {transform: rotate(60deg);}
  100% {transform: rotate(-55deg);}
}
@keyframes onderarmZwemmen {
  0% {transform: rotate(-150deg);}
  100% {transform: rotate(27deg);}
}
@keyframes handZwemmen {
  0% {transform: rotate(-50deg)}
  100% {transform: rotate(10deg)}
}

@keyframes bovenarmSneeuw {
  0% {transform: rotate(60deg);}
  100% {transform: rotate(-55deg);}
}
@keyframes onderarmSneeuw {
  0% {transform: rotate(-90deg);}
  100% {transform: rotate(-110deg);}
}
@keyframes handSneeuw {
  0% {transform: rotate(-50deg)}
  100% {transform: rotate(10deg)}
}

@keyframes bovenbeenZwemmen {
  0% {transform: rotate(60deg);}
  100% {transform: rotate(0deg);}
}
@keyframes onderbeenZwemmen {
  0% {transform: rotate(-80deg);}
  100% {transform: rotate(-20deg);}
}
@keyframes voetZwemmen {
  0% {transform: rotate(40deg)}
  100% {transform: rotate(10deg)}
}

@keyframes bovenbeenSneeuw {
  0% {transform: rotate(60deg);}
  100% {transform: rotate(10deg);}
}
@keyframes onderbeenSneeuw {
  0% {transform: rotate(10deg);}
  100% {transform: rotate(-30deg);}
}
@keyframes voetSneeuw {
  0% {transform: rotate(30deg);}
  100% {transform: rotate(-10deg);}
}

.arm *, .been * {
  animation-duration:1s;
  animation-timing-function:ease-in;
  animation-direction:alternate;
  animation-iteration-count:infinite;
}

body[data-thema="indesneeuw"] .arm *, body[data-thema="indesneeuw"] .been * {
  animation-timing-function:ease-in-out;
}

body[data-thema="lekkerzwemmen"] .bovenarm { animation-name: bovenarmZwemmen; }
body[data-thema="lekkerzwemmen"] .onderarm { animation-name: onderarmZwemmen; }
body[data-thema="lekkerzwemmen"] .hand { animation-name: handZwemmen; }

body[data-thema="indesneeuw"] .bovenarm { animation-name: bovenarmSneeuw; }
body[data-thema="indesneeuw"] .onderarm { animation-name: onderarmSneeuw; }
body[data-thema="indesneeuw"] .hand { animation-name: handSneeuw; }

body[data-thema="lekkerzwemmen"] .bovenbeen { animation-name:bovenbeenZwemmen; }
body[data-thema="lekkerzwemmen"] .onderbeen { animation-name: onderbeenZwemmen; }
body[data-thema="lekkerzwemmen"] .voet { animation-name: voetZwemmen; }

body[data-thema="indesneeuw"] .bovenbeen { animation-name:bovenbeenSneeuw; }
body[data-thema="indesneeuw"] .onderbeen { animation-name: onderbeenSneeuw; }
body[data-thema="indesneeuw"] .voet { animation-name: voetSneeuw; }

/* delays */
body[data-thema="lekkerzwemmen"] .bovenarm,
body[data-thema="indesneeuw"] .bovenarm,
body[data-thema="indesneeuw"] .onderarm,
body[data-thema="lekkerzwemmen"] .bovenbeen,
body[data-thema="indesneeuw"] .bovenbeen,
body[data-thema="lekkerzwemmen"] .onderbeen,
body[data-thema="indesneeuw"] .onderbeen,
body[data-thema="lekkerzwemmen"] .voet,
body[data-thema="indesneeuw"] .voet {
  animation-delay:-.5s;
}

body[data-thema="indesneeuw"] .hand {
  animation-delay: -1s;
}

body[data-thema="indesneeuw"] .vrouw .bovenarm,
body[data-thema="indesneeuw"] .vrouw .onderarm,
body[data-thema="indesneeuw"] .vrouw .bovenbeen,
body[data-thema="indesneeuw"] .vrouw .onderbeen,
body[data-thema="indesneeuw"] .vrouw .voet {
  animation-delay: -1.5s;
}

body[data-thema="indesneeuw"] .vrouw .hand {
  animation-delay: -2s;
}

/***********/
/* BUTTONS */
/***********/
aside {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap:1em;
}

button {
  width: 80px; height: 50px;
  margin:0;
  font-size: 30px;
  cursor:pointer;
  z-index: 500;
}

[data-thema="lekkerzwemmen"] button.zwembutton,
[data-thema="ophetstrand"] button.strandbutton,
[data-thema="indesneeuw"] button.sneeuwbutton {
  background:white;
}

/*********/
/* PROPS */
/*********/

/* STRANDMAT */
body[data-thema="ophetstrand"] .strandmat {
    position: absolute;
    width: 110%; height: 110%;
    left: -7%; top: -10%;
    
    background-image: linear-gradient(
      to bottom,
      rgb(132, 193, 37) 0% 9.75%,
      white 10.25% 19.75%,
      rgb(132, 193, 37) 20.25% 29.75%,
      white 30.25% 39.75%,
      rgb(132, 193, 37) 40.25% 49.75%,
      white 50.25% 59.75%,
      rgb(132, 193, 37) 60.25% 69.75%,
      white 70.25% 79.75%,
      rgb(132, 193, 37) 80.25% 89.75%,
      white 90.25% 100%
    );
    border-radius: 20px;
  box-shadow:-2px 2px 5px rgba(102,102,0,.25);
  transform: rotate(5deg);
}

/* PARASOL */
@keyframes parasol {
  0% { transform:rotate(0turn); }
  100% { transform:rotate(1turn); }
}

body[data-thema="ophetstrand"] .parasol {
  position: absolute;
  width: 425px; height: 425px;
  right: -500px; top: -25px;
  z-index:30;
  
  background-image:
    linear-gradient(
      270deg,
      rgba(255,204,204,.75),
      rgba(51,0,0,.75)
    ),
    radial-gradient(
      rgb(239, 154, 134) 10.7%,
      rgb(246, 200, 184) 10.7% 30.7%,
      rgb(239, 154, 134) 30.7% 50.7%,
      rgb(246, 200, 184) 50.7%
    );
  background-blend-mode:overlay;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation:parasol 120s linear infinite;
}

@keyframes schaduw {
  0% {
    transform:translateX(0) translateZ(-.1em) ;
    opacity:.25;
  }
  40% {
    opacity:.25;
  }
  60% {
    opacity:0;
  }
  100% {
    transform:translateX(-40em) translateZ(-.1em) ;
    opacity:0;
  }
}

body[data-thema="ophetstrand"] .parasol::before {
  content:"";
  position: absolute;
  width:110%; height:110%;
  left:-80%; top:-5%;
  border-radius:50%;
  background-image:radial-gradient(
    closest-side,
    rgba(102, 51, 0, 1) 90%,
    rgba(102, 51, 0, 0) 100%
  );
  
  animation:schaduw 60s ease-in infinite alternate;
}

/* SNEEUWENGEL */
body[data-thema="indesneeuw"] .sneeuwengel {
  position: absolute;
  width: 100%; height: 100%;
  left:0; top:0;
  filter: drop-shadow(.125em -.375em rgba(0, 102, 200, .25));
}

body[data-thema="indesneeuw"] .vrouw .sneeuwengel {
  filter: drop-shadow(.25em -.25em rgba(0, 102, 200, .25));
}

body[data-thema="indesneeuw"] .engelarm,
body[data-thema="indesneeuw"] .engelbenen {
  position: absolute;
  width:400px; height:220px;
  top:0;
  background-color:rgb(202, 214, 231);
  border-radius: 50%;
  clip-path: polygon(50% 0, 100% 100%, 0% 100%, 50% 0);
}

body[data-thema="indesneeuw"] .engelarm.links {
  left: -150px;
  transform: rotate(90deg);
}

body[data-thema="indesneeuw"] .engelarm.rechts {
  right: -150px;
  transform: rotate(-90deg);
}

body[data-thema="indesneeuw"] .engelbenen {
  width:600px; height:400px;
  left: -175px; top:70px;
}

body[data-thema="indesneeuw"] .vrouw .engelbenen {
  height:350px;
  top:100px;
}