:root{
   /*16px como base del navegador*/
   --texto-xxl-mobile: 1.5rem; /*titulo galerias*/
   --texto-xl-mobile: 1.3rem; /*titulo en proyecto*/
   --texto-l-mobile: 1.125rem; /*navbar, titulo en visor pdf, enlaces en proyectos*/
   --texto-m-mobile: 0.875rem; /*Cuerpo de visor de pdf, cuerpo de visor de proyectos, cuerpo de enlaces en proyectos*/
   --texto-s-mobile: 0.85rem; /*Titulo tarjetas*/
   --texto-xs-mobile: 0.75rem; /*Cuerpo tarjetas, boton tarjetas, texto en tags*/
   --texto-xxs-mobile: 0.625rem; /*texto boton*/

   /* Colores de textos*/
   --color-textoPrincipal: #3a3a3c; /*Texto navbar, titulo de tarjetas, cuerpo de tarjetas, titulos modales, cuerpo modales, menu navbar*/
   --color-textoSecundario: #1C1C1E; /*Texto tags*/
   --color-textoBotones: #F2F2F7; /*Texto en botones*/

   /* Paleta de colores */
   --color-fondoPrincipal: #FFFFFF; /*Color del body, color modal certificados, color modal proyectos*/
   --color-fondoSecundario: #f2f2f7; /*Fondo tarjetas*/
   --color-navbar: #FFFFFF; /*navbar*/
   --color-bordeNavbarButton: #ddd;
   --color-fondoBotones: #2C61D4; /*Boton en tarjetas*/
   --color-fondoTagTecno: #F4F4F4; /*Tag de tecnologias*/
   --color-bordeTagTecno: #484848; /*Tag de tecnologias*/
   --color-fondoTagHerr: #E1E1E1; /*Tag de herramientas*/
   --color-bordeTagHerr: #484848; /*Tag de herramientas*/
   --color-hoverBotones: #ddd; /*Fondo btn menus desplegables*/
   --color-fondoPDFVisor: #4a4a4a; /*Fondo visor de pdf*/
   --color-sombras: #dddddd;
   --color-flecha-dropdwan: invert(0);
   --color-linksIMGs: invert(0);
}

.darkMode {
   /* Colores de textos*/
   --color-textoPrincipal: #EFF2F5; /*Texto navbar, titulo de tarjetas, cuerpo de tarjetas, titulos modales, cuerpo modales, menu navbar*/
   --color-textoSecundario: #1C1C1E; /*Texto tags*/
   --color-textoBotones: #1C1C1E; /*Texto en botones*/

   /* Paleta de colores */
   --color-fondoPrincipal: #1A2027; /*Color del body, color modal certificados, color modal proyectos*/
   --color-fondoSecundario: #27333F; /*Fondo navbar, Fondo tarjetas*/
   --color-navbar: #1A2027; /*navbar*/
   --color-fondoBotones: #8A96E5; /*Boton en tarjetas*/
   --color-fondoTagTecno: #f4f4f4; /*Tag de tecnologias*/
   --color-bordeTagTecno: #484848; /*Tag de tecnologias*/
   --color-fondoTagHerr: #E1E1E1; /*Tag de herramientas*/
   --color-bordeTagHerr: #484848; /*Tag de herramientas*/
   --color-hoverBotones: #1c2834; /*Fondo btn menus desplegables*/
   --color-sombras: #2f2f2f;
   --color-flecha-dropdwan: invert(0.8);
   --color-linksIMGs: invert(1); 
}

.darkMode2 {
   /* Colores de textos*/
   --color-textoPrincipal: #EFF2F5; /*Texto navbar, titulo de tarjetas, cuerpo de tarjetas, titulos modales, cuerpo modales, menu navbar*/
   --color-textoSecundario: #1C1C1E; /*Texto tags*/
   --color-textoBotones: #EFF2F5; /*Texto en botones*/

   /* Paleta de colores */
   --color-fondoPrincipal: #2C2C2E; /*Color del body, color modal certificados, color modal proyectos*/
   --color-fondoSecundario: #3A3A3C; /*Fondo navbar, Fondo tarjetas*/
   --color-navbar: #2C2C2E; /*navbar*/
   --color-fondoBotones: #284FA9; /*Boton en tarjetas*/
   --color-fondoTagTecno: #C7D9E8; /*Tag de tecnologias*/
   --color-bordeTagTecno: #484848; /*Tag de tecnologias*/
   --color-fondoTagHerr: #E1E1E1; /*Tag de herramientas*/
   --color-bordeTagHerr: #484848; /*Tag de herramientas*/
   --color-hoverBotones: #5e5e5e; /*Fondo btn menus desplegables*/
   --color-sombras: #2f2f2f;
   --color-flecha-dropdwan: invert(0.8);
   --color-linksIMGs: invert(1);
}

@media (min-width: 48rem) {
   /*16px como base del navegador*/
   :root {
      --texto-xxl-mobile: 2rem; /*titulo galerias*/
      --texto-xl-mobile: 1.5rem; /*titulo proyecto*/
      --texto-l-mobile: 1.125rem; /*navbar, titulo en visor pdf, titulo en proyecto, enlaces en proyectos*/
      --texto-m-mobile: 0.875rem; /*Cuerpo de visor de pdf, cuerpo de visor de proyectos, cuerpo de enlaces en proyectos*/
      --texto-s-mobile: 1.1875rem; /*Titulo tarjetas*/
      --texto-xs-mobile: 1rem; /*Cuerpo tarjetas, boton tarjetas, texto en tags*/
      --texto-xxs-mobile: 0.875rem; /*texto boton*/   
   }
}

@media (min-width: 64rem) {
   /*16px como base del navegador*/
   :root {
      --texto-xxl-mobile: 2rem; /*titulo galerias*/
      --texto-xl-mobile: 1.5rem; /*titulo proyecto*/
      --texto-l-mobile: 1.125rem; /*navbar, titulo en visor pdf, titulo en proyecto, enlaces en proyectos*/
      --texto-m-mobile: 0.875rem; /*Cuerpo de visor de pdf, cuerpo de visor de proyectos, cuerpo de enlaces en proyectos*/
      --texto-s-mobile: 1.125rem; /*Titulo tarjetas*/
      --texto-xs-mobile: 1rem; /*navbar, Cuerpo tarjetas, boton tarjetas, texto en tags*/
      --texto-xxs-mobile: 0.875rem; /*texto boton*/  

      --color-navbar: #f2f2f7; /*navbar*/
   }

   .darkMode {
      --color-navbar: #27333F; /*navbar*/
   }

   .darkMode2 {
      --color-navbar: #3A3A3C; /*navbar*/
   }
}