* {
  box-sizing: border-box;
  margin: 0; padding: 0;
}

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

body {
  --wit: rgb(220, 230, 231);
  --geel: rgb(245, 211, 65);
  --lichtblauw: rgb(1, 161, 219);
  --blauw: rgb(1, 128, 189);

  --groen: rgb(68, 146, 68);
  --rood: rgb(238, 62, 64);
  --zwart: rgb(35, 25, 24);
  
  --kleur1: var(--wit);
  --kleur2: var(--geel);
  --kleur3: var(--lichtblauw);
  --kleur4: var(--blauw);
  
  --ster1: var(--rood);
  --ster2: white;
  
  position: relative;
  height: 100%;
  margin: 0;
  
  display: grid;
  grid-gap: 1em;
  align-items: center;
  justify-content: center;
  
  overflow: hidden;
}

body[data-mood="raggae"] {
  --kleur1: var(--zwart);
  --kleur2: var(--rood);
  --kleur3: var(--geel);
  --kleur4: var(--groen);
  
  --ster1: var(--blauw);
  --ster2: white;
}


/************************************************
                  DRAAI ANIMATIE
*************************************************/

@keyframes draaien {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

.spinnert {
  position: absolute;
  width: 400vw; height: 400vw;
  left: -200vw; top: calc(50vh - 200vw);
  
  background-image: conic-gradient(
    var(--kleur4) 0deg 20deg,
    var(--kleur1) 20deg 31deg,
    var(--kleur2) 31deg 51deg,
    var(--kleur3) 51deg 63deg,
    var(--kleur1) 63deg 72deg,
    var(--kleur4) 72deg 76deg,
    var(--kleur2) 76deg 80deg,
    var(--kleur4) 80deg 87deg,
    var(--kleur3) 87deg 99deg,
    var(--kleur4) 99deg 103deg,
    var(--kleur3) 103deg 111deg,
    var(--kleur2) 111deg 119deg,
    var(--kleur4) 119deg 135deg,
    var(--kleur2) 135deg 147deg,
    var(--kleur1) 147deg 167deg,
    var(--kleur2) 167deg 173deg,
    var(--kleur4) 173deg 200deg,
    var(--kleur1) 200deg 211deg,
    var(--kleur2) 211deg 231deg,
    var(--kleur3) 231deg 243deg,
    var(--kleur1) 243deg 254deg,
    var(--kleur4) 254deg 258deg,
    var(--kleur2) 258deg 262deg,
    var(--kleur4) 262deg 269deg,
    var(--kleur3) 269deg 281deg,
    var(--kleur4) 281deg 285deg,
    var(--kleur3) 285deg 293deg,
    var(--kleur2) 293deg 301deg,
    var(--kleur4) 301deg 317deg,
    var(--kleur2) 317deg 329deg,
    var(--kleur1) 329deg 349deg,
    var(--kleur2) 349deg 355deg,
    var(--kleur4) 355deg 360deg
  );
  
  animation:draaien 12s linear infinite paused;
}

body[data-mode="play"] .spinnert {
    animation-play-state:running;
}


.item {
  --shadow-size:min(3vw, 1.5rem);
  
  filter:drop-shadow(var(--shadow-size) var(--shadow-size) calc(var(--shadow-size) / 16) rgba(0,0,0,.25));
}


/************************************************
                    STAR
*************************************************/
@keyframes sterdraai {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

.star {
  font-size:12em;
  font-size:min(24vw, 12em);
  
  position: absolute;
  width: 1em; height: 1em;
  left: calc(50% - 1.5em);
  top: calc(50% - 2em);
}

.star div {
  width:100%; height:100%;
  
  background-color: var(--ster1);
  
  clip-path: polygon(50% 0, 62.5% 37.5%, 100% 50%, 62.5% 62.5%, 50% 100%, 37.5% 62.5%, 0 50%, 37.5% 37.5%, 50% 0);

  transition: 1s;
  animation-name: sterdraai;
  animation-duration: 12s;
  animation-timing-function: cubic-bezier(.64, 1.03, 0, 1.86);
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-delay: -.25s;
}

/*CLIP-PATH ANIMATIE HOVERENDE STER, je maakt alleen de buitenste de punten korter, waardoor hij hovert*/
.star:hover div {
    background-color: var(--ster2);
    clip-path: polygon(50% 10%, 62.5% 37.5%, 90% 50%, 62.5% 62.5%, 50% 90%, 37.5% 62.5%, 10% 50%, 37.5% 37.5%, 50% 10%);
}

body[data-mode="play"] .star div {
    animation-play-state:running;
}


/************************************************
                    LETTERS ARUBA'S
*************************************************/
@keyframes letterdraai {
  from {
    transform: rotate(-5deg) skewx(-5deg);
  }
  to {
    transform: rotate(5deg) skewx(5deg);
  }
}

.woord {
  position: relative;
  transform: rotate(-8deg);
  display: flex;
}

.aruba {
  font-size:2em;
  font-size:min(4vw, 2em);
  align-self: flex-end;
}

.malta {
  font-size:4.4em;
  font-size:min(8.8vw, 4.4em);
  align-self: flex-start;
}

.woord div {
  width: 2.5em;  height:2.5em;
  background-color:white;
  transition:background-color 1s;
  
  animation-name:letterdraai;
  animation-duration:.5s;
  animation-delay:-.25s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-play-state: paused;
}

.woord div:nth-of-type(even) {
  animation-delay:-.75s;
}

.woord div:hover {
  background-color:var(--ster1);
}

body[data-mode="play"] .woord div {
    animation-play-state:running;
}

.woord .aa {
  clip-path: polygon(16% 79%, 38% 9%, 30% 0, 56% 0, 88% 100%, 72% 100%, 65% 80%, 10% 100%, 15% 83%, 61% 66%, 48% 30%, 37% 71%);
}

.woord .bb {
  clip-path: polygon(13% 100%, 29% 6%, 26% 0%, 65% 0, 81% 29%, 63% 50%, 76% 73%, 50% 100%, 41% 86%, 56% 72%, 43% 50%, 61% 28%, 53% 15%, 44% 15%, 31% 84%, 49% 84%, 50% 100%);
}

.woord .ll {
  clip-path: polygon(20% 100%, 37% 6%, 29% 0%, 54% 0, 41% 80%, 66% 80%, 67% 86%, 66% 91%, 64% 95%, 61% 98%, 57% 100%);
}

.woord .mm {
  clip-path: polygon(5% 100%, 20% 6%, 14% 0, 42% 0, 55% 35%, 80% 0, 99% 0, 93% 73%, 83% 100%, 68% 100%, 76% 39%, 50% 70%, 35% 46%, 24% 100%);
}

.woord .rr {
  clip-path: polygon(10% 100%, 26% 6%, 20% 0%, 50% 0, 100% 38%, 66% 57%, 90% 100%, 69% 100%, 41% 52%, 69% 36%, 44% 18%, 28% 100%);
}

.woord .ss {
  clip-path: polygon(61% 0, 0% 34%, 57% 63%, 0 91%, 19% 100%, 90% 64%, 37% 33%, 78% 10%);
}

.woord .tt {
  clip-path: polygon(21% 0, 19% 15%, 36% 15%, 27% 100%, 42% 100%, 52% 15%, 74% 14%, 78% 12%, 80% 10%, 81% 6%, 82% 3%, 82% 0);
}

.woord .uu {
  clip-path: polygon(30% 0, 50% 0, 38% 84%, 62% 84%, 75% 0, 94% 0, 81% 100%, 16% 100%);
}

.woord .komma {
  width: 1em;
  clip-path: polygon(66% 0%, 25% 0, 20% 35%, 52% 35%);
}

.aa + .rr { margin-left: -.25em; }
.rr + .uu { margin-left:-.4375em; }
.uu + .bb { margin-left:-.4375em; }
.bb + .aa { margin-left:-.75em; }
.aa + .komma { margin-left:-.625em; }
.komma + .ss { margin-left:-.125em; }
.mm + .aa { margin-left:-.425em; }
.aa + .ll { margin-left:-.568em; }
.ll + .tt { margin-left:-.994em; }
.tt + .aa { margin-left:-.994em; }



/************************************************
                  RADIO BUTTONS
*************************************************/

aside {
  position: fixed;
  display: flex;
  right: 2em;
  top: 2em;
}

button {
  width: 2em; height: 2em;
  margin-left: .5em;
  
  font-size:2em;
  outline: none;
  appearance:none;
  border: none;
  border-radius: 50%;
  box-shadow:inset -.125em -.125em 0 rgba(0,0,0,.25);
  
  display: flex;
  justify-content: center;
  align-items: center;
}

button:hover {
  cursor: pointer;
}

button:focus {
  filter:brightness(1.1);
}

#salsaButton,
#raggaeButton {
  background-color: var(--ster1);
}

body[data-mood="salsa"] #salsaButton,
body[data-mood="raggae"] #raggaeButton {
  box-shadow:inset .125em .125em 0 rgba(0,0,0,.25);
  cursor:default;
}

#pauseButton {
  background-color: var(--geel);
}

#pauseButton::after {
  content:"\1F645 \200D \2642 \FE0F";
}

body[data-mode="pause"] #pauseButton::after {
  content:"\1F64B \200D \2642 \FE0F";
}

body[data-mode="play"] #pauseButton {
  box-shadow:inset .125em .125em 0 rgba(0,0,0,.25);
}