@font-face {
  font-family: Thuner;
  src: url('../styles/fonts/Thuner.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

html {
  --background-color: linear-gradient(0deg,
      oklch(43.726% 0.11301 280.038),
      oklch(58.131% 0.08403 346.194));
  ;
  --default-color: rgb(50, 50, 50);
  --black-color: black;
  --bright-color: rgba(255, 255, 255, 0.76);

  --front-color: #e12626;
  --back-color: #ff5e00;
  --left-color: #5da8eb;
  --right-color: #33d821;
  --bottom-color: rgb(255, 253, 232);
  --top-color: #fff200;

  --dark-front-color: #710000;
  --dark-back-color: #823200;
  --dark-left-color: #000065;
  --dark-right-color: #006502;
  --dark-bottom-color: #777777;
  --dark-top-color: #b48a00;
  --dark-background: linear-gradient(0deg,
      oklch(15.334% 0.05875 258.765),
      oklch(30.307% 0.05689 347.1));

  --face-filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
  --dark-face-filter: drop-shadow(0 2px 3px rgb(212, 0, 255)) drop-shadow(0 2px 3px rgb(46, 255, 220));
  --label-glow: rgb(212, 194, 255);
}

body {
  font-family: sans-serif;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2em;

  background: if(media(prefers-color-scheme: dark): var(--dark-background);
      else: var(--background-color);
    );

}

div {
  display: flex;
  justify-content: center;
  gap: 2em;
  padding:1em;
}


label {
  padding: 10px 20px;
  color: if(media(prefers-color-scheme: dark): var(--label-glow); else: var(--black-color));
  background: if(media(prefers-color-scheme: dark): var(--black-color); else: var(--bright-color));
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 100;
  border-radius: 6px;
  outline: 2px solid currentColor;
  outline-offset: 3px;
  transition: all 0.2s ease;
  text-shadow: if(media(prefers-color-scheme: dark): 0 0 5px var(--label-glow),
      0 0 0 #000);
  box-shadow: if(media(prefers-color-scheme: dark): 0 0 10px var(--label-glow),
      0 0 0 #000);
}

label:hover {
  outline: 2px solid currentColor;
  text-shadow: if(media(prefers-color-scheme: dark): 0 0 8px var(--label-glow),
      0 0 0 #000);
  box-shadow: if(media(prefers-color-scheme: dark): 0 0 15px var(--label-glow),
      0 0 0 #000);
}

input[type=radio] {
  display: none;
}

input[type=range] {
  accent-color:  if(media(prefers-color-scheme: dark): var(--label-glow); else: var(--default-color));
}



scene,
cube,
block,
face {
  display: block;
}

scene {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 50em;
  order:-1;
}

cube {
  position: relative;
  width: 8em;
  height: 8em;
  transform-style: preserve-3d;
  
  transform: rotateX(-30deg)
             rotateY(calc(var(--rotateY, 45) * 1deg - 45deg));
  transform-origin: center center;
}

block {
  position: absolute;
  width: 4em;
  height: 4em;
  transform-style: preserve-3d;
}

scene:nth-of-type(2)  block {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(0deg);
  left:25%;
  right:25%;
}

/* posities van blokjes */
/* Deze custom properties zijn bedacht door chatgpt waardoor ik ze later heb kunnen bewegen met de animaties */
block:nth-child(1) {
  --tx: -2em;
  --ty: -2em;
  --tz: 2em;
}

block:nth-child(2) {
  --tx: 2em;
  --ty: -2em;
  --tz: 2em;
}

block:nth-child(3) {
  --tx: -2em;
  --ty: 2em;
  --tz: 2em;
}

block:nth-child(4) {
  --tx: 2em;
  --ty: 2em;
  --tz: 2em;
}

block:nth-child(5) {
  --tx: -2em;
  --ty: -2em;
  --tz: -2em;
}

block:nth-child(6) {
  --tx: 2em;
  --ty: -2em;
  --tz: -2em;
}

block:nth-child(7) {
  --tx: -2em;
  --ty: 2em;
  --tz: -2em;
}

block:nth-child(8) {
  --tx: 2em;
  --ty: 2em;
  --tz: -2em;
}

face {
  position: absolute;
  width: 4em;
  height: 4em;
  border: none;
  background: var(--default-color);
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 2px var(--black-color);

  filter: if(media(prefers-color-scheme: dark): var(--dark-face-filter);
      else: var(--face-filter));
}

/* faces naar buiten via nth-child binnen block */
block>face:nth-child(1) {
  transform: rotateY(0deg) translateZ(2em);
}

/* front */
block>face:nth-child(2) {
  transform: rotateY(180deg) translateZ(2em);
}

/* back */
block>face:nth-child(3) {
  transform: rotateY(90deg) translateZ(2em);
}

/* right */
block>face:nth-child(4) {
  transform: rotateY(-90deg) translateZ(2em);
}

/* left */
block>face:nth-child(5) {
  transform: rotateX(90deg) translateZ(2em);
}

/* top */
block>face:nth-child(6) {
  transform: rotateX(-90deg) translateZ(2em);
}


/* front (z+) */
block:nth-child(1)>face:nth-child(1),
block:nth-child(2)>face:nth-child(1),
block:nth-child(3)>face:nth-child(1),
block:nth-child(4)>face:nth-child(1) {
  background: if(media(prefers-color-scheme: dark): var(--dark-front-color);
      else: var(--front-color));
}

/* back (z-) */
block:nth-child(5)>face:nth-child(2),
block:nth-child(6)>face:nth-child(2),
block:nth-child(7)>face:nth-child(2),
block:nth-child(8)>face:nth-child(2) {
  background: if(media(prefers-color-scheme: dark): var(--dark-back-color);
      else: var(--back-color));
}

/* right (x+) */
block:nth-child(2)>face:nth-child(3),
block:nth-child(4)>face:nth-child(3),
block:nth-child(6)>face:nth-child(3),
block:nth-child(8)>face:nth-child(3) {
  background: if(media(prefers-color-scheme: dark): var(--dark-right-color);
      else: var(--right-color));
}

/* left (x-) */
block:nth-child(1)>face:nth-child(4),
block:nth-child(3)>face:nth-child(4),
block:nth-child(5)>face:nth-child(4),
block:nth-child(7)>face:nth-child(4) {
  background: if(media(prefers-color-scheme: dark): var(--dark-left-color);
      else: var(--left-color));
}

/* top (y-) */
block:nth-child(1)>face:nth-child(5),
block:nth-child(2)>face:nth-child(5),
block:nth-child(5)>face:nth-child(5),
block:nth-child(6)>face:nth-child(5) {
  background: if(media(prefers-color-scheme: dark): var(--dark-top-color);
      else: var(--top-color));
}

/* bottom (y+) */
block:nth-child(3)>face:nth-child(6),
block:nth-child(4)>face:nth-child(6),
block:nth-child(7)>face:nth-child(6),
block:nth-child(8)>face:nth-child(6) {
  background: if(media(prefers-color-scheme: dark): var(--dark-bottom-color);
      else: var(--bottom-color));
}











/* Met code als dit heb ik ChatGPT gebruikt om te dupliceren en voor elke specifieke query een aparte
 regel te schrijven, ik heb de inhoud wel steeds zelf aangepast aangezien Chat dat steeds fout deed  */

/* --- F0° T0° --- */
div:nth-of-type(1):has(label:nth-of-type(1) input:checked)~scene block:nth-child(1),
div:nth-of-type(1):has(label:nth-of-type(1) input:checked)~scene block:nth-child(2),
div:nth-of-type(1):has(label:nth-of-type(1) input:checked)~scene block:nth-child(3),
div:nth-of-type(1):has(label:nth-of-type(1) input:checked)~scene block:nth-child(4),
div:nth-of-type(1):has(label:nth-of-type(1) input:checked)~scene block:nth-child(5),
div:nth-of-type(1):has(label:nth-of-type(1) input:checked)~scene block:nth-child(6),
div:nth-of-type(1):has(label:nth-of-type(1) input:checked)~scene block:nth-child(7),
div:nth-of-type(1):has(label:nth-of-type(1) input:checked)~scene block:nth-child(8) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(0deg) rotateY(0deg);
  transition: transform .5s;
}

/* --- F0° T90° --- */
div:nth-of-type(1):has(label:nth-of-type(2) input:checked)~scene block:nth-child(1),
div:nth-of-type(1):has(label:nth-of-type(2) input:checked)~scene block:nth-child(2),
div:nth-of-type(1):has(label:nth-of-type(2) input:checked)~scene block:nth-child(5),
div:nth-of-type(1):has(label:nth-of-type(2) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--tz)) translateY(var(--ty)) translateZ(calc(-1*var(--tx))) rotateZ(0deg) rotateY(90deg);
  transition: transform .5s;
}

div:nth-of-type(1):has(label:nth-of-type(2) input:checked)~scene block:nth-child(3),
div:nth-of-type(1):has(label:nth-of-type(2) input:checked)~scene block:nth-child(4) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(0deg) rotateY(0deg);
  transition: transform .5s;
}


/* --- F0° T180° --- */
div:nth-of-type(1):has(label:nth-of-type(3) input:checked)~scene block:nth-child(1),
div:nth-of-type(1):has(label:nth-of-type(3) input:checked)~scene block:nth-child(2),
div:nth-of-type(1):has(label:nth-of-type(3) input:checked)~scene block:nth-child(5),
div:nth-of-type(1):has(label:nth-of-type(3) input:checked)~scene block:nth-child(6) {
  transform: translateX(calc(-1*var(--tx))) translateY(var(--ty)) translateZ(calc(-1*var(--tz))) rotateZ(0deg) rotateY(180deg);
  transition: transform .5s;
}

div:nth-of-type(1):has(label:nth-of-type(3) input:checked)~scene block:nth-child(3),
div:nth-of-type(1):has(label:nth-of-type(3) input:checked)~scene block:nth-child(4) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(0deg) rotateY(0deg);
  transition: transform .5s;
}


/* --- F0° T270° --- */
div:nth-of-type(1):has(label:nth-of-type(4) input:checked)~scene block:nth-child(1),
div:nth-of-type(1):has(label:nth-of-type(4) input:checked)~scene block:nth-child(2),
div:nth-of-type(1):has(label:nth-of-type(4) input:checked)~scene block:nth-child(5),
div:nth-of-type(1):has(label:nth-of-type(4) input:checked)~scene block:nth-child(6) {
  transform: translateX(calc(-1*var(--tz))) translateY(var(--ty)) translateZ(var(--tx)) rotateZ(0deg) rotateY(270deg);
  transition: transform .5s;
}

div:nth-of-type(1):has(label:nth-of-type(4) input:checked)~scene block:nth-child(3),
div:nth-of-type(1):has(label:nth-of-type(4) input:checked)~scene block:nth-child(4) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(0deg) rotateY(0deg);
  transition: transform .5s;
}


