/*
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: 'Tahoma';
  src: url('/assets/fonts/tahoma.ttf');
}


: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;


  /*--gradient-1: #F2FAFE 0%, #9DC6E5 100%; !* example  linear-gradient(90deg, var(--gradient-1)); *!*/
  /*    --gradient-2: #D2E9E6  0%, #C9E8E4 100%; !* example  radial-gradient(circle, var(--gradient-1)); *!
      --gradient-3: #DEEBE9  0%, #BDE6E0 100%; !* --gradient maybe not working*!*/

  --drop-shadow-color: rgb(12, 37, 52, .25);
  --drop-shadow: 0 0.2rem 0.5rem var(--drop-shadow-color);

  --primary-font: Tahoma, sans-serif;
  /*--secondary-font: bebas-neue-pro, 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; /* Space between letters (css letter-space)  */
  --text-leading: normal; /* space between lines (css line-height)    */

  --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);

}

html ,body {
  user-select: none;        /* Standard */
  -webkit-user-select: none; /* Safari/Chrome */
  -ms-user-select: none;    /* IE/Edge */

  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 100%;
  height: 100svh;

  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);

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

button, input, a {
  touch-action: manipulation;
}

img, a {
  -webkit-touch-callout: none;
}