/*
Info how to use css vars ->
    https://www.youtube.com/watch?v=PHO6TBq_auI
    https://www.youtube.com/watch?v=V9yP0QG0NWI

This video compares CSS vars tot SASS vars in media queries but it's a good example
of how to use them with media queries and why you need them-> https://www.youtube.com/watch?v=19e7_3UmQrI

Fallbacks for css vars are not necessary any more the browser support is 97.66%. -> https://caniuse.com/css-variables

change css vars with js -> https://www.youtube.com/watch?v=cZ0yt67A7OM
*/

/*@import url("./fonts/lemon-milk/lemon-milk.css");*/
/*@import url("./fonts/babes-neue-pro/bebas-neue-pro.css");*/

@font-face {
  font-family: "PixelFont";
  src: url('/assets/fonts/Minecraft.woff2');
}

/* Root CSS variabelen */
:root {
  --primary-light-color: #E7F3F9;
  --primary-dark-color: #001530;
  --secondary-1-color: #E30147;
  --secondary-2-color: #FA967D;
  --secondary-3-color: #D9D9D9;
  --secondary-4-color: #9FDAF9;
  --secondary-5-color: #70849D;
  --secondary-6-color: #002757;
  --secondary-7-color: #00C869;

  --drop-shadow-color: rgba(12, 37, 52, 0.25);
  --drop-shadow: 0 0.2rem 0.5rem var(--drop-shadow-color);

  --primary-font: Tahoma, sans-serif;

  --font-size-title: 3rem;
  --font-size-subtitle: 2rem;
  --font-size-subtext: 1.5rem;
  --font-size-text: 18px;
  --font-size-text-sm: 14px;
  --font-size-quote: 1.5rem;

  --font-weight-n: 400;
  --font-weight-l: 200;
  --font-weight-b: 600;

  --text-tracking: 1px;
  --text-leading: normal;

  --border-radius: 20px;
  --border-radius-sm: 12px;

  --margin: 1rem;
  --margin-sm: calc(var(--margin) * 0.5);
  --margin-md: calc(var(--margin) * 2);
  --margin-lg: calc(var(--margin) * 3);
}

/* Basis reset */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
  font-family: var(--primary-font), sans-serif;
  font-weight: var(--font-weight-n);
  font-size: var(--font-size-text);
  letter-spacing: var(--text-tracking);
  color: var(--primary-dark-color);
  user-select: none;
  /* Standard */
  -webkit-user-select: none;
  /* Safari/Chrome */
  -ms-user-select: none;
  /* IE/Edge */
  overflow-x: hidden;
  /* voorkomt horizontaal scrollen */
}

/* Achtergrond via pseudo-element zodat content kan scrollen */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-image: url("/assets/images/background.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Specifieke stijlen voor content */
main,
section,
header,
footer {
  position: relative;
  z-index: 0;
  padding: 2rem;
}

/* Buttons, inputs, links */
button,
input,
a {
  touch-action: manipulation;
}

/* Afbeeldingen en links */
img,
a {
  -webkit-touch-callout: none;
}