/* --- F0° T360° --- */
div:nth-of-type(1):has(label:nth-of-type(5) input:checked)~scene block:nth-child(1),
div:nth-of-type(1):has(label:nth-of-type(5) input:checked)~scene block:nth-child(2),
div:nth-of-type(1):has(label:nth-of-type(5) input:checked)~scene block:nth-child(5),
div:nth-of-type(1):has(label:nth-of-type(5) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(0deg) rotateY(360deg);
  transition: transform .5s;
}

div:nth-of-type(1):has(label:nth-of-type(5) input:checked)~scene block:nth-child(3),
div:nth-of-type(1):has(label:nth-of-type(5) input:checked)~scene block:nth-child(4) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(0deg) rotateY(0deg);
  transition: transform .5s;
}

/* --- F90° T0° --- */
div:nth-of-type(2):has(label:nth-of-type(1) input:checked)~scene block:nth-child(1),
div:nth-of-type(2):has(label:nth-of-type(1) input:checked)~scene block:nth-child(2),
div:nth-of-type(2):has(label:nth-of-type(1) input:checked)~scene block:nth-child(3),
div:nth-of-type(2):has(label:nth-of-type(1) input:checked)~scene block:nth-child(4) {
  transform: translateX(calc(-1*var(--ty))) translateY(var(--tx)) translateZ(var(--tz)) rotateZ(90deg) rotateY(0deg);
  transition: transform .5s;
}

