* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

* {
  scroll-behavior: smooth;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
  text-decoration: none;
  color: #01b8f1;
}

:root {
  --color-primario: #35363a;
  --color-secundario: #01b8f1;
  --color-black: #1a141f;
  --color-hint-text: #4b3a5a;
  --color-border: #aba7af;
  --color-disabled: #d4d2d5;
  --color-spacer: #d9d1e0;
  --color-spacer-light: #e5e0eb;
  --color-bg-light-grey: #f5f3f7;
  --color-white: #ffffff;
}

body {
  width: 100%;
  min-height: 100vh;
  background: var(--color-bg-light-grey);
}

#root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

h1 {
  font: 500 2.75rem / 1.28 'Poppins';
  color: var(--color-black);
}

h2 {
  font: 500 1.875rem / 1.2 'Poppins';
  color: var(--color-secundario);
}

h3 {
  font: 600 1.375rem / 1.24 'Poppins';
  color: var(--texto-principal);
}

h4 {
  font: 700 1.125rem / 1.32 'Poppins';
  color: var(--texto-secundario);
}

p {
  font: 400 1.375rem / 1.44 'Poppins';
  color: var(--texto-principal);
}

span,
label {
  font: 300 1.125rem / 1.32 'Poppins';
  color: var(--texto-secundario);
}

input,
textarea {
  font: 600 1rem / 1.32 'Poppins';
  color: var(--borde-medio);
}

*::-webkit-scrollbar {
  width: 4px;
  -webkit-appearance: none;
}

*::-webkit-scrollbar-thumb {
  background-color: #7979799e;
  border-radius: 50px;
  border: 0px solid var(--color-spacer-light);
}

@media (max-width: 1200px) {
  h1 {
    font: 500 2rem / 1.24 'Poppins';
  }

  h2 {
    font: 500 1.5rem / 1.28 'Poppins';
  }

  h3 {
    font: 600 1.375rem / 1.24 'Poppins';
  }

  h4 {
    font: 700 1.125rem / 1.32 'Poppins';
  }
}

@media (max-width: 992px) {
  h1 {
    font: 600 1.8125rem / 1.24 'Poppins';
  }

  h2 {
    font: 600 1.375rem / 1.28 'Poppins';
  }

  h3 {
    font: 700 1.1875rem / 1.28 'Poppins';
  }

  h4 {
    font: 700 1rem / 1.28 'Poppins';
  }
}

@media (max-width: 768px) {
  h1 {
    font: 600 1.625rem / 1.24 'Poppins';
  }

  h2 {
    font: 600 1.25rem / 1.28 'Poppins';
  }

  h3 {
    font: 700 1.1875rem / 1.28 'Poppins';
  }

  h4 {
    font: 700 1rem / 1.28 'Poppins';
  }
}

@media (max-width: 576px) {
  h1 {
    font: 600 1.5rem / 1.24 'Poppins';
  }

  h2 {
    font: 600 1.25rem / 1.28 'Poppins';
  }

  h3 {
    font: 700 1rem / 1.28 'Poppins';
  }

  h4 {
    font: 700 0.875rem / 1.28 'Poppins';
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primario: #09a6df;
    --color-secundario: #35363a;
    --color-black: #1a141f;
    --color-hint-text: #4b3a5a;
    --color-border: #aba7af;
    --color-disabled: #d4d2d5;
    --color-spacer: #d9d1e0;
    --color-spacer-light: #e5e0eb;
    --color-bg-light-grey: #f5f3f7;
    --color-white: #ffffff;
  }
}

.fi {
  line-height: 0 !important;
}