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

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

body {
  margin: 0;
  background-color: #b4ddf0;
  background-image: linear-gradient(#90d5ec, #b4ddf0);
}

header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  color: white;
}

li {
  list-style-type: none;
}

label {
  cursor: pointer;
}

span:hover {
  color: rgb(0, 0, 0);
  transition: 0.3s;
}

nav ul {
  display: flex;
  justify-content: center;
}

nav ul li {
  position: relative;
  list-style-type: none;
}

nav ul li span {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-weight: bold;
  cursor: pointer;
  font-family: "Concert One", cursive;
  font-size: 2rem;
}

nav ul input {
  position: absolute;
  opacity: 0.3;
  visibility: hidden;
}

section {
  width: 100vw;
  height: 100vh;
  position: relative;
}

section:nth-child(1) {
  /* Zonsondergang */
  background: linear-gradient(#bf5464, #c15b69, #d2777b, #f7b2a2, #f5b0a1);
}

section:nth-child(2) {
  /* Daglicht */
  background: linear-gradient(#b4ddf0, #9cc7db, #8cc8e4);
}

section:nth-child(3) {
  /* nacht */
  background: linear-gradient(
    #01162e,
    #001d37,
    #002746,
    #013155,
    #003a63,
    #01426d
  );
}

section:nth-of-type(1) > div:nth-of-type(1) {
  position: absolute;
  width: 100vw;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(#30152e 10%, #358335 100%);
  height: 30%;
  z-index: 1;
}

section:nth-of-type(2) > div:nth-of-type(1) {
  position: absolute;
  width: 100vw;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(#0c310a 20%, #358335 100%);
  height: 30%;
  z-index: 1;
}

section:nth-of-type(3) > div:nth-of-type(1) {
  position: absolute;
  width: 100vw;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(#011600 10%, #022b01 100%);
  height: 30%;
  z-index: 1;
}

body:has(input[value="home"]:checked) main {
  transform: translateX(-100vw);
}

body:has(input[value="links"]:checked) main {
  transform: translateX(0);
}

body:has(input[value="rechts"]:checked) main {
  transform: translateX(-200vw);
}

main {
  width: 300vw;
  display: flex;
  transition: 1s ease-in-out;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!! Sectie 1 bergen !!!!!!!!!!!!!!!! 
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
main ul {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  height: 70%;

  background-color: transparent;
}

main li {
  position: relative;
  width: 100%;
  height: 100%;
}

main li figure {
  position: absolute;
  width: var(--width, 10em);
  /* height:var(--height, 10em); */
  aspect-ratio: var(--aspect, 1.5);

  left: var(--left, 0);
  z-index: var(--z-index, 0);
  bottom: var(--bottom, 0);
}

main li figure > div {
  position: absolute;
  inset: 0;
}

main li figure > div:nth-of-type(1) {
  /*Berg*/
  background-color: var(--clr-sun, lightgreen);

  clip-path: polygon(
    var(--point, 50%) 0%,
    var(--shade, 50%) 100%,
    0% 100%,
    var(--point, 50%) 0%
  );
}

main li figure > div:nth-of-type(2) {
  /*schaduw*/
  background-color: var(--clr-shade, green);

  clip-path: polygon(
    var(--point, 50%) 0%,
    var(--shade, 50%) 100%,
    100% 100%,
    var(--point, 50%) 0%
  );
}

/* snow */
main ul div div {
  position: absolute;
  width: 100%;
  height: var(--snow, 40%);
}

main ul div div {
  clip-path: polygon(
    36% 100%,
    26% 70%,
    10% 100%,
    0 67%,
    0% 0%,
    100% 0%,
    100% 66%,
    86% 89%,
    79% 56%,
    68% 100%,
    59% 72%,
    45% 68%
  );
}

main ul div:nth-of-type(1) div {
  background-color: var(--snw-sun, #fff);
}

main ul div:nth-of-type(2) div {
  background-color: var(--snw-shade, #ccd);
}

/*************/
/* DE BERGEN */
/*************/

section:nth-of-type(1) li:nth-of-type(1) figure {
  --width: 140%;
  --aspect: 1;

  --shade: 70%;
  --point: 40%;

  --snow: 40%;

  --clr-sun: #ef7ea2;
  --clr-shade: #b979b0;

  --snw-sun: transparent;
  --snw-shade: transparent;

  --left: -3vw;
  --bottom: -1vh;
}

section:nth-of-type(1) li:nth-of-type(2) figure {
  --width: 310%;
  --aspect: 0.9;

  --shade: 70%;
  --point: 60%;

  --snow: 40%;

  --clr-sun: #65618e;
  --clr-shade: #494b72;

  --snw-sun: #fecfdf;
  --snw-shade: #7e80a9;

  --left: -8vw;
  --bottom: -2vh;

  --z-index: 3;
}

section:nth-of-type(1) li:nth-of-type(3) figure {
  --width: 300%;
  --aspect: 1.1;

  --shade: 70%;
  --point: 10%;

  --snow: 50%;

  --clr-sun: #7974af;
  --clr-shade: #494b72;

  --snw-sun: #fecfdf;
  --snw-shade: #7e80a9;

  --left: 2vw;
  --z-index: 1;
  --bottom: -1vh;
}

section:nth-of-type(1) li:nth-of-type(4) figure {
  --width: 300%;
  --aspect: 1;

  --shade: 70%;
  --point: 80%;

  --snow: 40%;

  --clr-sun: #6f6b9e;
  --clr-shade: #494b72;

  --snw-sun: #fecfdf;
  --snw-shade: #7e80a9;

  --left: -2vw;
  --bottom: -1vh;
  --z-index: 2;
}

section:nth-of-type(1) li:nth-of-type(5) figure {
  --width: 200%;
  --aspect: 1;

  --shade: 70%;
  --point: 20%;

  --snow: 40%;

  --clr-sun: #7974af;
  --clr-shade: #494b72;

  --snw-sun: #fecfdf;
  --snw-shade: #7e80a9;

  --left: -2vw;
  --bottom: -1.5vh;
  --z-index: 3;
}

section:nth-of-type(1) li:nth-of-type(6) figure {
  --width: 200%;
  --aspect: 0.8;

  --shade: 67%;
  --point: 100%;

  --snow: 40%;

  --clr-sun: #6f69ac;
  --clr-shade: #494b72;

  --snw-sun: #fecfdf;
  --snw-shade: #7e80a9;

  --left: 2vw;
  --bottom: -1vh;
  --z-index: 2;
}

section:nth-of-type(1) li:nth-of-type(7) figure {
  --width: 200%;
  --aspect: 1.2;

  --shade: 67%;
  --point: 30%;

  --snow: 40%;

  --clr-sun: #9793c4;
  --clr-shade: #797cad;

  --snw-sun: #fecfdf;
  --snw-shade: #7e80a9;

  --left: -6vw;
  --bottom: -1vh;
  --z-index: 1;
}

section:nth-of-type(1) li:nth-of-type(8) figure {
  --width: 400%;
  --aspect: 1;

  --shade: 75%;
  --point: 10%;

  --snow: 60%;

  --clr-sun: #7974af;
  --clr-shade: #494b72;

  --snw-sun: #fecfdf;
  --snw-shade: #7e80a9;

  --left: -2vw;
  --bottom: -1.3vh;
  --z-index: 0;
}

section:nth-of-type(1) li:nth-of-type(8) figure {
  --width: 400%;
  --aspect: 1.2;

  --shade: 75%;
  --point: 10%;

  --snow: 60%;

  --clr-sun: #7974af;
  --clr-shade: #494b72;

  --snw-sun: #fecfdf;
  --snw-shade: #7e80a9;

  --left: -2vw;
  --bottom: 0vh;
  --z-index: 1;
}

section:nth-of-type(1) li:nth-of-type(9) figure {
  --width: 300%;
  --aspect: 1.1;

  --shade: 30%;
  --point: 50%;

  --snow: 30%;

  --clr-sun: #6f69ac;
  --clr-shade: #494b72;

  --snw-sun: #fecfdf;
  --snw-shade: #7e80a9;

  --left: -2vw;
  --bottom: -0.5vh;
  --z-index: 1;
}

section:nth-of-type(1) li:nth-of-type(10) figure {
  --width: 200%;
  --aspect: 1.5;

  --shade: 80%;
  --point: 40%;

  --clr-sun: #6f69ac;
  --clr-shade: #494b72;

  --snw-sun: transparent;
  --snw-shade: transparent;

  --left: 1vw;
  --bottom: -1.5vh;
  --z-index: 4;
}

section:nth-of-type(1) li:nth-of-type(11) figure {
  --width: 300%;
  --aspect: 1.2;

  --shade: 30%;
  --point: 20%;

  --snow: 50%;

  --clr-sun: #6f69ac;
  --clr-shade: #494b72;

  --snw-sun: #fecfdf;
  --snw-shade: #7e80a9;

  --left: 4vw;
  --bottom: -1vh;
  --z-index: 3;
}

section:nth-of-type(1) li:nth-of-type(12) figure {
  --width: 200%;
  --aspect: 1.5;

  --shade: 80%;
  --point: 60%;

  --clr-sun: #9793c4;
  --clr-shade: #797cad;

  --snw-sun: #fecfdf;
  --snw-shade: #7e80a9;

  --left: -11vw;
  --bottom: -1vh;
  --z-index: 1;
}

section:nth-of-type(1) li:nth-of-type(13) figure {
  --width: 300%;
  --aspect: 0.9;

  --shade: 40%;
  --point: 30%;

  --snow: 60%;

  --clr-sun: #6f69ac;
  --clr-shade: #494b72;

  --snw-sun: #fecfdf;
  --snw-shade: #7e80a9;

  --left: 0vw;
  --bottom: -1.5vh;
  --z-index: 3;
}

section:nth-of-type(1) li:nth-of-type(14) figure {
  --width: 300%;
  --aspect: 1.3;

  --shade: 80%;
  --point: 90%;

  --snow: 60%;

  --clr-sun: #7974af;
  --clr-shade: #505281;

  --snw-sun: #fecfdf;
  --snw-shade: #7e80a9;

  --left: -6.5vw;
  --bottom: -1.5vh;
  --z-index: 1;
}

section:nth-of-type(1) li:nth-of-type(15) figure {
  visibility: hidden;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!! Sectie 2 bergen !!!!!!!!!!!!!!!! 
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

section:nth-of-type(2) li:nth-of-type(1) figure {
  --width: 140%;
  --aspect: 1;

  --shade: 70%;
  --point: 40%;

  --snow: 40%;

  --clr-sun: #68f193;
  --clr-shade: #40945c;

  --snw-sun: #dddddd;
  --snw-shade: #cccccc;

  --left: -1vw;
  --bottom: -1vh;
}

section:nth-of-type(2) li:nth-of-type(2) figure {
  --width: 310%;
  --aspect: 0.9;

  --shade: 70%;
  --point: 40%;

  --snow: 40%;

  --clr-sun: #68f193;
  --clr-shade: #40945c;

  --snw-sun: #dddddd;
  --snw-shade: #cccccc;

  --left: -5vw;
  --bottom: -2vh;

  --z-index: 3;
}

section:nth-of-type(2) li:nth-of-type(3) figure {
  --width: 300%;
  --aspect: 1.1;

  --shade: 70%;
  --point: 10%;

  --snow: 50%;

  --clr-sun: #3da75d;
  --clr-shade: #357639;

  --snw-sun: #dddddd;
  --snw-shade: #cccccc;

  --left: 2vw;
  --z-index: 1;
  --bottom: -1vh;
}

section:nth-of-type(2) li:nth-of-type(4) figure {
  --width: 300%;
  --aspect: 1;

  --shade: 70%;
  --point: 80%;

  --snow: 40%;

  --clr-sun: #1b8f3e;
  --clr-shade: #1f4b22;

  --snw-sun: #dddddd;
  --snw-shade: #cccccc;

  --left: -2vw;
  --bottom: -1vh;
  --z-index: 2;
}

section:nth-of-type(2) li:nth-of-type(5) figure {
  --width: 200%;
  --aspect: 1;

  --shade: 70%;
  --point: 20%;

  --snow: 40%;

  --clr-sun: #3da75d;
  --clr-shade: #357639;

  --snw-sun: #dddddd;
  --snw-shade: #cccccc;

  --left: -2vw;
  --bottom: -1.5vh;
  --z-index: 3;
}

section:nth-of-type(2) li:nth-of-type(6) figure {
  --width: 200%;
  --aspect: 0.8;

  --shade: 67%;
  --point: 100%;

  --snow: 40%;

  --clr-sun: #1b8f3e;
  --clr-shade: #1f4b22;

  --snw-sun: #dddddd;
  --snw-shade: #cccccc;

  --left: 2vw;
  --bottom: -1vh;
  --z-index: 2;
}

section:nth-of-type(2) li:nth-of-type(7) figure {
  --width: 200%;
  --aspect: 1.2;

  --shade: 67%;
  --point: 30%;

  --snow: 40%;

  --clr-sun: #68f193;
  --clr-shade: #40945c;

  --snw-sun: #dddddd;
  --snw-shade: #cccccc;

  --left: -6vw;
  --bottom: -1vh;
  --z-index: 1;
}

section:nth-of-type(2) li:nth-of-type(8) figure {
  --width: 400%;
  --aspect: 1;

  --shade: 75%;
  --point: 10%;

  --snow: 60%;

  --clr-sun: #3da75d;
  --clr-shade: #357639;

  --snw-sun: #dddddd;
  --snw-shade: #cccccc;

  --left: -2vw;
  --bottom: -1.3vh;
  --z-index: 0;
}

section:nth-of-type(2) li:nth-of-type(8) figure {
  --width: 400%;
  --aspect: 1.2;

  --shade: 75%;
  --point: 10%;

  --snow: 60%;

  --clr-sun: #3da75d;
  --clr-shade: #357639;

  --snw-sun: #dddddd;
  --snw-shade: #cccccc;

  --left: -2vw;
  --bottom: 0vh;
  --z-index: 0;
}

section:nth-of-type(2) li:nth-of-type(9) figure {
  --width: 300%;
  --aspect: 1.1;

  --shade: 30%;
  --point: 50%;

  --snow: 30%;

  --clr-sun: #1b8f3e;
  --clr-shade: #1f4b22;

  --snw-sun: #dddddd;
  --snw-shade: #cccccc;

  --left: -2vw;
  --bottom: -0.5vh;
  --z-index: 0;
}

section:nth-of-type(2) li:nth-of-type(10) figure {
  --width: 200%;
  --aspect: 1.5;

  --shade: 80%;
  --point: 40%;

  --clr-sun: #158136;
  --clr-shade: #113013;

  --snw-sun: transparent;
  --snw-shade: transparent;

  --left: 1vw;
  --bottom: -1.5vh;
  --z-index: 4;
}

section:nth-of-type(2) li:nth-of-type(11) figure {
  --width: 300%;
  --aspect: 1.2;

  --shade: 30%;
  --point: 20%;

  --snow: 50%;

  --clr-sun: #168537;
  --clr-shade: #1a471d;

  --snw-sun: #dddddd;
  --snw-shade: #cccccc;

  --left: 4vw;
  --bottom: -1vh;
  --z-index: 3;
}

section:nth-of-type(2) li:nth-of-type(12) figure {
  --width: 200%;
  --aspect: 1.5;

  --shade: 80%;
  --point: 60%;

  --clr-sun: #1c923f;
  --clr-shade: #1e5c23;

  --snw-sun: #dddddd;
  --snw-shade: #cccccc;

  --left: -11vw;
  --bottom: -1vh;
  --z-index: 1;
}

section:nth-of-type(2) li:nth-of-type(13) figure {
  --width: 300%;
  --aspect: 0.9;

  --shade: 40%;
  --point: 30%;

  --snow: 60%;

  --clr-sun: #21a348;
  --clr-shade: #216d27;

  --snw-sun: #dddddd;
  --snw-shade: #cccccc;

  --left: 0vw;
  --bottom: -1.5vh;
  --z-index: 3;
}

section:nth-of-type(2) li:nth-of-type(14) figure {
  --width: 300%;
  --aspect: 1.3;

  --shade: 80%;
  --point: 90%;

  --snow: 60%;

  --clr-sun: #148837;
  --clr-shade: #134d18;

  --snw-sun: #dddddd;
  --snw-shade: #cccccc;

  --left: -6.5vw;
  --bottom: -1.5vh;
  --z-index: 1;
}

section:nth-of-type(2) li:nth-of-type(15) figure {
  visibility: hidden;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!! Sectie 3 bergen !!!!!!!!!!!!!!!! 
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

section:nth-of-type(3) li:nth-of-type(1) figure {
  --width: 140%;
  --aspect: 1;

  --shade: 70%;
  --point: 0%;

  --snow: 40%;

  --clr-sun: #022a49;
  --clr-shade: #021627;

  --snw-sun: transparent;
  --snw-shade: transparent;

  --left: 0vw;
  --bottom: -1vh;
}

section:nth-of-type(3) li:nth-of-type(2) figure {
  --width: 310%;
  --aspect: 0.9;

  --shade: 70%;
  --point: 30%;

  --snow: 40%;

  --clr-sun: #022a49;
  --clr-shade: #021627;

  --snw-sun: #117cbb;
  --snw-shade: #012241;

  --left: -5vw;
  --bottom: -2vh;

  --z-index: 3;
}

section:nth-of-type(3) li:nth-of-type(3) figure {
  --width: 300%;
  --aspect: 1.1;

  --shade: 70%;
  --point: 10%;

  --snow: 50%;

  --clr-sun: #022a49;
  --clr-shade: #021627;

  --snw-sun: #117cbb;
  --snw-shade: #012241;

  --left: 2vw;
  --z-index: 1;
  --bottom: -1vh;
}

section:nth-of-type(3) li:nth-of-type(4) figure {
  --width: 300%;
  --aspect: 1;

  --shade: 70%;
  --point: 80%;

  --snow: 40%;

  --clr-sun: #022a49;
  --clr-shade: #021627;

  --snw-sun: #117cbb;
  --snw-shade: #012241;

  --left: -2vw;
  --bottom: -1vh;
  --z-index: 2;
}

section:nth-of-type(3) li:nth-of-type(5) figure {
  --width: 200%;
  --aspect: 1;

  --shade: 70%;
  --point: 20%;

  --snow: 40%;

  --clr-sun: #022a49;
  --clr-shade: #021627;

  --snw-sun: #117cbb;
  --snw-shade: #012241;

  --left: -2vw;
  --bottom: -1.5vh;
  --z-index: 3;
}

section:nth-of-type(3) li:nth-of-type(6) figure {
  --width: 200%;
  --aspect: 0.8;

  --shade: 67%;
  --point: 100%;

  --snow: 40%;

  --clr-sun: #022a49;
  --clr-shade: #021627;

  --snw-sun: #117cbb;
  --snw-shade: #012241;

  --left: 2vw;
  --bottom: -1vh;
  --z-index: 2;
}

section:nth-of-type(3) li:nth-of-type(7) figure {
  --width: 200%;
  --aspect: 1.2;

  --shade: 67%;
  --point: 30%;

  --snow: 40%;

  --clr-sun: #022a49;
  --clr-shade: #021627;

  --snw-sun: #117cbb;
  --snw-shade: #012241;

  --left: -6vw;
  --bottom: -1vh;
  --z-index: 1;
}

section:nth-of-type(3) li:nth-of-type(8) figure {
  --width: 400%;
  --aspect: 1;

  --shade: 75%;
  --point: 10%;

  --snow: 60%;

  --clr-sun: #022a49;
  --clr-shade: #021627;

  --snw-sun: #117cbb;
  --snw-shade: #012241;

  --left: -2vw;
  --bottom: -1.3vh;
  --z-index: 0;
}

section:nth-of-type(3) li:nth-of-type(8) figure {
  --width: 400%;
  --aspect: 1.2;

  --shade: 75%;
  --point: 10%;

  --snow: 60%;

  --clr-sun: #022a49;
  --clr-shade: #021627;

  --snw-sun: #117cbb;
  --snw-shade: #012241;

  --left: -2vw;
  --bottom: 0vh;
  --z-index: 0;
}

section:nth-of-type(3) li:nth-of-type(9) figure {
  --width: 300%;
  --aspect: 1.1;

  --shade: 30%;
  --point: 50%;

  --snow: 30%;

  --clr-sun: #022a49;
  --clr-shade: #021627;

  --snw-sun: #117cbb;
  --snw-shade: #012241;

  --left: -2vw;
  --bottom: -0.5vh;
  --z-index: 0;
}

section:nth-of-type(3) li:nth-of-type(10) figure {
  --width: 200%;
  --aspect: 1.5;

  --shade: 80%;
  --point: 40%;

  --clr-sun: #022a49;
  --clr-shade: #021627;

  --snw-sun: #117cbb;
  --snw-shade: #012241;

  --left: 1vw;
  --bottom: -1.5vh;
  --z-index: 4;
}

section:nth-of-type(3) li:nth-of-type(11) figure {
  --width: 300%;
  --aspect: 1.2;

  --shade: 30%;
  --point: 20%;

  --snow: 50%;

  --clr-sun: #022a49;
  --clr-shade: #021627;

  --snw-sun: #117cbb;
  --snw-shade: #012241;

  --left: 4vw;
  --bottom: -1vh;
  --z-index: 3;
}

section:nth-of-type(3) li:nth-of-type(12) figure {
  --width: 200%;
  --aspect: 1.5;

  --shade: 80%;
  --point: 60%;

  --clr-sun: #022a49;
  --clr-shade: #021627;

  --snw-sun: #117cbb;
  --snw-shade: #012241;

  --left: -11vw;
  --bottom: -1vh;
  --z-index: 1;
}

section:nth-of-type(3) li:nth-of-type(13) figure {
  --width: 300%;
  --aspect: 0.9;

  --shade: 40%;
  --point: 30%;

  --snow: 60%;

  --clr-sun: #022a49;
  --clr-shade: #021627;

  --snw-sun: #117cbb;
  --snw-shade: #012241;
  --left: 0vw;
  --bottom: -1.5vh;
  --z-index: 3;
}

section:nth-of-type(3) li:nth-of-type(14) figure {
  --width: 300%;
  --aspect: 1.3;

  --shade: 80%;
  --point: 90%;

  --snow: 60%;

  --clr-sun: #022a49;
  --clr-shade: #021627;

  --snw-sun: #117cbb;
  --snw-shade: #012241;
  --left: -6.5vw;
  --bottom: -1.5vh;
  --z-index: 1;
}

section:nth-of-type(3) li:nth-of-type(15) figure {
  visibility: hidden;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!MEDIA QUERIES !!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

@media only screen and (max-width: 1200px) {
  section:nth-of-type(1) li:nth-of-type(3),
  section:nth-of-type(1) li:nth-of-type(13),
  section:nth-of-type(1) li:nth-of-type(11) {
    display: none;
  }
  section:nth-of-type(1) li:nth-of-type(14) {
    left: -2vw;
  }

  section:nth-of-type(1) li:nth-of-type(3),
  section:nth-of-type(1) li:nth-of-type(13),
  section:nth-of-type(1) li:nth-of-type(11) {
    display: none;
  }
  section:nth-of-type(1) li:nth-of-type(14) {
    left: -2vw;
  }
}

@media only screen and (max-width: 800px) {
  section:nth-of-type(1) li:nth-of-type(1),
  section:nth-of-type(1) li:nth-of-type(3),
  section:nth-of-type(1) li:nth-of-type(8),
  section:nth-of-type(1) li:nth-of-type(11) {
    display: none;
  }
  section:nth-of-type(1) li:nth-of-type(2),
  section:nth-of-type(1) li:nth-of-type(4),
  section:nth-of-type(1) li:nth-of-type(5),
  section:nth-of-type(1) li:nth-of-type(13) {
    width: 150%;
  }
  section:nth-of-type(1) li:nth-of-type(5) {
    z-index: 2;
  }
  section:nth-of-type(1) li:nth-of-type(14) {
    left: -2vw;
  }

  section:nth-of-type(2) li:nth-of-type(1),
  section:nth-of-type(2) li:nth-of-type(3),
  section:nth-of-type(2) li:nth-of-type(8),
  section:nth-of-type(2) li:nth-of-type(11) {
    display: none;
  }
  section:nth-of-type(2) li:nth-of-type(2),
  section:nth-of-type(2) li:nth-of-type(4),
  section:nth-of-type(2) li:nth-of-type(5),
  section:nth-of-type(2) li:nth-of-type(13) {
    width: 150%;
  }
  section:nth-of-type(2) li:nth-of-type(5) {
    z-index: 2;
  }
  section:nth-of-type(2) li:nth-of-type(14) {
    left: -2vw;
  }
  section:nth-of-type(2) li:nth-of-type(2) {
    left: 5vw;
  }
  section:nth-of-type(2) li:nth-of-type(13) {
    left: -10vw;
  }

  section:nth-of-type(3) li:nth-of-type(1),
  section:nth-of-type(3) li:nth-of-type(3),
  section:nth-of-type(3) li:nth-of-type(8),
  section:nth-of-type(3) li:nth-of-type(11) {
    display: none;
  }
  section:nth-of-type(3) li:nth-of-type(2),
  section:nth-of-type(3) li:nth-of-type(4),
  section:nth-of-type(3) li:nth-of-type(5),
  section:nth-of-type(3) li:nth-of-type(13) {
    width: 150%;
  }
  section:nth-of-type(3) li:nth-of-type(5) {
    z-index: 2;
  }
  section:nth-of-type(3) li:nth-of-type(14) {
    left: -2vw;
  }
  section:nth-of-type(3) li:nth-of-type(2) {
    left: 5vw;
  }
  section:nth-of-type(3) li:nth-of-type(13) {
    left: -10vw;
  }
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!! Zonnen, maan!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

section:nth-of-type(1) > div:nth-of-type(2) {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    #fef200,
    #fde404,
    #fbb80f,
    #f58020,
    #ee5f0a,
    #ee5f0a
  );
  position: absolute;
  top: 45%;
  left: 35%;
  box-shadow: 0 0 50px #fbb80f;
  z-index: 0;
}

@media only screen and (max-width: 800px) {
  section:nth-of-type(1) > div:nth-of-type(2) {
    top: 55%;
    width: 150px;
    height: 150px;
  }
}

section:nth-of-type(2) > div:nth-of-type(2) {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(#fef200, #fef200, #fde404);
  position: absolute;
  top: 10%;
  left: 25%;
  box-shadow: 0 0 50px #fef200;
}

section:nth-of-type(3) > div:nth-of-type(2) {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(#f5efe3, #ebe2d9);
  position: absolute;
  top: 10%;
  left: 25%;
  box-shadow: 0 0 50px #ccc;
}

section:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e6ddd4;
  top: 25%;
  left: 20%;
}

section:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) {
  position: absolute;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: #e6ddd4;
  top: 25%;
  left: 60%;
}

section:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(3) {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #d8d2cb;
  top: 57%;
  left: 32%;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  !!!!!!!!!!!!! Vuurwerk sectie 3 !!!!!!!
  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/* Bron: https://codepen.io/MinzCode/pen/abmwmOG */

section:nth-of-type(1) label {
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 999;
  padding: 10px 30px 10px 30px;
  background-color: white;
  color: black;
  border-radius: 10px;
  box-shadow: #777b7e 3px 3px 3px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  transition: 0.3s ease;
}

section:nth-of-type(1) label:nth-of-type(2) {
  padding: 10px 59px 10px 59px;
}

section:nth-of-type(1) label:hover {
  background-color: rgb(133, 125, 125);
  transition: 0.3s ease;
  color: rgb(37, 36, 36);
}

input[type="checkbox"] {
  display: none;
}

section:nth-of-type(1) input[type="checkbox"] {
  position: relative;
  top: 10%;
  z-index: 999;
}

section:nth-of-type(1) > ul:nth-of-type(2) li {
  position: relative;
  width: 20px;
  height: 100px;
  position: absolute;
  bottom: 80%;
  left: 25%;
  transition: transform 1s;
  z-index: 5;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(2) {
  left: 30%;
  bottom: 60%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(3) {
  left: 32%;
  bottom: 65%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(4) {
  left: 36%;
  bottom: 58%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(5) {
  left: 39%;
  bottom: 63%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(6) {
  left: 42%;
  bottom: 70%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(7) {
  left: 45%;
  bottom: 61%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(8) {
  left: 48%;
  bottom: 66%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(9) {
  left: 52%;
  bottom: 62%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(10) {
  left: 56%;
  bottom: 69%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(11) {
  left: 58%;
  bottom: 75%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(12) {
  left: 59%;
  bottom: 62%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(13) {
  left: 61%;
  bottom: 85%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(14) {
  left: 63%;
  bottom: 72%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(15) {
  left: 67%;
  bottom: 62%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(16) {
  left: 68%;
  bottom: 72%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(17) {
  left: 69%;
  bottom: 65%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(18) {
  left: 71%;
  bottom: 75%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(19) {
  left: 72%;
  bottom: 70%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(20) {
  left: 73%;
  bottom: 60%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(21) {
  left: 75%;
  bottom: 65%;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(22) {
  left: 77%;
  bottom: 70%;
}

/* Stijlen pijlen */

/* Top element */

section:nth-of-type(1) > ul:nth-of-type(2) li div:nth-of-type(1) {
  position: absolute;
  width: 30px;
  height: var(--kopheight, 15px);
  background-color: var(--kopkleur, red);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  right: 0px;
  z-index: 10;
  transform: scaleX(0.5);
}

/* stok element */

section:nth-of-type(1) > ul:nth-of-type(2) li div:nth-of-type(2) {
  position: absolute;
  width: var(--stokwidth, 10px);
  height: var(--stokheight, 60px);
  background: repeating-linear-gradient(
    45deg,
    var(--stokgradientkleur1, #ffffff),
    var(--stokgradientkleur1, #ffffff) 10px,
    var(--stokgradientkleur2, #ff0000) 10px,
    var(--stokgradientkleur2, #ff0000) 20px
  );
  top: 14px;
  border-radius: 2px;
}

/* Stijlen pijlen individueel */

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(2) {
  --stokheight: 40px;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(3),
section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(7),
section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(11),
section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(14) {
  --stokheight: 50px;
  --kopkleur: yellow;
  --stokgradientkleur1: black;
  --stokgradientkleur2: green;
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(5),
section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(22),
section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(18),
section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(16) {
  --stokheight: 50px;
  --kopkleur: rgb(255, 255, 255);
  --stokgradientkleur1: rgb(33, 4, 196);
  --stokgradientkleur2: rgb(0, 0, 0);
}

section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(6),
section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(12),
section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(15),
section:nth-of-type(1) > ul:nth-of-type(2) li:nth-of-type(19) {
  --stokheight: 50px;
  --kopkleur: rgb(255, 255, 255);
  --stokgradientkleur1: rgb(27, 97, 54);
  --stokgradientkleur2: rgb(0, 0, 0);
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(1) {
  transform: translate(3000%, -1500%);
  transition: transform 1s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(2) {
  transform: translateY(-1500%);
  transition: transform 1s ease 0.5s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(3) {
  transform: translate(5000%, -1500%);
  transition: transform 1s ease 1s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(4) {
  transform: translate(-5000%, -1500%);
  transition: transform 1s ease 1.3s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(5) {
  transform: translateY(-1500%);
  transition: transform 1s ease 1.6s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(6) {
  transform: translate(3000%, -1500%);
  transition: transform 1s ease 1.7s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(7) {
  transform: translateY(-1500%);
  transition: transform 1s ease 1.8s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(8) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.1s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(9) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.4s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(10) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.6s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(11) {
  transform: translate(3000%, -1500%);
  transition: transform 1s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(12) {
  transform: translateY(-1500%);
  transition: transform 1s ease 0.7s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(13) {
  transform: translate(5000%, -1500%);
  transition: transform 1s ease 0.8s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(14) {
  transform: translate(-5000%, -1500%);
  transition: transform 1s ease 0.3s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(15) {
  transform: translate(3000%, -1500%);
  transition: transform 1s ease 1.6s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(16) {
  transform: translate(3000%, -1500%);
  transition: transform 1s ease 1.5s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(17) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.2s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(18) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.3s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(19) {
  transform: translateY(-1500%);
  transition: transform 1s ease 0.9s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(20) {
  transform: translateY(-1500%);
  transition: transform 1s ease 1.3s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(21) {
  transform: translate(-5000%, -1500%);
  transition: transform 1s ease 2.4s;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li:nth-of-type(22) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.6s;
}

body:has(section:nth-of-type(1) #animate1:not(:checked))
  section:nth-of-type(1)
  > ul:nth-of-type(2)
  li {
  transition: transform 0s;
}

body:has(section:nth-of-type(1) #animate1:not(:checked))
  section:nth-of-type(1)
  label:nth-of-type(2) {
  display: none;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  label:nth-of-type(2) {
  display: flex;
}

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  label:nth-of-type(1) {
  display: none;
}

/* Explosie has selector */

body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > div:nth-of-type(3)
  > div::before,
body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > div:nth-of-type(4)
  > div::before,
body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > div:nth-of-type(5)
  > div::before,
body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > div:nth-of-type(6)
  > div::before,
body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > div:nth-of-type(7)
  > div::before,
body:has(section:nth-of-type(1) #animate1:checked)
  section:nth-of-type(1)
  > div:nth-of-type(8)
  > div::before {
  animation: explosion 2s ease-in-out 3;
  animation-delay: 3s;
}

/* Explosies */
@keyframes explosion {
  0% {
    top: 100%;
  }
  33%,
  100% {
    top: -50%;
  }
}

/* Explosie 1 */

section:nth-of-type(1) > div:nth-of-type(3) {
  position: absolute;
  top: 35%;
  left: 15%;
  transform: scale(0.8);
}
section:nth-of-type(1) > div:nth-of-type(3) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(1) > div:nth-of-type(3) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(3) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(3) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(3) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(3) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(3) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(3) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(3) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(3) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(3) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(3) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(3) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(1) > div:nth-of-type(3) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: red;
}

/* explosie 2 */

section:nth-of-type(1) > div:nth-of-type(4) {
  position: absolute;
  top: 50%;
  left: 25%;
  transform: scale(1.2);
  z-index: 2;
}
section:nth-of-type(1) > div:nth-of-type(4) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(1) > div:nth-of-type(4) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(4) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(4) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(4) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(4) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(4) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(4) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(4) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(4) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(4) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(4) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(4) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(1) > div:nth-of-type(4) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: blue;
}

/* explosie 3 */

section:nth-of-type(1) > div:nth-of-type(5) {
  position: absolute;
  top: 32%;
  left: 40%;
  transform: scale(1.4);
}
section:nth-of-type(1) > div:nth-of-type(5) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(1) > div:nth-of-type(5) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(5) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(5) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(5) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(5) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(5) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(5) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(5) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(5) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(5) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(5) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(5) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(1) > div:nth-of-type(5) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: rgb(248, 170, 183);
}

/* explosie 4 */

section:nth-of-type(1) > div:nth-of-type(6) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: scale(1.7);
  z-index: 1;
}
section:nth-of-type(1) > div:nth-of-type(6) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(1) > div:nth-of-type(6) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(6) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(6) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(6) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(6) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(6) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(6) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(6) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(6) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(6) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(6) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(6) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(1) > div:nth-of-type(6) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: orange;
}

/* explosie 5 */

section:nth-of-type(1) > div:nth-of-type(7) {
  position: absolute;
  top: 45%;
  left: 65%;
  transform: scale(1.4);
}
section:nth-of-type(1) > div:nth-of-type(7) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(1) > div:nth-of-type(7) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(7) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(7) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(7) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(7) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(7) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(7) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(7) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(7) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(7) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(7) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(7) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(1) > div:nth-of-type(7) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: green;
}

/* explosie 6 */

section:nth-of-type(1) > div:nth-of-type(8) {
  position: absolute;
  top: 48%;
  left: 80%;
  z-index: 2;
  transform: scale(1.6);
}
section:nth-of-type(1) > div:nth-of-type(8) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(1) > div:nth-of-type(8) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(8) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(8) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(8) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(8) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(8) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(8) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(8) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(8) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(8) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(8) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(1) > div:nth-of-type(8) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(1) > div:nth-of-type(8) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: purple;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!! Vuurwerk sectie 2 !!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
section:nth-of-type(2) label {
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 999;
  padding: 10px 30px 10px 30px;
  background-color: white;
  color: black;
  border-radius: 10px;
  box-shadow: #777b7e 3px 3px 3px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  transition: 0.3s ease;
}

section:nth-of-type(2) label:nth-of-type(2) {
  padding: 10px 59px 10px 59px;
}

section:nth-of-type(2) label:hover {
  background-color: rgb(133, 125, 125);
  transition: 0.3s ease;
  color: rgb(37, 36, 36);
}

input[type="checkbox"] {
  display: none;
}

section:nth-of-type(2) input[type="checkbox"] {
  position: relative;
  top: 10%;
  z-index: 999;
}

section:nth-of-type(2) > ul:nth-of-type(2) li {
  position: relative;
  width: 20px;
  height: 100px;
  position: absolute;
  bottom: 80%;
  left: 25%;
  transition: transform 1s;
  z-index: 5;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(2) {
  left: 30%;
  bottom: 60%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(3) {
  left: 32%;
  bottom: 65%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(4) {
  left: 36%;
  bottom: 58%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(5) {
  left: 39%;
  bottom: 63%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(6) {
  left: 42%;
  bottom: 70%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(7) {
  left: 45%;
  bottom: 61%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(8) {
  left: 48%;
  bottom: 66%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(9) {
  left: 52%;
  bottom: 62%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(10) {
  left: 56%;
  bottom: 69%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(11) {
  left: 58%;
  bottom: 75%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(12) {
  left: 59%;
  bottom: 62%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(13) {
  left: 61%;
  bottom: 85%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(14) {
  left: 63%;
  bottom: 72%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(15) {
  left: 67%;
  bottom: 62%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(16) {
  left: 68%;
  bottom: 72%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(17) {
  left: 69%;
  bottom: 65%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(18) {
  left: 71%;
  bottom: 75%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(19) {
  left: 72%;
  bottom: 70%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(20) {
  left: 73%;
  bottom: 60%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(21) {
  left: 75%;
  bottom: 65%;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(22) {
  left: 77%;
  bottom: 70%;
}

/* Stijlen pijlen */

/* Top element */

section:nth-of-type(2) > ul:nth-of-type(2) li div:nth-of-type(1) {
  position: absolute;
  width: 30px;
  height: var(--kopheight, 15px);
  background-color: var(--kopkleur, red);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  right: 0px;
  z-index: 10;
  transform: scaleX(0.5);
}

/* stok element */

section:nth-of-type(2) > ul:nth-of-type(2) li div:nth-of-type(2) {
  position: absolute;
  width: var(--stokwidth, 10px);
  height: var(--stokheight, 60px);
  background: repeating-linear-gradient(
    45deg,
    var(--stokgradientkleur1, #ffffff),
    var(--stokgradientkleur1, #ffffff) 10px,
    var(--stokgradientkleur2, #ff0000) 10px,
    var(--stokgradientkleur2, #ff0000) 20px
  );
  top: 14px;
  border-radius: 2px;
}

/* Stijlen pijlen individueel */

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(2) {
  --stokheight: 40px;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(3),
section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(7),
section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(11),
section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(14) {
  --stokheight: 50px;
  --kopkleur: yellow;
  --stokgradientkleur1: black;
  --stokgradientkleur2: green;
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(5),
section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(22),
section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(18),
section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(16) {
  --stokheight: 50px;
  --kopkleur: rgb(255, 255, 255);
  --stokgradientkleur1: rgb(33, 4, 196);
  --stokgradientkleur2: rgb(0, 0, 0);
}

section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(6),
section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(12),
section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(15),
section:nth-of-type(2) > ul:nth-of-type(2) li:nth-of-type(19) {
  --stokheight: 50px;
  --kopkleur: rgb(255, 255, 255);
  --stokgradientkleur1: rgb(27, 97, 54);
  --stokgradientkleur2: rgb(0, 0, 0);
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(1) {
  transform: translate(3000%, -1500%);
  transition: transform 1s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(2) {
  transform: translateY(-1500%);
  transition: transform 1s ease 0.5s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(3) {
  transform: translate(5000%, -1500%);
  transition: transform 1s ease 1s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(4) {
  transform: translate(-5000%, -1500%);
  transition: transform 1s ease 1.3s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(5) {
  transform: translateY(-1500%);
  transition: transform 1s ease 1.6s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(6) {
  transform: translate(3000%, -1500%);
  transition: transform 1s ease 1.7s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(7) {
  transform: translateY(-1500%);
  transition: transform 1s ease 1.8s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(8) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.1s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(9) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.4s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(10) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.6s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(11) {
  transform: translate(3000%, -1500%);
  transition: transform 1s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(12) {
  transform: translateY(-1500%);
  transition: transform 1s ease 0.7s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(13) {
  transform: translate(5000%, -1500%);
  transition: transform 1s ease 0.8s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(14) {
  transform: translate(-5000%, -1500%);
  transition: transform 1s ease 0.3s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(15) {
  transform: translate(3000%, -1500%);
  transition: transform 1s ease 1.6s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(16) {
  transform: translate(3000%, -1500%);
  transition: transform 1s ease 1.5s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(17) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.2s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(18) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.3s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(19) {
  transform: translateY(-1500%);
  transition: transform 1s ease 0.9s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(20) {
  transform: translateY(-1500%);
  transition: transform 1s ease 1.3s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(21) {
  transform: translate(-5000%, -1500%);
  transition: transform 1s ease 2.4s;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li:nth-of-type(22) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.6s;
}

body:has(section:nth-of-type(2) #animate:not(:checked))
  section:nth-of-type(2)
  > ul:nth-of-type(2)
  li {
  transition: transform 0s;
}

body:has(section:nth-of-type(2) #animate:not(:checked))
  section:nth-of-type(2)
  label:nth-of-type(2) {
  display: none;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  label:nth-of-type(2) {
  display: flex;
}

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  label:nth-of-type(1) {
  display: none;
}

/* Explosie has selector */

body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > div:nth-of-type(3)
  > div::before,
body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > div:nth-of-type(4)
  > div::before,
body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > div:nth-of-type(5)
  > div::before,
body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > div:nth-of-type(6)
  > div::before,
body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > div:nth-of-type(7)
  > div::before,
body:has(section:nth-of-type(2) #animate:checked)
  section:nth-of-type(2)
  > div:nth-of-type(8)
  > div::before {
  animation: explosion 2s ease-in-out 3;
  animation-delay: 3s;
}

/* Explosies */
@keyframes explosion {
  0% {
    top: 100%;
  }
  33%,
  100% {
    top: -50%;
  }
}

/* Explosie 1 */

section:nth-of-type(2) > div:nth-of-type(3) {
  position: absolute;
  top: 35%;
  left: 15%;
  transform: scale(0.8);
}
section:nth-of-type(2) > div:nth-of-type(3) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(2) > div:nth-of-type(3) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(3) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(3) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(3) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(3) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(3) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(3) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(3) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(3) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(3) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(3) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(3) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(2) > div:nth-of-type(3) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: red;
}

/* explosie 2 */

section:nth-of-type(2) > div:nth-of-type(4) {
  position: absolute;
  top: 50%;
  left: 25%;
  transform: scale(1.2);
  z-index: 2;
}
section:nth-of-type(2) > div:nth-of-type(4) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(2) > div:nth-of-type(4) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(4) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(4) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(4) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(4) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(4) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(4) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(4) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(4) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(4) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(4) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(4) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(2) > div:nth-of-type(4) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: blue;
}

/* explosie 3 */

section:nth-of-type(2) > div:nth-of-type(5) {
  position: absolute;
  top: 32%;
  left: 40%;
  transform: scale(1.4);
}
section:nth-of-type(2) > div:nth-of-type(5) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(2) > div:nth-of-type(5) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(5) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(5) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(5) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(5) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(5) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(5) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(5) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(5) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(5) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(5) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(5) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(2) > div:nth-of-type(5) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: rgb(248, 170, 183);
}

/* explosie 4 */

section:nth-of-type(2) > div:nth-of-type(6) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: scale(1.7);
}
section:nth-of-type(2) > div:nth-of-type(6) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(2) > div:nth-of-type(6) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(6) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(6) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(6) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(6) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(6) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(6) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(6) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(6) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(6) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(6) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(6) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(2) > div:nth-of-type(6) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: orange;
}

/* explosie 5 */

section:nth-of-type(2) > div:nth-of-type(7) {
  position: absolute;
  top: 45%;
  left: 65%;
  transform: scale(1.4);
}
section:nth-of-type(2) > div:nth-of-type(7) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(2) > div:nth-of-type(7) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(7) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(7) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(7) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(7) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(7) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(7) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(7) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(7) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(7) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(7) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(7) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(2) > div:nth-of-type(7) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: green;
}

/* explosie 6 */

section:nth-of-type(2) > div:nth-of-type(8) {
  position: absolute;
  top: 48%;
  left: 80%;
  z-index: 2;
  transform: scale(1.6);
}
section:nth-of-type(2) > div:nth-of-type(8) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(2) > div:nth-of-type(8) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(8) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(8) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(8) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(8) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(8) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(8) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(8) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(8) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(8) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(8) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(2) > div:nth-of-type(8) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(2) > div:nth-of-type(8) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: purple;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  !!!!!!!!!!!!! Vuurwerk sectie 3 !!!!!!!
  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

section:nth-of-type(3) label {
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 999;
  padding: 10px 30px 10px 30px;
  background-color: white;
  color: black;
  border-radius: 10px;
  box-shadow: #777b7e 3px 3px 3px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  transition: 0.3s ease;
}

section:nth-of-type(3) label:nth-of-type(2) {
  padding: 10px 59px 10px 59px;
}

section:nth-of-type(3) label:hover {
  background-color: rgb(133, 125, 125);
  transition: 0.3s ease;
  color: rgb(37, 36, 36);
}

input[type="checkbox"] {
  display: none;
}

section:nth-of-type(3) input[type="checkbox"] {
  position: relative;
  top: 10%;
  z-index: 999;
}

section:nth-of-type(3) > ul:nth-of-type(2) li {
  position: relative;
  width: 20px;
  height: 100px;
  position: absolute;
  bottom: 80%;
  left: 25%;
  transition: transform 1s;
  z-index: 5;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(2) {
  left: 30%;
  bottom: 60%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(3) {
  left: 32%;
  bottom: 65%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(4) {
  left: 36%;
  bottom: 58%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(5) {
  left: 39%;
  bottom: 63%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(6) {
  left: 42%;
  bottom: 70%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(7) {
  left: 45%;
  bottom: 61%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(8) {
  left: 48%;
  bottom: 66%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(9) {
  left: 52%;
  bottom: 62%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(10) {
  left: 56%;
  bottom: 69%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(11) {
  left: 58%;
  bottom: 75%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(12) {
  left: 59%;
  bottom: 62%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(13) {
  left: 61%;
  bottom: 85%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(14) {
  left: 63%;
  bottom: 72%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(15) {
  left: 67%;
  bottom: 62%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(16) {
  left: 68%;
  bottom: 72%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(17) {
  left: 69%;
  bottom: 65%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(18) {
  left: 71%;
  bottom: 75%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(19) {
  left: 72%;
  bottom: 70%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(20) {
  left: 73%;
  bottom: 60%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(21) {
  left: 75%;
  bottom: 65%;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(22) {
  left: 77%;
  bottom: 70%;
}

/* Stijlen pijlen */

/* Top element */

section:nth-of-type(3) > ul:nth-of-type(2) li div:nth-of-type(1) {
  position: absolute;
  width: 30px;
  height: var(--kopheight, 15px);
  background-color: var(--kopkleur, red);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  right: 0px;
  z-index: 10;
  transform: scaleX(0.5);
}

/* stok element */

section:nth-of-type(3) > ul:nth-of-type(2) li div:nth-of-type(2) {
  position: absolute;
  width: var(--stokwidth, 10px);
  height: var(--stokheight, 60px);
  background: repeating-linear-gradient(
    45deg,
    var(--stokgradientkleur1, #ffffff),
    var(--stokgradientkleur1, #ffffff) 10px,
    var(--stokgradientkleur2, #ff0000) 10px,
    var(--stokgradientkleur2, #ff0000) 20px
  );
  top: 14px;
  border-radius: 2px;
}

/* Stijlen pijlen individueel */

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(2) {
  --stokheight: 40px;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(3),
section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(7),
section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(11),
section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(14) {
  --stokheight: 50px;
  --kopkleur: yellow;
  --stokgradientkleur1: black;
  --stokgradientkleur2: green;
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(5),
section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(22),
section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(18),
section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(16) {
  --stokheight: 50px;
  --kopkleur: rgb(255, 255, 255);
  --stokgradientkleur1: rgb(33, 4, 196);
  --stokgradientkleur2: rgb(0, 0, 0);
}

section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(6),
section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(12),
section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(15),
section:nth-of-type(3) > ul:nth-of-type(2) li:nth-of-type(19) {
  --stokheight: 50px;
  --kopkleur: rgb(255, 255, 255);
  --stokgradientkleur1: rgb(27, 97, 54);
  --stokgradientkleur2: rgb(0, 0, 0);
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(1) {
  transform: translate(3000%, -1500%);
  transition: transform 1s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(2) {
  transform: translateY(-1500%);
  transition: transform 1s ease 0.5s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(3) {
  transform: translate(5000%, -1500%);
  transition: transform 1s ease 1s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(4) {
  transform: translate(-5000%, -1500%);
  transition: transform 1s ease 1.3s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(5) {
  transform: translateY(-1500%);
  transition: transform 1s ease 1.6s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(6) {
  transform: translate(3000%, -1500%);
  transition: transform 1s ease 1.7s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(7) {
  transform: translateY(-1500%);
  transition: transform 1s ease 1.8s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(8) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.1s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(9) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.4s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(10) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.6s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(11) {
  transform: translate(3000%, -1500%);
  transition: transform 1s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(12) {
  transform: translateY(-1500%);
  transition: transform 1s ease 0.7s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(13) {
  transform: translate(5000%, -1500%);
  transition: transform 1s ease 0.8s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(14) {
  transform: translate(-5000%, -1500%);
  transition: transform 1s ease 0.3s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(15) {
  transform: translate(3000%, -1500%);
  transition: transform 1s ease 1.6s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(16) {
  transform: translate(3000%, -1500%);
  transition: transform 1s ease 1.5s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(17) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.2s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(18) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.3s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(19) {
  transform: translateY(-1500%);
  transition: transform 1s ease 0.9s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(20) {
  transform: translateY(-1500%);
  transition: transform 1s ease 1.3s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(21) {
  transform: translate(-5000%, -1500%);
  transition: transform 1s ease 2.4s;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li:nth-of-type(22) {
  transform: translateY(-1500%);
  transition: transform 1s ease 2.6s;
}

body:has(section:nth-of-type(3) #animate3:not(:checked))
  section:nth-of-type(3)
  > ul:nth-of-type(2)
  li {
  transition: transform 0s;
}

body:has(section:nth-of-type(3) #animate3:not(:checked))
  section:nth-of-type(3)
  label:nth-of-type(2) {
  display: none;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  label:nth-of-type(2) {
  display: flex;
}

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  label:nth-of-type(1) {
  display: none;
}

/* Explosie has selector */

body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > div:nth-of-type(3)
  > div::before,
body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > div:nth-of-type(4)
  > div::before,
body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > div:nth-of-type(5)
  > div::before,
body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > div:nth-of-type(6)
  > div::before,
body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > div:nth-of-type(7)
  > div::before,
body:has(section:nth-of-type(3) #animate3:checked)
  section:nth-of-type(3)
  > div:nth-of-type(8)
  > div::before {
  animation: explosion 2s ease-in-out 3;
  animation-delay: 3s;
}

/* Explosies */
@keyframes explosion {
  0% {
    top: 100%;
  }
  33%,
  100% {
    top: -50%;
  }
}

/* Explosie 1 */

section:nth-of-type(3) > div:nth-of-type(3) {
  position: absolute;
  top: 35%;
  left: 15%;
  transform: scale(0.8);
}
section:nth-of-type(3) > div:nth-of-type(3) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(3) > div:nth-of-type(3) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(3) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(3) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(3) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(3) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(3) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(3) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(3) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(3) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(3) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(3) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(3) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(3) > div:nth-of-type(3) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: red;
}

/* explosie 2 */

section:nth-of-type(3) > div:nth-of-type(4) {
  position: absolute;
  top: 50%;
  left: 25%;
  transform: scale(1.2);
  z-index: 2;
}
section:nth-of-type(3) > div:nth-of-type(4) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(3) > div:nth-of-type(4) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(4) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(4) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(4) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(4) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(4) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(4) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(4) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(4) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(4) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(4) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(4) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(3) > div:nth-of-type(4) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: blue;
}

/* explosie 3 */

section:nth-of-type(3) > div:nth-of-type(5) {
  position: absolute;
  top: 32%;
  left: 40%;
  transform: scale(1.4);
}
section:nth-of-type(3) > div:nth-of-type(5) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(3) > div:nth-of-type(5) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(5) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(5) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(5) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(5) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(5) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(5) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(5) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(5) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(5) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(5) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(5) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(3) > div:nth-of-type(5) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: rgb(248, 170, 183);
}

/* explosie 4 */

section:nth-of-type(3) > div:nth-of-type(6) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: scale(1.7);
}
section:nth-of-type(3) > div:nth-of-type(6) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(3) > div:nth-of-type(6) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(6) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(6) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(6) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(6) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(6) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(6) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(6) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(6) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(6) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(6) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(6) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(3) > div:nth-of-type(6) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: orange;
}

/* explosie 5 */

section:nth-of-type(3) > div:nth-of-type(7) {
  position: absolute;
  top: 45%;
  left: 65%;
  transform: scale(1.4);
}
section:nth-of-type(3) > div:nth-of-type(7) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(3) > div:nth-of-type(7) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(7) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(7) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(7) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(7) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(7) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(7) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(7) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(7) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(7) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(7) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(7) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(3) > div:nth-of-type(7) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: green;
}

/* explosie 6 */

section:nth-of-type(3) > div:nth-of-type(8) {
  position: absolute;
  top: 48%;
  left: 80%;
  z-index: 2;
  transform: scale(1.6);
}
section:nth-of-type(3) > div:nth-of-type(8) * {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 4px;
  height: 80px;
  transform-origin: 50% 100%;
  overflow: hidden;
}
section:nth-of-type(3) > div:nth-of-type(8) > div:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(8) > div:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(8) > div:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(8) > div:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(8) > div:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(8) > div:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(8) > div:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(8) > div:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(8) > div:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(8) > div:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(8) > div:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}
section:nth-of-type(3) > div:nth-of-type(8) > div:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

section:nth-of-type(3) > div:nth-of-type(8) > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background-color: purple;
}