div:nth-of-type(2):has(label:nth-of-type(1) input:checked)~scene block:nth-child(5),
div:nth-of-type(2):has(label:nth-of-type(1) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(0deg) rotateY(0deg);
  transition: transform .5s;
}


/* --- F90° T90° --- */
div:nth-of-type(2):has(label:nth-of-type(2) input:checked)~scene block:nth-child(1) {
  transform: translateX(calc(-1 * var(--ty))) translateY(calc(-1 * var(--tx))) translateZ(var(--tz)) rotateZ(90deg) rotateY(90deg);
  transition: transform .5s;
}

div:nth-of-type(2):has(label:nth-of-type(2) input:checked)~scene block:nth-child(5) {
  transform: translateX(calc(-1*var(--tx))) translateY(var(--ty)) translateZ(calc(-1*var(--tx))) rotateZ(90deg) rotateY(90deg);
  transition: transform .5s;
}

div:nth-of-type(2):has(label:nth-of-type(2) input:checked)~scene block:nth-child(3),
div:nth-of-type(2):has(label:nth-of-type(2) input:checked)~scene block:nth-child(4) {
  transform: translateX(calc(-1*var(--ty))) translateY(var(--tx)) translateZ(var(--tz)) rotateZ(90deg) rotateY(0deg);
  transition: transform .5s;
}

div:nth-of-type(2):has(label:nth-of-type(2) input:checked)~scene block:nth-child(2),
div:nth-of-type(2):has(label:nth-of-type(2) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--tz)) translateY(var(--ty)) translateZ(calc(-1*var(--tx))) rotateZ(0deg) rotateY(90deg);
  transition: transform .5s;
}


/* --- F90° T180° --- */
div:nth-of-type(2):has(label:nth-of-type(3) input:checked)~scene block:nth-child(2) {
  transform: translateX(calc(-1*var(--tx))) translateY(var(--ty)) translateZ(calc(-1*var(--tz))) rotateZ(0deg) rotateY(180deg);
  transition: transform .5s;
}

div:nth-of-type(2):has(label:nth-of-type(3) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(calc(-1*var(--tz))) rotateZ(90deg) rotateY(180deg);
  transition: transform .5s;
}

div:nth-of-type(2):has(label:nth-of-type(3) input:checked)~scene block:nth-child(1) {
  transform: translateX(calc(-1*var(--ty))) translateY(var(--tx)) translateZ(calc(-1*var(--tz))) rotateZ(0deg) rotateY(180deg);
  transition: transform .5s;
}

div:nth-of-type(2):has(label:nth-of-type(3) input:checked)~scene block:nth-child(3),
div:nth-of-type(2):has(label:nth-of-type(3) input:checked)~scene block:nth-child(4) {
  transform: translateX(calc(-1*var(--ty))) translateY(var(--tx)) translateZ(var(--tz)) rotateZ(90deg) rotateY(0deg);
  transition: transform .5s;
}

div:nth-of-type(2):has(label:nth-of-type(3) input:checked)~scene block:nth-child(5) {
  transform: translateX(calc(-1*var(--tx))) translateY(calc(-1*var(--tx))) translateZ(calc(-1*var(--tx))) rotateZ(90deg) rotateY(180deg);
  transition: transform .5s;
}


/* --- F90° T270° --- */
/* Stilstaande blokken: 2 en 6 (positie F0-T270) */
div:nth-of-type(2):has(label:nth-of-type(4) input:checked)~scene block:nth-child(2) {
  transform: translateX(var(--tz)) translateY(calc(-1*var(--tx))) translateZ(var(--tx)) rotateZ(90deg) rotateY(270deg);
  transition: transform .5s;
}

div:nth-of-type(2):has(label:nth-of-type(4) input:checked)~scene block:nth-child(6) {
  transform: translateX(calc(-1*var(--ty))) translateY(var(--tx)) translateZ(calc(-1*var(--tz))) rotateZ(90deg) rotateY(270deg);
  transition: transform .5s;
}

/* Bewegende blokken: 1,3,4,5 */
div:nth-of-type(2):has(label:nth-of-type(4) input:checked)~scene block:nth-child(1),
div:nth-of-type(2):has(label:nth-of-type(4) input:checked)~scene block:nth-child(5) {
  transform: translateX(calc(-1*var(--tz))) translateY(var(--ty)) translateZ(var(--tx)) rotateZ(0deg) rotateY(270deg);
  transition: transform .5s;
}

div:nth-of-type(2):has(label:nth-of-type(4) input:checked)~scene block:nth-child(3),
div:nth-of-type(2):has(label:nth-of-type(4) input:checked)~scene block:nth-child(4) {
  transform: translateX(calc(-1*var(--ty))) translateY(var(--tx)) translateZ(var(--tz)) rotateZ(90deg) rotateY(0deg);
  transition: transform .5s;
}

/* --- F90° T360° --- */
/* Exact hetzelfde als F90° T0°, alleen Y-rotatie op 360° */
div:nth-of-type(2):has(label:nth-of-type(5) input:checked)~scene block:nth-child(1),
div:nth-of-type(2):has(label:nth-of-type(5) input:checked)~scene block:nth-child(2),
div:nth-of-type(2):has(label:nth-of-type(5) input:checked)~scene block:nth-child(3),
div:nth-of-type(2):has(label:nth-of-type(5) input:checked)~scene block:nth-child(4) {
  transform: translateX(calc(-1*var(--ty))) translateY(var(--tx)) translateZ(var(--tz)) rotateZ(90deg) rotateY(0deg);
  transition: transform .5s;
}

div:nth-of-type(2):has(label:nth-of-type(5) input:checked)~scene block:nth-child(5),
div:nth-of-type(2):has(label:nth-of-type(5) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(0deg) rotateY(360deg);
}


