/* --------- ARIMO --------- */
@font-face {
  font-family: 'Arimo';
  src: url('./fonts/Arimo/Arimo-VariableFont.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --------- BARLOW --------- */
@font-face {
  font-family: 'Barlow';
  src: url('./fonts/Barlow/Barlow-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('./fonts/Barlow/Barlow-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('./fonts/Barlow/Barlow-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('./fonts/Barlow/Barlow-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('./fonts/Barlow/Barlow-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('./fonts/Barlow/Barlow-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('./fonts/Barlow/Barlow-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('./fonts/Barlow/Barlow-Black.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* --------- ACLONICA --------- */
@font-face {
  font-family: 'Aclonica';
  src: url('./fonts/Aclonica/Aclonica-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --------- COMFORTAA --------- */
@font-face {
  font-family: 'Comfortaa';
  src: url('./fonts/Comfortaa/Comfortaa-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --------- INTER --------- */
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter/Inter-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --------- OPEN SANS --------- */
@font-face {
  font-family: 'Open Sans';
  src: url('./fonts/Open_Sans/OpenSans-VariableFont_wdth.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --------- OXANIUM --------- */
@font-face {
  font-family: 'Oxanium';
  src: url('./fonts/Oxanium/Oxanium-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

html {
    width: 100vw;
    overflow-x: hidden;
}

/* color palette from <https://github.com/vuejs/theme> */
:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;

  --vt-c-black: #181818;
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;

  --vt-c-indigo: #2c3e50;

  --vt-c-divider-light-1: #1c1e21;;
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}

/* semantic color variables for this project */
/* COULEURS DU PROJET */

/* Colors 1
:root {
  --color-titles-shadow: #242321;
  --color-text-shadow: #3F3C38;
  --color-titles-light: #fffdf6;
  --color-text-light: #dfd5c6;
  --primary-color: #eb5a23;
  --secondary-color: #dfd5c6;
  --secondary-color-lighter: #f7ecdd;
  --background-shadow: #242321;
  --background-light: white;
}
/* */

/* Colors 2
:root {
  --color-titles-shadow: #2E3244;
  --color-text-shadow: #516079;
  --color-titles-light: #FFFFFF;
  --color-text-light: #dfdfdf;
  --primary-color: #F1895C;
  --secondary-color: #516079;
  --secondary-color-lighter: #c0d4f5;
  --background-shadow: #2E3244;
  --background-light: #FFFFFF;
}
/* */

/* Colors 3
:root {
  --color-titles-shadow: #1E0F1C;
  --color-text-shadow: #955149;
  --color-titles-light: #ecf3cc;
  --color-text-light: #e1e7c1;
  --primary-color: #7AA95C;
  --secondary-color: #A7001E;
  --secondary-color-lighter: #ffe6eb;
  --background-shadow: #1E0F1C;
  --background-light: #ffffff;
}
/* */

/* Colors 4
:root {
  --color-titles-shadow: #242423;
  --color-text-shadow: #333533;
  --color-titles-light: #E8EDDF;
  --color-text-light: #CFDBD5;
  --primary-color: #ecbe40;
  --secondary-color: #333533;
  --secondary-color-lighter: #deecde;
  --background-shadow: #242423;
  --background-light: #fdfffa;
}
/* */

/* Colors 5 CHOOSEN */
:root {
  --color-titles-shadow: #263B46;
  --color-text-shadow: #395666;
  --color-titles-light: #ffffff;
  --color-text-light: #f0e8d0;
  --primary-color-darker-max: #ca6a33;
  --primary-color-darker: #da7338;
  --primary-color: #f38545;
  --primary-color-lighter: #f59761;
  --secondary-color: #52a8ff;
  --secondary-color-lighter: #ebf4fd;
  --background-shadow-darker: #182329;
  --background-shadow: #20323b;
  --background-shadow-lighter: #2b434e;
  --background-light: #fffefa;
}
/* */

/* Colors 6
:root {
  --color-titles-shadow: #282E2E;
  --color-text-shadow: #525251;
  --color-titles-light: #FFFFFF;
  --color-text-light: #CCCCCC;
  --primary-color: #AB47A3;
  --secondary-color: #24D26D;
  --secondary-color-lighter: #e2ffed;
  --background-shadow: #282E2E;
  --background-light: #FFFFFF;
}
/* */

/* Colors 7
:root {
  --color-titles-shadow: #1B3C59;
  --color-text-shadow: #1B3C59;
  --color-titles-light: #F7F7F7;
  --color-text-light: #ececec;
  --primary-color: #FF6B35;
  --secondary-color: #4A7C59;
  --secondary-color-lighter: #dcefff;
  --background-shadow: #1B3C59;
  --background-light: #F7F7F7;
}
/* */

/* Colors 8
:root {
  --color-titles-shadow: #2A1B3D;
  --color-text-shadow: #1B3C59;
  --color-titles-light: #F7ECE1;
  --color-text-light: #ececec;
  --primary-color: #FF8C61;
  --secondary-color: #FF8C61;
  --secondary-color-lighter: #eef6fd;
  --background-shadow: #2A1B3D;
  --background-light: #F7ECE1;
}
/* */

/* Colors 9
:root {
  --color-titles-shadow: #2C3E50;
  --color-text-shadow: #1B3C59;
  --color-titles-light: #F5F5F5;
  --color-text-light: #ececec;
  --primary-color: #E1B12C;
  --secondary-color: #7F8C8D;
  --secondary-color-lighter: #effeff;
  --background-shadow: #2C3E50;
  --background-light: #F5F5F5;
}
/* */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

body {
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background);
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family: "Inter", sans-serif;
  font-size: calc(.75rem + .5vw) !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

p {
  letter-spacing: 1px;
}

.no-scroll {
  overflow: hidden;
}

.title {
  font-family: "Comfortaa", sans-serif !important;
  font-weight: 700 !important;
  font-style: normal;
  font-size: calc(1.5rem + 2vw) !important;
  line-height: calc(1.5rem + 2.5vw) !important;
  max-width: 80vw !important;
  letter-spacing: -1px;
}

.title-shadow {
  color: var(--color-titles-shadow) !important;
}

.title-light {
  color: var(--color-titles-light) !important;
}

.text-shadow {
  color: var(--color-text-shadow) !important;
}

.text-light {
  color: var(--color-text-light) !important;
}

.text-light-lighter {
  color: var(--secondary-color-lighter) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-primary-darker {
  color: var(--primary-color-darker) !important;
}

.text-secondary {
  color: var(--secondary-color) !important;
}

.background-shadow {
  background-color: var(--background-shadow) !important;
}

.background-shadow-darker {
  background-color: var(--background-shadow-darker) !important;
}

.background-shadow-lighter {
  background-color: var(--background-shadow-lighter) !important;
}

.background-light {
  background-color: var(--background-light) !important;
}

.background-primary {
  background-color: var(--primary-color) !important;
}

.background-secondary {
  background-color: var(--secondary-color) !important;
}

.background-secondary-light {
  background-color: var(--secondary-color-lighter) !important;
}

.selectable {
  cursor: pointer;
}