/* Variables CSS */
@import url(https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap); /* Delicious Handrawn */
@import url(https://fonts.google.com/specimen/Barlow+Semi+Condensed?query=barlow+sem); /* Barlow Semi Condensed */

:root {
  --clr--white: #ffffff;
  --clr--noir: #000000;

  --clr--bleu100: #e6edfd;
  --clr--bleu200: #d8e5fd;
  --clr--bleu300: #8eb5ff;
  --clr--bleu400: #316bf2;
  --clr--grey100: #fafafa;
  --clr--grey200: #d0d0d0;
  --clr--grey300: #333333;
  --clr--green100: #00c0a1;
  --clr--green200: #009a7d;
  --clr--green300: #0a422a;
  

  --ff--Delicious-Handrawn: "Delicious Handrawn", sans-serif;
  --ff--Barlow-Semi-Condensed : "Barlow Semi Condensed", sans-serif;
  
  /* Color */
  --clr--headertexte: var(--clr--white);
  --clr--footertexte: var(--clr--white);
  --clr--buttontexte: var(--clr--white);

  /* Background-color */
  --bgc--body: var(--clr--grey100);
  --bgc--header: var(--clr--bleu300);
  --bgc--footer: var(--clr--bleu300);
  --bgc--gblock: var(--clr--bleu100);
  --bgc--pblock: var(--clr--white);
  --bgc--pblock-hover: var(--clr--green100);
  --bgc--button: var(--clr--bleu300);
  --bgc--button-hover: var(--clr--bleu400);

  /* Border */
  --b--button: var(--clr--bleu300);
  --b--button-hover: var(--clr--bleu400);

  /* Font Family */
  --ff--primary: var(--ff--Barlow-Semi-Condensed);
  --ff--secondary: var(--ff--Delicious-Handrawn);  

  /* Font weight */
  --fw--100: 100;
  --fw--600: 600;
  --fw--800: 800;

  /* Font Size */
  --fs--grandtitre: 3rem;
  --fs--navbouton: .8rem;
  --fs--cartebouton: .8rem;

  /* Box-shadow */
  --bs--boxnav: 5px 5px 5px var(--clr--grey200);
  --bs--boxnav-hover: 10px 10px 10px var(--clr--grey200);
}