/* --- F180° T0° --- */
div:nth-of-type(3):has(label:nth-of-type(1) input:checked)~scene block:nth-child(1),
div:nth-of-type(3):has(label:nth-of-type(1) input:checked)~scene block:nth-child(2),
div:nth-of-type(3):has(label:nth-of-type(1) input:checked)~scene block:nth-child(3),
div:nth-of-type(3):has(label:nth-of-type(1) input:checked)~scene block:nth-child(4) {
  transform: translateX(calc(-1 * var(--tx))) translateY(calc(-1 * var(--ty))) translateZ(var(--tz)) rotateZ(180deg);
  transition: transform .5s;
}

div:nth-of-type(3):has(label:nth-of-type(1) input:checked)~scene block:nth-child(5),
div:nth-of-type(3):has(label:nth-of-type(1) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(0deg) rotateY(0deg);
  transition: transform .5s;
}


/* --- F180° T90° --- */
div:nth-of-type(3):has(label:nth-of-type(2) input:checked)~scene block:nth-child(1) {
  transform: translateX(var(--ty)) translateY(calc(-1 * var(--tx))) translateZ(var(--tz)) rotateZ(180deg) rotateY(90deg);
  transition: transform .5s;
}

div:nth-of-type(3):has(label:nth-of-type(2) input:checked)~scene block:nth-child(3) {
  transform: translateX(calc(-1 * var(--tx))) translateY(calc(-1 * var(--ty))) translateZ(var(--tz)) rotateZ(180deg);
  transition: transform .5s;
}

div:nth-of-type(3):has(label:nth-of-type(2) input:checked)~scene block:nth-child(4) {
  transform: translateX(calc(-1*var(--ty))) translateY(calc(-1*var(--tx))) translateZ(var(--tz)) rotateZ(180deg) rotateY(0deg);
  transition: transform .5s;
}

div:nth-of-type(3):has(label:nth-of-type(2) input:checked)~scene block:nth-child(5) {
  transform: translateX(calc(-1*var(--tx))) translateY(calc(-1*var(--tx))) translateZ(calc(-1*var(--tx))) rotateZ(180deg) rotateY(90deg);
  transition: transform .5s;
}

div:nth-of-type(3):has(label:nth-of-type(2) input:checked)~scene block:nth-child(2),
div:nth-of-type(3):has(label:nth-of-type(2) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--tz)) translateY(var(--ty)) translateZ(calc(-1*var(--tx))) rotateZ(0deg) rotateY(90deg);
  transition: transform .5s;
}


/* --- F180° T180° --- */
div:nth-of-type(3):has(label:nth-of-type(3) input:checked)~scene block:nth-child(2) {
  transform: translateX(calc(-1*var(--tx))) translateY(var(--ty)) translateZ(calc(-1*var(--tz))) rotateZ(0deg) rotateY(180deg);
  transition: transform .5s;
}

div:nth-of-type(3):has(label:nth-of-type(3) input:checked)~scene block:nth-child(1) {
  transform: translateX(calc(-1*var(--ty))) translateY(var(--tx)) translateZ(calc(-1*var(--tz))) rotateZ(0deg) rotateY(180deg);
  transition: transform .5s;
}

div:nth-of-type(3):has(label:nth-of-type(3) input:checked)~scene block:nth-child(3),
div:nth-of-type(3):has(label:nth-of-type(3) input:checked)~scene block:nth-child(4) {
  transform: translateX(calc(-1 * var(--tx))) translateY(calc(-1 * var(--ty))) translateZ(var(--tz)) rotateZ(180deg);
  transition: transform .5s;
}

div:nth-of-type(3):has(label:nth-of-type(3) input:checked)~scene block:nth-child(5) {
  transform: translateX(var(--tz)) translateY(calc(-1 * var(--ty))) translateZ(calc(-1*var(--tx)))rotateZ(180deg) rotateY(180deg);
  transition: transform .5s;
}

div:nth-of-type(3):has(label:nth-of-type(3) input:checked)~scene block:nth-child(6) {
  transform: translateX(calc(-1*var(--ty))) translateY(var(--tx)) translateZ(calc(-1*var(--tz))) rotateZ(180deg) rotateY(180deg);
  transition: transform .5s;
}


/* --- F180° T270° --- */
/* Stilstaande blokken: 2 en 6 (positie F0-T270) */
div:nth-of-type(3):has(label:nth-of-type(4) input:checked)~scene block:nth-child(2) {
  transform: translateX(var(--tz)) translateY(var(--tx)) translateZ(var(--tx)) rotateZ(180deg) rotateY(270deg);
  transition: transform .5s;
}

div:nth-of-type(3):has(label:nth-of-type(4) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--ty)) translateY(var(--tx)) translateZ(calc(-1*var(--tz))) rotateZ(180deg) rotateY(270deg);
  transition: transform .5s;
}

/* Bewegende blokken: 1,3,4,5 */
div:nth-of-type(3):has(label:nth-of-type(4) input:checked)~scene block:nth-child(1),
div:nth-of-type(3):has(label:nth-of-type(4) input:checked)~scene block:nth-child(5) {
  transform: translateX(calc(-1*var(--tz))) translateY(var(--ty)) translateZ(var(--tx)) rotateZ(0deg) rotateY(270deg);
  transition: transform .5s;
}

div:nth-of-type(3):has(label:nth-of-type(4) input:checked)~scene block:nth-child(3),
div:nth-of-type(3):has(label:nth-of-type(4) input:checked)~scene block:nth-child(4) {
  transform: translateX(calc(-1 * var(--tx))) translateY(calc(-1 * var(--ty))) translateZ(var(--tz)) rotateZ(180deg);
  transition: transform .5s;
}


/* --- F180° T360° --- */
/* Exact hetzelfde als F180° T0° */
div:nth-of-type(3):has(label:nth-of-type(5) input:checked)~scene block:nth-child(1),
div:nth-of-type(3):has(label:nth-of-type(5) input:checked)~scene block:nth-child(2),
div:nth-of-type(3):has(label:nth-of-type(5) input:checked)~scene block:nth-child(3),
div:nth-of-type(3):has(label:nth-of-type(5) input:checked)~scene block:nth-child(4) {
  transform: translateX(calc(-1*var(--tx))) translateY(calc(-1*var(--ty))) translateZ(var(--tz)) rotateZ(180deg) rotateY(0deg);
  transition: transform .5s;
}

