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

@font-face {
  font-family: "SuperHocker";
  src: url(/fonts/SuperHockey.ttf);
}

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

@font-face {
  font-family: "SuperBlocky";
  src: url(/fonts/SuperBlocky.ttf);
}

@font-face {
  font-family: "Luna";
  src: url(/fonts/HS_LunaObscura.otf);
}

@font-face {
  font-family: "Matcha";
  src: url(/fonts/MatchaCih.otf);
}

@font-face {
  font-family: "Mirano";
  src: url(/fonts/MiranoExtendedFreebie-Light.ttf);
}

html {
  color-scheme: light dark;

  --background-full: light-dark(#b3e4e9, #2e4057);
  --background-ul: light-dark(#ffe32a, #fce762);
  --text: light-dark(#354c6a, #ddbdd5);
  --text-ul: light-dark(#000000, #fff08e);
  --text-li-a: light-dark(#2965b3, #2e4057);
  --hover: light-dark(#5578a2, #2d6a6f);
  --active: light-dark(#3d5574, #92b9bd);
  --active2: light-dark(#75aef5, #92b9bd);
  --cookie: light-dark(rgb(143, 241, 234), rgb(3, 150, 140));
  --button: light-dark(rgb(51, 124, 240), #fce762);
  --buttonhover: light-dark(rgb(3, 59, 150), #b9a210);
  --borderradius: 10px;
  --blocks: light-dark(white, #4c62c3);
  --blockshover: light-dark(blue, #f87060);
  --width: 325px;
  --widthbig: 500px;
  --widthbig2: 400px;
  --geel: light-dark(rgb(41, 111, 224), #fce762);
  --blauw: light-dark(#fce762, rgb(41, 111, 224));
  --wit: white;
  --zwart: black;
  --yap: light-dark(rgb(82, 0, 86), rgb(220, 97, 205));
  --yap1: light-dark(black, black);
}

/* border kleuren ook in de custom proper s*/

html:has([value="light"]:checked) {
  color-scheme: light;
  background-color: var(--background);
}

html:has([value="dark"]:checked) {
  color-scheme: dark;
  background-color: var(--background);
}

body {
  background-color: var(--background-full);
}

h1,
h3 {
  color: var(--text);
  text-align: center;
  font-family: "Mephisto";
}

h2 {
  color: var(--text);
  text-align: center;
  font-family: "SuperHocker";
  font-weight: 50;
}

@keyframes --title_upndown {
  0% {
    scale: 1;
  }
  10% {
    translate: 0em 0em;
    scale: 1.2 0.8;
  }
  20% {
    translate: 0em -0.25em;
    scale: crimson;
  }
  30% {
    translate: 0em -0.25em;
  }
  40% {
    scale: 0.9 1.1;
  }
  50% {
    scale: 1;
  }
  100% {
    scale: 1;
  }
}

body h3 {
  font-size: 2.5rem;
  transform-origin: center bottom;
  animation-name: --title_upndown;
  animation-duration: 3s;
  animation-iteration-count: 7;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0 5rem;
  overflow: hidden;
  font-family: "Matcha";
  background-color: var(--background-ul);

  li {
    a {
      display: block;
      color: var(--text-li-a);
      padding: 16px 17px;
      text-decoration: none;
      float: left;
    }
  }
}

ul li a:hover {
  background-color: var(--hover);
  color: var(--wit);
}

ul li a.active {
  background-color: var(--active2);
}

form {
  color: var(--text-ul);
  text-align: center;
  padding: 0.5em;
  font-size: 20px;
}

section {
  justify-self: center;
  padding: 1.5em 0.5em 0.5em 0.5em;
}

button {
  background-color: var(--button);
  color: var(--zwart);
  font-family: "CourbeSans";
  font-size: 20px;
  border-color: var(--zwart);
  border-width: 4px;
  height: 35px;
  width: 130px;
  &:hover {
    background-color: var(--buttonhover);
    color: var(--wit);
  }
}

dialog {
  margin: auto;
  text-align: center;
  max-width: 25em;
  background-color: var(--cookie);
  color: var(--zwart);
  font-family: "Mirano";
  font-size: 15px;
  button {
    height: 30px;
    width: 150px;
    font-family: "CourbeSans";
    font-size: 15px;
    color: var(--blockshover);
    a {
      text-decoration: none;
      color: var(--zwart);
    }
  }
  a {
    color: var(--geel);
    &:hover {
      color: var(--yap);
    }
  }

  &::backdrop {
    background-color: var(--backdrop-dialog);
    backdrop-filter: blur(2px);
  }
}

/* selections */

main {
  font-size: 20px;
  font-family: "CourbeSans";
  font-weight: 200;
  display: grid;
  /* section p { */
  @media (width > 60em) {
    grid-template-columns: 5em 15em 15em 5em;
    /* grid-auto-rows: 100px; */
    place-items: center;
    align-items: start;
    grid-template-areas:
      "one . . two"
      ". txt1 txt1 ."
      "three . . four";
    justify-content: center;
  }

  @media (width < 60em) {
    grid-template-columns: 15em 15em;
    /* grid-auto-rows: 100px; */
    place-items: center;
    align-items: start;
    column-gap: 50px;
    grid-template-areas:
      "one two"
      "txt1 txt1"
      "three four";
    justify-content: center;
  }

  @media (width < 45em) {
    grid-template-columns: 10em;
    align-items: start;
    place-items: center;
    grid-gap: 45px;
    grid-template-areas:
      "txt1"
      "one"
      "two"
      "three"
      "four";
    /* "one . . two"
      ". . txt1 ."
      "three . . four"; */
    justify-content: center;
  }
}

main img {
  width: 300px;
  padding: 0.5em;
  /* height: 00px; */
}

main h2 {
  background-color: var(--background-ul);
  color: var(--yap);
  grid-area: txt1;
  /* text-align: center; */
  border-radius: var(--borderradius);
  height: 100px;
  width: 210px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(0.5em 1em 1em 1em);
}

main a:nth-of-type(1) {
  background-color: var(--blocks);
  color: var(--yap1);
  text-align: center;
  justify-content: start;
  border-radius: var(--borderradius);
  width: var(--width);
  grid-area: one;
  text-decoration: none;
  &:hover {
    background-color: var(--blockshover);
    scale: 1.1;
  }
  &:focus {
    background-color: var(--blockshover);
    scale: 1.1;
    border-style: dashed;
    border-color: var(--zwart);
  }
  @media (width > 60em) {
    width: var(--widthbig);
    img {
      width: var(--widthbig2);
    }
  }
}

main a:nth-of-type(2) {
  background-color: var(--blocks);
  color: var(--yap1);
  text-align: center;
  border-radius: var(--borderradius);
  width: var(--width);
  /* width: 300px; */
  grid-area: two;
  text-decoration: none;
  &:hover {
    background-color: var(--blockshover);
    scale: 1.1;
  }
  &:focus {
    background-color: var(--blockshover);
    scale: 1.1;
    border-style: dashed;
    border-color: var(--zwart);
  }
  @media (width > 60em) {
    width: var(--widthbig);
    img {
      width: var(--widthbig2);
    }
  }
}

main a:nth-of-type(3) {
  /* background-color: var(--blocks); */
  /* background-color: linear-gradient(var(--blauw), var(--geel)); */
  color: var(--yap1);
  text-align: center;
  border-radius: var(--borderradius);
  width: var(--width);
  /* width: 300px; */
  grid-area: three;
  text-decoration: none;
  &:hover {
    scale: 1.1;
  }
  &:focus {
    scale: 1.1;
    border-style: dashed;
    border-color: var(--zwart);
  }
  @media (width > 60em) {
    width: var(--widthbig);
    img {
      width: var(--widthbig2);
    }
  }
}

main a:nth-of-type(4) {
  background-color: var(--blocks);
  color: var(--yap1);
  text-align: center;
  border-radius: var(--borderradius);
  width: var(--width);
  /* width: 300px; */
  grid-area: four;
  text-decoration: none;
  &:hover {
    background-color: var(--blockshover);
    scale: 1.1;
  }
  &:focus {
    background-color: var(--blockshover);
    scale: 1.1;
    border-style: dashed;
    border-color: var(--zwart);
  }
  @media (width > 60em) {
    width: var(--widthbig);
    img {
      width: var(--widthbig2);
    }
  }
}

/* BUTTON ANIMATION BG */

/* GLOBAL */
@property --s {
  /* leer de browser dat --s en percentage is */
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

/* GRIEK */

[aria-label="Griekse"] {
  background-image: radial-gradient(
    in oklch at var(--s, 0%) var(--s, 0%),
    var(--geel),
    var(--blauw)
  );
}

[aria-label="Griekse"]:hover {
  animation-name: --Greekmove;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-direction: alternate;
}

[aria-label="Griekse"]:focus {
  animation-name: --Greekmove;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-direction: alternate;
}

@keyframes --Greekmove {
  0% {
    --s: 0%;
  }
  100% {
    --s: 100%;
  }
}

/* MUZIEK */

[aria-label="Muziekse"] {
  background-image: linear-gradient(
    in oklch,
    var(--geel) var(--s),
    var(--blauw) calc(100% - var(--s))
  );
  transition: --s 1s;
}

[aria-label="Muziekse"]:hover {
  --s: 100%;
}

[aria-label="Muziekse"]:focus {
  --s: 100%;
}

/* BOEK */

[aria-label="Boekse"] {
  background-image: conic-gradient(
    in oklch,
    var(--blauw) var(--s),
    var(--geel) var(--s)
  );
  transition: --s 1.5s;
}

[aria-label="Boekse"]:hover {
  --s: 100%;
}

[aria-label="Boekse"]:focus {
  --s: 100%;
}

/* SHOW */

[aria-label="Showse"] {
  background-image: radial-gradient(
    in oklch,
    var(--geel) var(--s, 0%),
    var(--blauw) calc(100% - var(--s, 0%))
  );
}

[aria-label="Showse"]:hover {
  animation-name: --Showmovee;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

[aria-label="Showse"]:focus {
  animation-name: --Showmovee;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

@keyframes --Showmovee {
  0% {
    --s: 0%;
  }
  /* 25% {
    --s: 31%;
  } */
  50% {
    --s: 62%;
  }
}

footer p {
  color: var(--zwart);
  text-align: center;
  font-size: 11px;
  font-family: "Luna", Times, serif;
}