@font-face {
  font-family: Nake;
  src: url(/assets/type/Nake-Regular.otf);
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: Degolan;
  src: url(../type/Degolan.otf);
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: Movies;
  src: url(/assets/type/Fifties\ Movies.ttf);
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: wavefont;
  font-display: block;
  src: url("/assets/type/Wavefont.woff2") format("woff2");
}

/* MARK: KLEURTJES */
html {
  overflow-x: clip; 
  color-scheme: light dark;
  --color: light-dark(black, white);
  --background-color: light-dark(white, black);

  --whitespace-s: 1rem;
  --whitespace-m: calc(var(--whitespace-s) * 2);
  --whitespace-l: calc(var(--whitespace-s) * 4);
  --whitespace-xs: calc(var(--whitespace-s) * 0.5);

  --color-wit: white;
  --color-zwart: black;
  --color-blauw: #3f3fa3;
  --color-blokken: #4f3a79;
  --color-paars: #923fa3;
  --color-tussenstuk: #5252a1;
  --color-knop: #b544a6;
  --color-knop-hover: #3f3f9f;
  --color-gloed: #f6f6f8;

  --color-lila: rgb(199, 157, 231);
  --color-donkerblauw: rgb(43, 43, 133);
  --color-roze: rgb(208, 60, 124);
  --color-bijna-zwart: rgb(7, 7, 7);
  --color-violet: rgb(130, 77, 227);


  --gradient-donker: light-dark(white, var(--color-bijna-zwart));
  --gradient-blauw: light-dark(rgb(150, 150, 240), var(--color-donkerblauw));
}

/* MARK: HEADER */
h1 {
  font-size: clamp(6.7rem, -1rem + 30vw, 20rem);
  line-height: 0.8;
  font-family: Nake;
  text-shadow: 0.05em 0.05em 0.05em var(--color-blauw);
  margin-top: -2rem;
}
h4 {
  font-size: clamp(6.7rem, -1rem + 30vw, 20rem);
  line-height: 0.8;
  font-family: Nake;
  text-shadow: 0.05em 0.05em 0.05em var(--color-blauw);
}
.header {
  align-items: center;
  justify-content: center;
}
body {
  font-family: system-ui, sans-serif;
  text-align: center;
  max-width: 1000px;
  margin: auto;
  padding: 40px 20px;
  color: var(--color);
  background: radial-gradient(
    var(--color-lila),
    var(--gradient-blauw),
    var(--color-roze),
    var(--gradient-donker),
    var(--color-violet)
  );
  min-height: 100vh;
  background-size: 300% 400%;
  animation: move 10s alternate infinite;
}
main {
  transform: rotateX(15deg);
  transform-origin: 30% 20%;
  transform-style: preserve-3d;
  margin: 0 auto 10vh;
  perspective: 7000px;
}
.nav {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: nowrap;
  overflow: hidden;
  position: relative;
  z-index: 10;
  max-width: 1000px;
  margin: -10rem auto 2rem;
  padding: 15px 0;
  background-color: var(--color-blauw);
  color: var(--color-wit);
  font-family: Degolan;
  font-size: clamp(3rem, 2.8333rem + 0.8333vw, 3.25rem);
  white-space: nowrap;
  list-style-type: none;

  a {
    color: var(--color-wit);
    transition: 0.4s ease-in-out;

    &:hover {
      color: var(--color-zwart);
    }
  }
}

h2 {
  font-size: clamp(3.7rem, -2.3rem + 30vw, 15rem);
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  line-height: 0.8;
  font-family: Nake;
  text-shadow: 0.05em 0.05em 0.05em var(--color-blauw);
}
h3 {
  font-size: 5em;
  line-height: 0.8;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-family: Movies;
  text-shadow: 0.05em 0.05em 0.05em var(--color-paars);
}
.carnertussenstuk {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  color: var(--color-wit); 
  overflow-wrap: anywhere; 
  padding: var(--whitespace-l) var(--whitespace-m);
  margin-top: var(--whitespace-m);
  margin-bottom: var(--whitespace-l);
  background: linear-gradient(135deg, var(--color-blokken), var(--color-blauw));
  border-block: 0.15em solid var(--color-gloed);
  box-shadow: 0 0 3rem var(--color-blauw);
}

.carnertussenstuk h3 {
  margin-bottom: 0.8em;
}