div:nth-of-type(3):has(label:nth-of-type(5) input:checked)~scene block:nth-child(5),
div:nth-of-type(3):has(label:nth-of-type(5) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(0deg) rotateY(0deg);
}


/* --- F270° T0° --- */
div:nth-of-type(4):has(label:nth-of-type(1) input:checked)~scene block:nth-child(1),
div:nth-of-type(4):has(label:nth-of-type(1) input:checked)~scene block:nth-child(2),
div:nth-of-type(4):has(label:nth-of-type(1) input:checked)~scene block:nth-child(3),
div:nth-of-type(4):has(label:nth-of-type(1) input:checked)~scene block:nth-child(4) {
  transform: translateX(var(--ty)) translateY(calc(-1 * var(--tx))) translateZ(var(--tz)) rotateZ(270deg);
  transition: transform .5s;
}

div:nth-of-type(4):has(label:nth-of-type(1) input:checked)~scene block:nth-child(5),
div:nth-of-type(4):has(label:nth-of-type(1) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(0deg) rotateY(0deg);
  transition: transform .5s;
}

/* --- F270° T90° --- */
div:nth-of-type(4):has(label:nth-of-type(2) input:checked)~scene block:nth-child(1) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(270deg) rotateY(90deg);
  transition: transform .5s;
}

div:nth-of-type(4):has(label:nth-of-type(2) input:checked)~scene block:nth-child(5) {
  transform: translateX(var(--tx)) translateY(calc(-1 * var(--ty))) translateZ(calc(-1*var(--tx))) rotateZ(270deg) rotateY(90deg);
  transition: transform .5s;
}

div:nth-of-type(4):has(label:nth-of-type(2) input:checked)~scene block:nth-child(3),
div:nth-of-type(4):has(label:nth-of-type(2) input:checked)~scene block:nth-child(4) {
  transform: translateX(var(--ty)) translateY(calc(-1 * var(--tx))) translateZ(var(--tz)) rotateZ(270deg);
  transition: transform .5s;
}

div:nth-of-type(4):has(label:nth-of-type(2) input:checked)~scene block:nth-child(2),
div:nth-of-type(4):has(label:nth-of-type(2) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--tz)) translateY(var(--ty)) translateZ(calc(-1*var(--tx))) rotateZ(0deg) rotateY(90deg);
  transition: transform .5s;
}


/* --- F270° T180° --- */
div:nth-of-type(4):has(label:nth-of-type(3) input:checked)~scene block:nth-child(1) {
  transform: translateX(calc(-1*var(--ty))) translateY(var(--tx)) translateZ(calc(-1*var(--tz))) rotateZ(0deg) rotateY(180deg);
  transition: transform .5s;
}

div:nth-of-type(4):has(label:nth-of-type(3) input:checked)~scene block:nth-child(2) {
  transform: translateX(calc(-1*var(--tx))) translateY(var(--ty)) translateZ(calc(-1*var(--tz))) rotateZ(0deg) rotateY(180deg);
  transition: transform .5s;
}

div:nth-of-type(4):has(label:nth-of-type(3) input:checked)~scene block:nth-child(3),
div:nth-of-type(4):has(label:nth-of-type(3) input:checked)~scene block:nth-child(4) {
  transform: translateX(var(--ty)) translateY(calc(-1 * var(--tx))) translateZ(var(--tz)) rotateZ(270deg);
  transition: transform .5s;
}

div:nth-of-type(4):has(label:nth-of-type(3) input:checked)~scene block:nth-child(5) {
  transform: translateX(var(--tz)) translateY(var(--ty)) translateZ(calc(-1*var(--tx))) rotateZ(270deg) rotateY(180deg);
  transition: transform .5s;
}

div:nth-of-type(4):has(label:nth-of-type(3) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--ty)) translateY(var(--tx)) translateZ(calc(-1*var(--tz))) rotateZ(270deg) rotateY(180deg);
  transition: transform .5s;
}

/* --- F270° T270° --- */
div:nth-of-type(4):has(label:nth-of-type(4) input:checked)~scene block:nth-child(2) {
  transform: translateX(calc(-1*var(--tz))) translateY(var(--tx)) translateZ(var(--tx)) rotateZ(270deg) rotateY(270deg);
  transition: transform .5s;
}

div:nth-of-type(4):has(label:nth-of-type(4) input:checked)~scene block:nth-child(6) {
  transform: translateX(calc(-1*var(--tx))) translateY(var(--ty)) translateZ(calc(-1*var(--tz))) rotateZ(270deg) rotateY(270deg);
  transition: transform .5s;
}

div:nth-of-type(4):has(label:nth-of-type(4) input:checked)~scene block:nth-child(1),
div:nth-of-type(4):has(label:nth-of-type(4) input:checked)~scene block:nth-child(5) {
  transform: translateX(calc(-1*var(--tz))) translateY(var(--ty)) translateZ(var(--tx)) rotateZ(0deg) rotateY(270deg);
  transition: transform .5s;
}

div:nth-of-type(4):has(label:nth-of-type(4) input:checked)~scene block:nth-child(3),
div:nth-of-type(4):has(label:nth-of-type(4) input:checked)~scene block:nth-child(4) {
  transform: translateX(var(--ty)) translateY(calc(-1 * var(--tx))) translateZ(var(--tz)) rotateZ(270deg);
  transition: transform .5s;
}


/* --- F270° T360° --- */
div:nth-of-type(4):has(label:nth-of-type(5) input:checked)~scene block:nth-child(1),
div:nth-of-type(4):has(label:nth-of-type(5) input:checked)~scene block:nth-child(2),
div:nth-of-type(4):has(label:nth-of-type(5) input:checked)~scene block:nth-child(3),
div:nth-of-type(4):has(label:nth-of-type(5) input:checked)~scene block:nth-child(4) {
  transform: translateX(var(--ty)) translateY(calc(-1 * var(--tx))) translateZ(var(--tz)) rotateZ(270deg) rotateY(0deg);
  transition: transform .5s;
}

div:nth-of-type(4):has(label:nth-of-type(5) input:checked)~scene block:nth-child(5),
div:nth-of-type(4):has(label:nth-of-type(5) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(0deg) rotateY(360deg);
}


