html {
 /* Indica los temas del sistema operativo que son soportados. */
 color-scheme: light dark;
 --tabWidth: 3.75rem;
 --anchoNav: 22.5rem;
}

body>section,
form>section {
 max-width: 600px;
 margin-left: auto;
 margin-right: auto;
}

/* Fonts utilizados */

/* Definición de Roboto Variable (Normal) */
@font-face {
 font-family: 'Roboto';
 src: url('../fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
 /* Rango del eje de peso (wght) */
 font-weight: 100 900;
 /* Rango del eje de anchura (wdth) */
 font-stretch: 75% 100%;
 font-style: normal;
 /* Mejora el rendimiento de carga de texto */
 font-display: swap;
}

/* Definición de Roboto Variable (Itálica) */
@font-face {
 font-family: 'Roboto';
 src: url('../fonts/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
 font-weight: 100 900;
 font-stretch: 75% 100%;
 font-style: italic;
 font-display: swap;
}

html {
 --Font: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
 --colIntIos: white;
 --colIntIosOnBk: #2acc2a;
 --colIntIosOnBkFc: #1bbb1b;
 --colIntIosOffBk: #dbdbdb;
 --colIntIosOffBkFc: #BDBDBD;
 /* Plain typeface */
 --md-ref-typeface-plain: var(--Font);
 /* Brand typeface */
 --md-ref-typeface-brand: var(--Font);
 --md-sys-typescale-label-large-weight-prominent:
  var(--md-ref-typeface-weight-bold);
 --md-box_shadow_level4:
  0 var(--md-sys-elevation-level4) var(--md-sys-elevation-level4) var(--md-sys-color-shadow);
 --md-box_shadow_level3:
  0 var(--md-sys-elevation-level3) var(--md-sys-elevation-level3) var(--md-sys-color-shadow);
 --md-box_shadow_level2:
  0 var(--md-sys-elevation-level2) var(--md-sys-elevation-level2) var(--md-sys-color-shadow);
 --md-box_shadow_level1:
  0 var(--md-sys-elevation-level1) var(--md-sys-elevation-level1) var(--md-sys-color-shadow);
 --md-box_shadow_level0: none;
 --iconSize: 1.5rem;
 --avatarSize: 2.5rem;
 --imageSize: 3.5rem;
 --videoWidth: 7.125rem;
 --videoHeight: 4rem;
 --md-sys-state-focus-indicator-outer-offset: 0.125rem;
 --md-sys-state-focus-indicator-thickness: 0.1875rem;
 /* Pressed state layer opacity */
 --state-pressed-transparency-percentage: 84%;
 /* Focus state layer opacity */
 --state-focus-transparency-percentage: 88%;
 /* Hover state layer opacity */
 --state-hover-transparency-percentage: 92%;
 background-color: var(--md-sys-color-background);
}

/* Quita un borde rojo que coloca Firefox. */
:-moz-ui-invalid {
 box-shadow: none;
}

body {
 margin: 0;
 font-family: var(--md-sys-typescale-body-large-font);
 font-weight: var(--md-sys-typescale-body-large-weight);
 font-size: var(--md-sys-typescale-body-large-size);
 font-style: var(--md-sys-typescale-body-large-font-style);
 letter-spacing: var(--md-sys-typescale-body-large-tracking);
 line-height: var(--md-sys-typescale-body-large-line-height);
 text-transform: var(--md-sys-typescale-body-large-text-transform);
 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
 color: var(--md-sys-color-on-background);
 background-color: var(--md-sys-color-background);
}

p {
 margin: 1rem;
}

a {
 color: var(--md-sys-color-on-background);
}

@media (prefers-color-scheme: light) {
 html {
  --md-riple-color: #00000020;
 }
}

@media (prefers-color-scheme: dark) {
 html {
  --md-riple-color: #ffffff40;
 }
}

@keyframes md-ripple {

 from {
  background-size: 100%;
 }

 to {
  background-size: 15000%;
 }

}