@font-face {
  font-family: "ChromeSlab";
  src: url("../assets/fuentes/chrome_slab/ChromeSlab.ttf") format("truetype");
}

:root {
  --color-green-900: #001c04;
  --color-green-800: #002d07;
  --color-green-700: #003d0a;
  --color-green-600: #004e0d;
  --color-green-500: #1a3428;
  --color-green-400: #2d5a35;
  --color-green-300: #3d7a45;

  --color-arena-900: #fff7ee;
  --color-arena-800: #faf0e2;
  --color-arena-700: #f5e8d4;
  --color-arena-600: #efe0c6;
  --color-arena-500: #e8d8b8;
  --color-arena-400: #dfd0aa;
  --color-arena-300: #d4c49a;

  --color-oro-900: #aa750c;
  --color-oro-800: #c48e2a;
  --color-oro-700: #d9a43a;
  --color-oro-600: #8a5c08;

  --color-bg: var(--color-green-900);
  --color-text: var(--color-arena-900);
  --color-gold: var(--color-oro-900);
  --color-gold-light: var(--color-oro-800);
  --color-text-dim: rgba(255, 247, 238, 0.5);

  --color-black: #000000;
  --color-overlay: rgba(0, 0, 0, 0.75);

  --font-display: "Metropolis", sans-serif;
  --font-heading: "ChromeSlab", serif;
  --fw-black: 900;
  --fw-extrabold: 800;
  --fw-bold: 700;
  --fw-light: 300;

  --color-cream: var(--color-arena-900);

  --color-canvas-bg: #080907;

  --radius-none: 0px;
}

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

body,
html {
  width: 100%;
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  overflow-x: hidden;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold) var(--color-green-800);
}

body {
  overflow-x: clip;
}

body.loading {
  overflow: hidden;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-green-800);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gold);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-light);
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
}

.logo {
  font-family: var(--font-heading);
}