/* --- F360° T0° --- */
div:nth-of-type(5):has(label:nth-of-type(1) input:checked)~scene block:nth-child(1),
div:nth-of-type(5):has(label:nth-of-type(1) input:checked)~scene block:nth-child(2),
div:nth-of-type(5):has(label:nth-of-type(1) input:checked)~scene block:nth-child(3),
div:nth-of-type(5):has(label:nth-of-type(1) input:checked)~scene block:nth-child(4) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(360deg) rotateY(0deg);
  transition: transform .5s;
}

div:nth-of-type(5):has(label:nth-of-type(1) input:checked)~scene block:nth-child(5),
div:nth-of-type(5):has(label:nth-of-type(1) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(0deg) rotateY(0deg);
  transition: transform .5s;
}

/* --- F360° T90° --- */
div:nth-of-type(5):has(label:nth-of-type(2) input:checked)~scene block:nth-child(1),
div:nth-of-type(5):has(label:nth-of-type(2) input:checked)~scene block:nth-child(5) {
  transform: translateX(var(--tz)) translateY(var(--ty)) translateZ(calc(-1*var(--tx))) rotateZ(360deg) rotateY(90deg);
  transition: transform .5s;
}

div:nth-of-type(5):has(label:nth-of-type(2) input:checked)~scene block:nth-child(2),
div:nth-of-type(5):has(label:nth-of-type(2) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--tz)) translateY(var(--ty)) translateZ(calc(-1*var(--tx))) rotateZ(0deg) rotateY(90deg);
  transition: transform .5s;
}

div:nth-of-type(5):has(label:nth-of-type(2) input:checked)~scene block:nth-child(3),
div:nth-of-type(5):has(label:nth-of-type(2) input:checked)~scene block:nth-child(4) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(360deg) rotateY(0deg);
  transition: transform .5s;
}

/* --- F360° T180° --- */
div:nth-of-type(5):has(label:nth-of-type(3) input:checked)~scene block:nth-child(1),
div:nth-of-type(5):has(label:nth-of-type(3) input:checked)~scene block:nth-child(2) {
  transform: translateX(calc(-1*var(--tx))) translateY(var(--ty)) translateZ(calc(-1*var(--tz))) rotateZ(0deg) rotateY(180deg);
  transition: transform .5s;
}

div:nth-of-type(5):has(label:nth-of-type(3) input:checked)~scene block:nth-child(5),
div:nth-of-type(5):has(label:nth-of-type(3) input:checked)~scene block:nth-child(6) {
  transform: translateX(calc(-1*var(--tx))) translateY(var(--ty)) translateZ(calc(-1*var(--tz))) rotateZ(360deg) rotateY(180deg);
  transition: transform .5s;
}

div:nth-of-type(5):has(label:nth-of-type(3) input:checked)~scene block:nth-child(3),
div:nth-of-type(5):has(label:nth-of-type(3) input:checked)~scene block:nth-child(4) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(360deg) rotateY(0deg);
  transition: transform .5s;
}

/* --- F360° T270° --- */
div:nth-of-type(5):has(label:nth-of-type(4) input:checked)~scene block:nth-child(1),
div:nth-of-type(5):has(label:nth-of-type(4) input:checked)~scene block:nth-child(5) {
  transform: translateX(calc(-1*var(--tz))) translateY(var(--ty)) translateZ(var(--tx)) rotateZ(0deg) rotateY(270deg);
  transition: transform .5s;
}

div:nth-of-type(5):has(label:nth-of-type(4) input:checked)~scene block:nth-child(2),
div:nth-of-type(5):has(label:nth-of-type(4) input:checked)~scene block:nth-child(6) {
  transform: translateX(calc(-1*var(--tz))) translateY(var(--ty)) translateZ(var(--tx)) rotateZ(360deg) rotateY(270deg);
  transition: transform .5s;
}

div:nth-of-type(5):has(label:nth-of-type(4) input:checked)~scene block:nth-child(3),
div:nth-of-type(5):has(label:nth-of-type(4) input:checked)~scene block:nth-child(4) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(360deg) rotateY(360deg);
  transition: transform .5s;
}


/* --- F360° T360° --- */
div:nth-of-type(5):has(label:nth-of-type(5) input:checked)~scene block:nth-child(1),
div:nth-of-type(5):has(label:nth-of-type(5) input:checked)~scene block:nth-child(2),
div:nth-of-type(5):has(label:nth-of-type(5) input:checked)~scene block:nth-child(3),
div:nth-of-type(5):has(label:nth-of-type(5) input:checked)~scene block:nth-child(4) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(360deg) rotateY(0deg);
  transition: transform .5s;
}

div:nth-of-type(5):has(label:nth-of-type(5) input:checked)~scene block:nth-child(5),
div:nth-of-type(5):has(label:nth-of-type(5) input:checked)~scene block:nth-child(6) {
  transform: translateX(var(--tx)) translateY(var(--ty)) translateZ(var(--tz)) rotateZ(0deg) rotateY(0deg);
}










div label {
  display: none;
}

/* F0 */
body:has(div:nth-of-type(1) label:nth-of-type(2) input:checked) div:nth-of-type(1) label:nth-of-type(1),
body:has(div:nth-of-type(1) label:nth-of-type(3) input:checked) div:nth-of-type(1) label:nth-of-type(2),
body:has(div:nth-of-type(1) label:nth-of-type(4) input:checked) div:nth-of-type(1) label:nth-of-type(3),
body:has(div:nth-of-type(1) label:nth-of-type(5) input:checked) div:nth-of-type(1) label:nth-of-type(4) {
  display: inline-block;
  order: 0;

  &::after {
    content: " - Linksom";
  }
}

body:has(div:nth-of-type(1) label:nth-of-type(1) input:checked) div:nth-of-type(1) label:nth-of-type(2),
body:has(div:nth-of-type(1) label:nth-of-type(2) input:checked) div:nth-of-type(1) label:nth-of-type(3),
body:has(div:nth-of-type(1) label:nth-of-type(3) input:checked) div:nth-of-type(1) label:nth-of-type(4),
body:has(div:nth-of-type(1) label:nth-of-type(4) input:checked) div:nth-of-type(1) label:nth-of-type(5) {
  display: inline-block;
  order: 1;

  &::after {
    content: " - Rechtsom";
  }
}

