/**********
•⁠  ⁠MARK: Custom properties
**********/

html {
  color-scheme: light dark;

  --background-color: light-dark(rgb(145, 200, 255), rgb(11, 3, 49));
  --background-button: light-dark(rgb(11, 3, 49), rgb(145, 200, 255));
  --background-image: light-dark(
    url("../type/CloudsV3.png"),
    url("../type/Cloud-darkV3.png")
  );
  --text-color: light-dark(rgb(11, 3, 49), rgb(145, 200, 255));
  --li-border-color: light-dark(rgb(88, 132, 235), rgb(182, 209, 234));
  --text-shadow: light-dark(rgb(88, 132, 235), rgb(28, 58, 170));
  --text-shadow-h-home: light-dark(rgb(255, 255, 255), rgb(28, 58, 170));
  --a-text-color: light-dark(rgb(11, 3, 49), rgb(164, 183, 205));
  --a-extra-color: light-dark(rgb(255, 0, 174), rgb(255, 242, 0));
  --menu-color: light-dark(rgb(145, 200, 255), rgb(88, 132, 235));
  --button-text: light-dark(rgb(145, 200, 255), rgb(11, 3, 49));

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

  /* Cookies knop en pause en play button styling hieronder */

  --dialog-backgroundcolor: light-dark(rgb(11, 3, 49), rgb(145, 200, 255));
  --dialog-border: light-dark(rgb(182, 209, 234), rgb(255, 255, 255));
  --dialog-text: light-dark(rgb(145, 200, 255), rgb(11, 3, 49));

  --button-background: light-dark(rgb(145, 200, 255), rgb(11, 3, 49));
  --buttonmenu-text: light-dark(rgb(11, 3, 49), rgb(145, 200, 255));
}
/**********
•⁠  ⁠MARK: Fonts
**********/

@font-face {
  font-family: "impacted";
  src: url(../type/IMPACTED.ttf);
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "fraunces";
  src: url(../type/Fraunces/Fraunces-VariableFont_SOFT\,WONK\,opsz\,wght.ttf);
  font-weight: 100 900;
  font-style: normal;
}

/* bronfont frances: https://fonts.google.com/specimen/Fraunces?preview.script=Latn 
bron font impacted:  https://www.dafont.com/impacted-hr.font?back=theme  */