:root {
 /* --- Colores Principales (Estilo Google) --- */
  --google-blue: #1a73e8;       /* Azul Google (Botones primarios, enlaces, foco) */
  --google-red: #ea4335;        /* Rojo Google (Alertas, errores, destructivo) */
  --google-yellow: #fbbc05;     /* Amarillo Google (Advertencias, destacados, estrellas) */
  --google-green: #34a853;      /* Verde Google (Éxito, validaciones, positivo) */

  /* --- Variantes de Interacción --- */
  --google-blue-hover: #1557b0; /* Azul oscuro para estados hover */
  --google-blue-light: #e8f0fe; /* Fondo azul claro (Alertas informativas o elementos activos) */

  /* --- Neutros para lo Cotidiano (Fondos y Textos) --- */
  --bg-primary: #ffffff;        /* Fondo principal de la página */
  --bg-secondary: #f8f9fa;      /* Fondo secundario (Tarjetas, barras laterales, inputs) */
  --text-main: #202124;         /* Texto principal (Alta legibilidad, casi negro) */
  --text-muted: #5f6368;        /* Texto secundario o explicativo (Gris oscuro) */
  --border-color: #dadce0;      /* Bordes suaves de separación, tablas o tarjetas */
}

* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

header {
    color: var(--bg-primary);
    background-color: var(--google-blue);
    width: auto;
    padding: 5px;
}

form {
    color:var(--google-blue-light);
    background-color: var(--text-muted);
    border-color: var(--border-color);
    display: inline-block;
    margin: 150px auto;
    width: 750px;
    padding: 17px 20px 20px 20px;
    border-radius: 5px;

}

h2{
    font-size: 2em;
    color: var(--bg-primary);
}


p a {
    color: var(--color3);
    text-decoration: none;
    font-size: 1.15em;
}

form p a:hover {
    color: var(--google-yellow);
}

fieldset{
    margin: 5px;
    border-radius: 5px;
    border: 0px;
}

input{
    margin: 15px;
    border-radius: 15px;
    padding: 17px;
    font-weight: bold;
}

button{
    color:var(--bg-primary);
    background-color: var(--google-blue);
    padding: 10px;
    border: var(--bg-primary);
    border-radius: 5px;

}

@media (orientation:portrait){

form{
    width:auto;
}

}