body:has(div:nth-of-type(1) label:nth-of-type(1) input:checked) div:nth-of-type(2) label:nth-of-type(1),
body:has(div:nth-of-type(1) label:nth-of-type(2) input:checked) div:nth-of-type(2) label:nth-of-type(2),
body:has(div:nth-of-type(1) label:nth-of-type(3) input:checked) div:nth-of-type(2) label:nth-of-type(3),
body:has(div:nth-of-type(1) label:nth-of-type(4) input:checked) div:nth-of-type(2) label:nth-of-type(4),
body:has(div:nth-of-type(1) label:nth-of-type(5) input:checked) div:nth-of-type(2) label:nth-of-type(5) {
  display: inline-block;

  &::after {
    content: " - Omlaag";
  }
}

body:has(div:nth-of-type(1) label:nth-of-type(1) input:checked) div:nth-of-type(5) label:nth-of-type(1),
body:has(div:nth-of-type(1) label:nth-of-type(2) input:checked) div:nth-of-type(5) label:nth-of-type(2),
body:has(div:nth-of-type(1) label:nth-of-type(3) input:checked) div:nth-of-type(5) label:nth-of-type(3),
body:has(div:nth-of-type(1) label:nth-of-type(4) input:checked) div:nth-of-type(5) label:nth-of-type(4),
body:has(div:nth-of-type(1) label:nth-of-type(5) input:checked) div:nth-of-type(5) label:nth-of-type(5) {
  display: inline-block;

  &::after {
    content: " - Omdraaien";
  }
}


/* F90 */
body:has(div:nth-of-type(2) label:nth-of-type(1) input:checked) div:nth-of-type(1) label:nth-of-type(1),
body:has(div:nth-of-type(2) label:nth-of-type(2) input:checked) div:nth-of-type(1) label:nth-of-type(2),
body:has(div:nth-of-type(2) label:nth-of-type(3) input:checked) div:nth-of-type(1) label:nth-of-type(3),
body:has(div:nth-of-type(2) label:nth-of-type(4) input:checked) div:nth-of-type(1) label:nth-of-type(4),
body:has(div:nth-of-type(2) label:nth-of-type(5) input:checked) div:nth-of-type(1) label:nth-of-type(5) {
  display: inline-block;

  &::after {
    content: " - Omhoog";
  }
}

body:has(div:nth-of-type(2) label:nth-of-type(1) input:checked) div:nth-of-type(3) label:nth-of-type(1),
body:has(div:nth-of-type(2) label:nth-of-type(2) input:checked) div:nth-of-type(3) label:nth-of-type(2),
body:has(div:nth-of-type(2) label:nth-of-type(3) input:checked) div:nth-of-type(3) label:nth-of-type(3),
body:has(div:nth-of-type(2) label:nth-of-type(4) input:checked) div:nth-of-type(3) label:nth-of-type(4),
body:has(div:nth-of-type(2) label:nth-of-type(5) input:checked) div:nth-of-type(3) label:nth-of-type(5) {
  display: inline-block;

  &::after {
    content: " - Omlaag";
  }
}


/* F180 */
body:has(div:nth-of-type(3) label:nth-of-type(1) input:checked) div:nth-of-type(2) label:nth-of-type(1),
body:has(div:nth-of-type(3) label:nth-of-type(2) input:checked) div:nth-of-type(2) label:nth-of-type(2),
body:has(div:nth-of-type(3) label:nth-of-type(3) input:checked) div:nth-of-type(2) label:nth-of-type(3),
body:has(div:nth-of-type(3) label:nth-of-type(4) input:checked) div:nth-of-type(2) label:nth-of-type(4),
body:has(div:nth-of-type(3) label:nth-of-type(5) input:checked) div:nth-of-type(2) label:nth-of-type(5) {
  display: inline-block;

  &::after {
    content: " - Omhoog";
  }
}

body:has(div:nth-of-type(3) label:nth-of-type(1) input:checked) div:nth-of-type(4) label:nth-of-type(1),
body:has(div:nth-of-type(3) label:nth-of-type(2) input:checked) div:nth-of-type(4) label:nth-of-type(2),
body:has(div:nth-of-type(3) label:nth-of-type(3) input:checked) div:nth-of-type(4) label:nth-of-type(3),
body:has(div:nth-of-type(3) label:nth-of-type(4) input:checked) div:nth-of-type(4) label:nth-of-type(4),
body:has(div:nth-of-type(3) label:nth-of-type(5) input:checked) div:nth-of-type(4) label:nth-of-type(5) {
  display: inline-block;

  &::after {
    content: " - Omlaag";
  }
}



/* F270 */
body:has(div:nth-of-type(4) label:nth-of-type(1) input:checked) div:nth-of-type(3) label:nth-of-type(1),
body:has(div:nth-of-type(4) label:nth-of-type(2) input:checked) div:nth-of-type(3) label:nth-of-type(2),
body:has(div:nth-of-type(4) label:nth-of-type(3) input:checked) div:nth-of-type(3) label:nth-of-type(3),
body:has(div:nth-of-type(4) label:nth-of-type(4) input:checked) div:nth-of-type(3) label:nth-of-type(4),
body:has(div:nth-of-type(4) label:nth-of-type(5) input:checked) div:nth-of-type(3) label:nth-of-type(5) {
  display: inline-block;

  &::after {
    content: " - Omhoog";
  }
}

body:has(div:nth-of-type(4) label:nth-of-type(1) input:checked) div:nth-of-type(5) label:nth-of-type(1),
body:has(div:nth-of-type(4) label:nth-of-type(2) input:checked) div:nth-of-type(5) label:nth-of-type(2),
body:has(div:nth-of-type(4) label:nth-of-type(3) input:checked) div:nth-of-type(5) label:nth-of-type(3),
body:has(div:nth-of-type(4) label:nth-of-type(4) input:checked) div:nth-of-type(5) label:nth-of-type(4),
body:has(div:nth-of-type(4) label:nth-of-type(5) input:checked) div:nth-of-type(5) label:nth-of-type(5) {
  display: inline-block;

  &::after {
    content: " - Omlaag";
  }
}



