/* ============================================
SISTEMA DE COMPONENTES CSS
============================================ */
/* Importar archivos base primero */

@import url("./global.css");
@import url("./theme.css");
@import url("./scroll-bar.css");

@import url("./header.css");
@import url("./footer.css");
@import url("./typography.css");
@import url("./img.css");

@import url("./projects.css");
@import url("./container.css");
@import url("./colors-backgrounds.css");
@import url("./button-links.css");

:root {
  --font-variation-wght: 500;
  --font-variation-wdth: 10;
  --font-variation-slnt: 0;
  --font-variation-GRAD: 0;
  --font-variation-ROND: 0;
}

body {
  font-family: "Google Sans Flex", sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

main {
  position: relative;
  width: 100%;
}

.var-text {
  font-family: "Google Sans Flex", sans-serif;
  font-variation-settings:
    "wght" var(--font-variation-wght),
    "wdth" var(--font-variation-wdth),
    "slnt" var(--font-variation-slnt),
    "GRAD" var(--font-variation-GRAD),
    "ROND" var(--font-variation-ROND);
  will-change: font-variation-settings;
  line-height: 0.85;
  white-space: nowrap;
  width: 100%;
  display: flex;
  overflow: visible;
  position: relative;
  justify-content: space-around;
  align-items: center;
  shape-rendering: optimizespeed;
  text-rendering: optimizeSpeed;
  text-align: center;
}