.carnertussenstuk p {
  max-width: 55ch;
  margin: 0 auto var(--whitespace-m);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.Tussenkolomn p {
  text-align: left;
}
.Tussenkolomn p:last-child {
  margin-bottom: 0;
}
p {
  font-size: 22px;
}
/* MARK: Knopje muziek
 */
.knopjemuziek {
  position: fixed;
  top: var(--whitespace-m);
  right: var(--whitespace-m);
  z-index: 100;
  width: 9rem;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  font-family: Movies;
  font-size: 1.9rem;
  line-height: 0.9;
  text-align: center;
  text-shadow: 0.08em 0.08em 0.08em var(--color-blauw);
  color: var(--color-wit);
  background: linear-gradient(135deg, var(--color-knop), var(--color-paars));
  border: 0.15em solid var(--color-wit);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  appearance: none;
  cursor: pointer;

  @media (prefers-reduced-motion: no-preference) {
    animation:
      blob 6s ease-in-out infinite alternate,
      pop 1.8s ease-out infinite;
  }

  &:hover {
    animation-play-state: paused;
    scale: 1.1;
    rotate: -6deg;
    background: var(--color-wit);
    color: var(--color-knop-hover);
    text-shadow: none;
  }

  body.consent & {
    background: var(--color-zwart);
  }
  /* code door ai laten schrijven, ik wilde een active state en pauze knop op het muziek knopje. */
}
.muziekcheck {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.muziekcheck:checked + .knopjemuziek {
  animation-play-state: paused;
  scale: 1.1;
  rotate: -6deg;
  background: var(--color-wit);
  color: var(--color-knop-hover);
  text-shadow: none;
}

.muziekcheck:focus-visible + .knopjemuziek {
  outline: 0.2em solid var(--color-wit);
  outline-offset: 0.2em;
}
@keyframes blob {
  to {
    border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%;
  }
}

@keyframes pop {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--color-knop);
  }
  30% {
    transform: scale(1.12) rotate(-4deg);
  }
  60% {
    transform: scale(1);
    box-shadow: 0 0 0 1.5rem transparent;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 transparent;
  }
}
.knopjemuziek img {
  width: 7rem;
  height: 7rem;
}
/* MARK: Favoriete nummers */
section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(4rem, 9vw, 6.5rem);
  gap: var(--whitespace-s);
  max-width: 1000px;

  a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    font-family: Movies;
    font-size: min(5vw, 3.2rem);
    line-height: 0.9;
    text-wrap: balance;
    overflow-wrap: anywhere;
    text-shadow: 0.06em 0.06em 0.1em var(--color-donkerblauw);
    text-decoration: none;
    color: var(--color-wit); 
    cursor: pointer;
    transition: 0.4s ease-in-out;

    &::before {
      counter-increment: rank;
      content: counter(rank, decimal-leading-zero);
      position: absolute;
      top: 0.6rem;
      left: 0.9rem;
      font-family: Degolan;
      font-size: 1.4rem;
      line-height: 1;
      opacity: 0.7;
      text-shadow: none;
    }
    /* heb zelf de hover animatie en dergelijken gemaakt en bedacht. En heb aan ai gevraagd de animatie te verbeteren omdat hij nog haperig verliep.  */
    &:hover {
      outline: 0.17em double var(--color-gloed);
      outline-offset: -0.4em;
      filter: drop-shadow(0 0 20px var(--color-gloed));
    }
    /* met code van w3schools en hulp van ai heb ik het spotify logo alleen op de hover gezet zodat het er nog clean uitziet maar voor de gebruiker wel duidelijk is dat het een spotify link is. */
    &::before {
      position: absolute;
      inset: 0;
      background-image: url("/oefeningen/presentatie/spotify.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease;
    }

    &:hover::before {
      opacity: 0.15;
    }
    &:nth-child(odd):hover {
      transform: rotate(2deg);
    }
    &:nth-child(even):hover {
      transform: rotate(-2deg);
    }

    &:nth-child(1) {
      grid-column: 1 / span 7;
      grid-row: 1 / span 4;
      font-size: min(8.5vw, 5.2rem);
      background: var(--color-blauw);
    }
    &:nth-child(2) {
      grid-column: 8 / span 5;
      grid-row: 1 / span 2;
      background: var(--color-blauw);
    }
    &:nth-child(3) {
      grid-column: 9 / span 4;
      grid-row: 3 / span 2;
      font-size: min(4.2vw, 2.6rem);
      background: var(--color-blauw);
    }
    &:nth-child(4) {
      grid-column: 2 / span 8;
      grid-row: 5 / span 2;
      background: var(--color-blauw);
    }
  }
}
section img {
  width: 3rem;
  height: 3rem;
}
@media (max-width: 800px) {
  section {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  section a:nth-child(n) {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 9rem;
    font-size: min(12vw, 3.4rem);
  }
  section a:nth-child(1) {
    min-height: 16rem;
    font-size: min(15vw, 4.5rem);
  }
}

/* MARK: Tussenteksten */
.list {
  list-style-type: none;
}
.img2 {
  width: 60rem;
}
.img4 {
  width: 50rem;
}
video {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

/* MARK: Media queries */
@media (max-width: 800px) {
  header {
    margin-top: 12rem;
    max-width: 90vw;
  }
  h1 {
    font-size: 600%;
    max-width: 90vw;
    margin: -12rem auto 0;
  }

  h3 {
    font-size: 300%;
    line-height: 3rem;
  }
  .nav {
    max-width: 100%;
    flex-wrap: wrap;
    align-content: center;
    margin-top: 2rem;
    font-size: 200%;
  }

  img {
    max-width: 60vw;
  }
  .carnertussenstuk {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .carnertussenstuk p {
    font-size: clamp(0.85rem, 3.5vw, 1rem);
    line-height: 1.5;
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .knopjemuziek {
    width: 4rem;
    height: 5rem;
  }
  .knopjemuziek img {
    width: 4rem;
    height: 4rem;
  }
}