@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {

  /* Colores */
  --primary-color: hsl(226, 45%, 28%);
  /* Azul */
  --secondary-color: hsl(54, 98%, 58%);
  /* Amarillo */
  --tertiary-color: hsl(55, 56%, 55%);
  /* Amarillo-verdoso */
  --fourth-color: hsl(126, 36%, 29%);
  /* Verde */
  --fourth-color-dark: hsl(126, 52%, 19%);
  /* Verde oscuro */
  --fifth-color: hsl(357, 87%, 40%);
  /* Rojo */

  --color-black: hsl(0, 0%, 15%);

  --background-color: #f7f7f7;

  /* Fuentes */
  --primary-font: 'Open Sans', sans-serif;
  --secondary-font: 'Open Sans', sans-serif;

  /* Tamaños de fuente */
  --extralarge-font-size: 26px;
  --large-font-size: 18px;
  --medium-font-size: 14px;
  --small-font-size: 12px;

  /* Sombras */
  --material-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.025), 0 3px 14px 2px rgba(0, 0, 0, 0.025);
}

@media (max-width: 992px) {
  :root {
    --extralarge-font-size: 22px;
    --large-font-size: 16px;
    --medium-font-size: 13px;
    --small-font-size: 12px;
  }
}

@media (max-width: 768px) {
  :root {
    --extralarge-font-size: 19px;
    --large-font-size: 15px;
    --medium-font-size: 12px;
    --small-font-size: 11px;
  }
}