@font-face {
  font-family: Seraph;
  src: url(fonts/SeraphsVF.woff2);
}

@font-face {
  font-family: worldDisco;
  src: url(fonts/WorldDiscovery_PERSONAL_USE_ONLY.otf);
}

/* bron: hva ai*/
html {
  color-scheme: light dark;
  --roze: light-dark(#ff3d7e, black);
  --orange: light-dark(#ff713d, black);
  --geel: light-dark(#ffb700, black);
  --groen: light-dark(#59ff38, black);
  --blauw: light-dark(#3dffdb, black);
  --background-color: light-dark(black, white);
    --focus-state: light-dark(#b33b72, pink);
}

body {
  color-scheme: light dark;
  font-family: Seraph;
  display: grid;
  grid-template-areas:
    "nav nav"
    "text1 text2"
    "text3 text4"
    "text5 text6"
    "text7 text7"
    "text8 text9"
    "text10 text11"
    "text12 text13"
    "text12 text13"
    "text14 text15"
    "text16 text17"
    "text18 text19"
    "text20 text21"
    "text22 text23"
    "text24 text25"
    "text26 text27"
    "text28 text29"
    "text30 text31"
    "text32 text33"
    "text34 text34"
    "text35 text35";

  background-color: var(--background-color);
}

li{
 font-family: worldDisco;
  font-size: 20px;
  padding-block: 0.5em;
  padding-inline: 0.5em;
  border-width: 0.3em;
  border-style: solid;
  border-radius: 1.5em;
  transition: 0.5s;
  background-color: var(--roze);
  text-decoration: none;
  color: Var(--black);
  display: inline-block;
}

p:nth-of-type(1) {
  color: var(--roze);
  rotate: 20deg;
  font-size: 10vw;
  grid-area: text1;
   justify-self: right;
  align-self: center;
  margin: 1%;
  padding: 5%;
  font-variation-settings:
    "wght" 122,
    "SRFS" 41;

  animation-name: draai;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes draai {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 180deg;
  }
}

p:nth-of-type(2) {
  color: var(--roze);
  font-size: 2vw;
  grid-area: text2;
  justify-content: end;
   justify-self: right;
  align-self: center;
}

p:nth-of-type(3) {
  color: var(--geel);
  rotate: -10deg;
  font-size: 10vw;
  grid-area: text3;
   justify-self: right;
  align-self: center;
  margin: 1%;
  padding: 5%;
  justify-self: end;
  font-variation-settings:
    "wght" 144,
    "SRFS" 41;

  animation-name: draai;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-delay: 3s;
}

@keyframes draai {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 180deg;
  }
}

p:nth-of-type(4) {
  color: var(--geel);
  font-size: 2vw;
   justify-self: right;
  align-self: center;
  grid-area: text4;
  
}

p:nth-of-type(5) {
  font-variation-settings:
    "wght" 200,
    "SRFS" 60;
  color: var(--blauw);
  rotate: 20deg;
  font-size: 10vw;
  grid-area: text5;
  margin: 1%;
  padding: 30px;
   justify-self: right;
  align-self: center;

  animation-name: draai;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-delay: 6s;
}

@keyframes draai {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 180deg;
  }
}

p:nth-of-type(6) {
  color: var(--blauw);
  font-size: 2vw;
  grid-area: text6;

  padding-top: 60px;
}

/* bron hva ai*/
p:nth-of-type(7) {
  color: var(--orange);
  font-size: 4vw;
  text-align-last: justify;
  margin: 10%;
  grid-area: text7;
  animation-name: --delay-animation;
  animation-duration: 0.2s;
  animation-iteration-count: infinite;
}

p:nth-of-type(8) {
  color: blue;
}

/* van de codepen van sanne*/
@keyframes --delay-animation {
  0% {
    translate: 0 0;
  }
  50% {
    translate: 0 -0.5em;
  }
  100% {
    translate: 0 0;
  }
}

p:nth-of-type(8) {
  grid-area: text7;
  color: var(--geel);
  font-size: 20vw;
  white-space: nowrap;
  text-align: center;
  writing-mode: sideways-lr;
  margin: 0%;
  padding: 0px;
  justify-self: end;
  font-variation-settings:
    "wght" 100,
    "SRFS" 16;
}

p:nth-of-type(9) {
  color: var(--groen);
  font-size: 15vw;
  padding-top: 0.1px;
  grid-area: text8;
  margin: 2%;
  padding: 0px;
  font-variation-settings:
    "wght" 200,
    "SRFS" 60;
  animation: heenEnWeer 2s ease-in-out infinite alternate;
}

/* deze had ik van de ww.school gepakt*/
@keyframes heenEnWeer {
  0% {
    transform: translateX(0) 0;
  }
  100% {
    transform: translateX(200px); /* Eindpositie */
  }
}

p {
  margin: 7px;
}

ul {
  grid-area: nav;
}

p:nth-of-type(10) {
  color: var(--roze);
  font-size: 5vw;
  padding: 0px;
  padding-left: 150px;
  grid-area: text10;
  font-variation-settings:
    "wght" 100,
    "SRFS" 0;
}

p:nth-of-type(11) {
  color: var(--roze);
  font-size: 5vw;
  padding-top: 0.1px;
  grid-area: text11;
  font-variation-settings:
    "wght" 100,
    "SRFS" 0;
}

p:nth-of-type(12) {
  color: var(--geel);
  font-size: 17vw;
  padding-top: 0.1px;
  margin: 2%;
  padding: 0px;
  grid-area: text12;
  font-variation-settings:
    "wght" 200,
    "SRFS" 60;
}

p:nth-of-type(13) {
  align-items: start;
  color: var(--groen);
  font-size: 3vw;
  grid-area: text15;
  align-self: start;
  font-variation-settings:
    "wght" 100,
    "SRFS" 0;
}

p:nth-of-type(14) {
  color: var(--blauw);
  justify-self: right;
  align-self: center;
  font-size: 15vw;
  grid-area: text16;
  font-variation-settings:
    "wght" 200,
    "SRFS" 0;
}
p:nth-of-type(15) {
  justify-self: left;
  align-self: center;
  color: var(--blauw);
  font-size: 10vw;
  grid-area: text17;
  text-align-last: justify;
  font-variation-settings:
    "wght" 133,
    "SRFS" 60;
}

p:nth-of-type(16) {
  justify-self: top;
  align-self: top;
  color: var(--orange);
  grid-area: text18;
  text-align-last: justify;
  font-size: 10px;
  font-variation-settings:
    "wght" 200,
    "SRFS" 0;
}

p:nth-of-type(17) {
  justify-self: left;
  align-self: center;
  color: var(--geel);
  font-size: 7.5vw;
  padding: 0px;
  grid-area: text19;
  font-variation-settings:
    "wght" 200,
    "SRFS" 0;
}

p:nth-of-type(18) {
  color: var(--groen);
  font-size: 10vw;
  white-space: nowrap;
  text-align: center;
  margin: 0%;
  padding: 0px;
  justify-self: end;
  grid-area: text20;
  font-variation-settings:
    "wght" 142,
    "SRFS" 39;
}

p:nth-of-type(19) {
  color: var(--blauw);
  font-size: 1vw;
  grid-area: text21;
  writing-mode: sideways-lr;
  font-variation-settings:
    "wght" 200,
    "SRFS" 24;
}

p:nth-of-type(20) {
  color: var(--blauw);
  font-size: 22vw;
  grid-area: text22;
  align-self: center;
  font-variation-settings:
    "wght" 173,
    "SRFS" 40;
}

p:nth-of-type(21) {
  color: var(--orange);
  font-size: 2vw;
  grid-area: text23;
justify-self: left;
  align-self: center;
  font-variation-settings:
    "wght" 200,
    "SRFS" 60;
}

p:nth-of-type(22) {
  color: var(--roze);
  font-size: 35vw;
  grid-area: text24;
  align-self: end;
    justify-self: right;
  font-variation-settings:
    "wght" 100,
    "SRFS" 41;
}

p:nth-of-type(23) {
  color: var(--roze);
  font-size: 5vw;
  grid-area: text25;
  justify-self: left;
  align-self: center;
  font-variation-settings:
    "wght" 100,
    "SRFS" 41;
}

p:nth-of-type(24) {
  color: var(--blauw);
  font-size: 3vw;
  grid-area: text26;
  justify-self: end;
  align-self: center;
  font-variation-settings:
    "wght" 193,
    "SRFS" 20;
}

p:nth-of-type(25) {
  color: var(--groen);
  font-size: 7vw;
  grid-area: text28;
  justify-self: center;
  align-self: center;
  font-variation-settings:
    "wght" 100,
    "SRFS" 0;
}

p:nth-of-type(26) {
  color: var(--orange);
  font-size: 15vw;
  grid-area: text30;
   justify-self: right;
  align-self: center;
  font-variation-settings:
    "wght" 200,
    "SRFS" 0;
}

p:nth-of-type(27) {
  color: var(--orange);
  font-size: 1vw;
  grid-area: text31;
  justify-self: left;
  align-self: center;
  font-variation-settings:
    "wght" 200,
    "SRFS" 0;
}

p:nth-of-type(28) {
  color: var(--geel);
  font-size: 10vw;
  grid-area: text32;
   justify-self: right;
  align-self: center;
  font-variation-settings:
    "wght" 100,
    "SRFS" 13;
}

p:nth-of-type(29) {
  color: var(--blauw);
  font-size: 15vw;
  grid-area: text33;
    justify-self: left;
  align-self: center;
  writing-mode: sideways-lr;
  font-variation-settings:
    "wght" 200,
    "SRFS" 13;
}

p:nth-of-type(30) {
  color: var(--roze);
  font-size: 25vw;
  grid-area: text34;
  text-align: center;
  justify-self: center;
  align-self: center;
  font-variation-settings:
    "wght" 200,
    "SRFS" 41;
}

p:nth-of-type(31) {
  color: var(--groen);
  font-size: 5vw;
  grid-area: text35;
  justify-self: stretch;
  align-self: stretch;
   text-align-last: justify;
  font-variation-settings:
    "wght" 100,
    "SRFS" 24;
}

body :focus-visible {
  color: var(--focus-state);
  outline: .60em dashed var(--focus-state);
  /* voor de opaqueness van de achtergrond kleur heb ik chatgpt gevraagt*/
  background-color: rgb(179 59 114 / 30%);
}