/* F360 */
body:has(div:nth-of-type(5) label:nth-of-type(1) input:checked) div:nth-of-type(4) label:nth-of-type(1),
body:has(div:nth-of-type(5) label:nth-of-type(2) input:checked) div:nth-of-type(4) label:nth-of-type(2),
body:has(div:nth-of-type(5) label:nth-of-type(3) input:checked) div:nth-of-type(4) label:nth-of-type(3),
body:has(div:nth-of-type(5) label:nth-of-type(4) input:checked) div:nth-of-type(4) label:nth-of-type(4),
body:has(div:nth-of-type(5) label:nth-of-type(5) input:checked) div:nth-of-type(4) label:nth-of-type(5) {
  display: inline-block;

  &::after {
    content: " - Omhoog";
  }
}

body:has(div:nth-of-type(1) label:nth-of-type(1) input:checked) div:nth-of-type(1) label:nth-of-type(5),
body:has(div:nth-of-type(1) label:nth-of-type(5) input:checked) div:nth-of-type(1) label:nth-of-type(1),

body:has(div:nth-of-type(5) label:nth-of-type(1) input:checked) div:nth-of-type(1) label:nth-of-type(1),
body:has(div:nth-of-type(5) label:nth-of-type(2) input:checked) div:nth-of-type(1) label:nth-of-type(2),
body:has(div:nth-of-type(5) label:nth-of-type(3) input:checked) div:nth-of-type(1) label:nth-of-type(3),
body:has(div:nth-of-type(5) label:nth-of-type(4) input:checked) div:nth-of-type(1) label:nth-of-type(4),
body:has(div:nth-of-type(5) label:nth-of-type(5) input:checked) div:nth-of-type(1) label:nth-of-type(5) {
  display: inline-block;

  &::after {
    content: " - Resetten";
  }
}

/* 270 links zetten en 0 rechts zetten */
div:nth-of-type(1):has(label:nth-of-type(5) input:checked) label:nth-of-type(4) {
  order: 0;
}

div:nth-of-type(1):has(label:nth-of-type(5) input:checked) label:nth-of-type(1) {
  order: 1;
}

















/* Alle code voor de blokjes bovenin */
scene:first-of-type {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  perspective: 50em;
  transform-style: preserve-3d;

  cube {
    width: 4em;
    height: 4em;
    transform-style: preserve-3d;
    animation: floatAndDrift 12s ease-in-out infinite alternate;
    transition: width 0.5s ease, height 0.5s ease, transform 0.5s ease;
    @media (max-width: 600px) {
      width: 2.5em;
      height: 2.5em;
      block {
        transform: scale(0.8)
      }
    }
  }

  cube:nth-of-type(1) {
    animation-delay: -0s;

    block>face {
      background: if(media(prefers-color-scheme: dark): var(--dark-front-color);
          else: var(--front-color));
    }
  }

  cube:nth-of-type(2) {
    animation-delay: -0.5s;

    block>face {
      background: if(media(prefers-color-scheme: dark): var(--dark-back-color);
          else: var(--back-color));
    }
  }

  cube:nth-of-type(3) {
    animation-delay: -1s;

    block>face {
      background: if(media(prefers-color-scheme: dark): var(--dark-left-color);
          else: var(--left-color));
    }
  }

  cube:nth-of-type(4) {
    animation-delay: -1.5s;

    block>face {
      background: if(media(prefers-color-scheme: dark): var(--dark-right-color);
          else: var(--right-color));
    }
  }

  cube:nth-of-type(5) {
    animation-delay: -2s;

    block>face {
      background: if(media(prefers-color-scheme: dark): var(--dark-top-color);
          else: var(--top-color));
    }
  }

  cube:nth-of-type(6) {
    animation-delay: -2.5s;

    block>face {
      background: if(media(prefers-color-scheme: dark): var(--dark-bottom-color);
          else: var(--bottom-color));
    }
  }

  block>face {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: if(media(prefers-color-scheme: dark): var(--bright-color);
        else: var(--black-color);
      );
    backface-visibility: hidden;

    p {
      font-family: Thuner, sans-serif;
      font-size: 2.4em;
    }
  }


}



/* Rotates cube on X and Y axes */
/* Ik heb ChatGPT gebruikt om deze animaties werkend te maken bij elkaar, ik had eerst 2 verschillende animaties, verder heeft Chat ook de delay erin gezet */
@keyframes floatAndDrift {
  0% {
    transform: rotateX(0deg) rotateY(0deg) translateY(0px) translateX(0px);
  }

  25% {
    transform: rotateX(3deg) rotateY(15deg) translateY(-2px) translateX(1px);
  }

  50% {
    transform: rotateX(0deg) rotateY(0deg) translateY(0px) translateX(-1px);
  }

  75% {
    transform: rotateX(-3deg) rotateY(-15deg) translateY(2px) translateX(0.5px);
  }

  100% {
    transform: rotateX(0deg) rotateY(0deg) translateY(0px) translateX(0px);
  }
}










scene:last-of-type face::before {
  text-align: center;
  font-size: 3em;
  opacity:0.5;
}

scene:last-of-type cube face:nth-child(1)::before {
  content: if(media(prefers-color-scheme: dark): "🍓";
      else: ""
    );
}

scene:last-of-type cube face:nth-child(2)::before {
  content: if(media(prefers-color-scheme: dark): "🍊";
      else: ""
    );
}

scene:last-of-type cube face:nth-child(3)::before {
  content: if(media(prefers-color-scheme: dark): "🍏";
      else: ""
    );
}

scene:last-of-type cube face:nth-child(4)::before {
  content: if(media(prefers-color-scheme: dark): "🫐";
      else: ""
    );
}

scene:last-of-type cube face:nth-child(5)::before {
  content: if(media(prefers-color-scheme: dark): "🍋";
      else: ""
    );
}

scene:last-of-type cube face:nth-child(6)::before {
  content: if(media(prefers-color-scheme: dark): "🥥";
      else: ""
    );
}