/* Base Styles */

/* 

  This Stylesheet is only reponsible for the component base style
  ...
  variables,
  reset,
  typografy,
  font,
  ...

*/

:root {
  /* colors */

  /* Neutral */
  --Neutral-900: hsl(243, 96%, 9%);
  --Neutral-800: hsl(243, 27%, 20%);
  --Neutral-700: hsl(243, 23%, 24%);
  --Neutral-600: hsl(243, 23%, 30%);
  --Neutral-300: hsl(240, 6%, 70%);
  --Neutral-200: hsl(250, 6%, 84%);
  --Neutral-0: hsl(0, 0%, 100%);
  /* Orange */
  --Orange-500: hsl(28, 100%, 52%);
  /* Blue */
  --Blue-500: hsl(233, 67%, 56%);
  --Blue-700: hsl(248, 70%, 36%);
  /* gold-cryola */
  --gold-crayola: hsl(38, 61%, 73%);

  /* font weight */
  --fontWeight1: 300;
  --fontWeight2: 500;
  --fontWeight3: 600;
  --fontWeight4: 600i;
  --fontWeight5: 700;

  /* font size */
  --Font-size: 18px;
}

/* ----------- */
/* -->FONTS    */
/* ----------- */

@font-face {
  font-family: "Bricolage_Grotesque";
  src: url("../../assets/fonts/Bricolage_Grotesque/BricolageGrotesque-VariableFont_opsz\,wdth\,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "DM_Sans";
  src: url("../../assets/fonts/DM_Sans/DMSans-VariableFont_opsz\,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "DM_Sans";
  src: url("../../assets/fonts/DM_Sans/DMSans-Italic-VariableFont_opsz\,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
}

/*----------*\
--> RESET
\*----------*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

a,
img,
data,
span,
time,
input,
button,
select,
fieldset,
textarea {
  display: block;
  border: none;
}

img {
  pointer-events: none;
}

a {
  color: inherit;
  text-decoration: none;
}

select {
  background: none;
}

input,
select,
textarea {
  width: 100%;
  outline: none;
}

button {
  cursor: pointer;
}

/* ---------------- */
/* -->BASE STYLES   */
/* ---------------- */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--Neutral-600);
  border-radius: 1rem;
}

::-webkit-scrollbar-corner {
  display: none;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--Neutral-900);
  color: white;
  text-align: center;
  font-family: "DM_Sans", "Bricolage_Grotesque", sans-serif;
  font-weight: 600;
}

[inert] {
  cursor: wait;
}