body, html {
    height: 100%;
    margin: 0;    
    font-family: Arial, sans-serif;
}

.contenedor {
    display: flex;
    justify-content: center; /* centrado horizontal */
    align-items: center;     /* centrado vertical */
}

.caja {
    padding: 20px;
    border-radius: 8px;
}

* {box-sizing: border-box}

/* borde del form */
form {
  border: 3px solid #333;
   border-radius: 8px;
}

/* Agregar rellenos a los contenedores*/
.container {
  padding: 16px;
}

/* hacer que los input completen el espacio del area */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Reemplazar los estilos predeterminados de hr*/
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

/* Establecer un estilo para el botón enviar/registrar */
.registerbtn {
  background-color: #333;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.registerbtn:hover {
  opacity:1;
}

/* Añadir un color de texto azul a los enlaces */
a {
  color: dodgerblue;
}

/* Establezca un color de fondo gris y centrar el texto de la sección "iniciar sesión" */
.signin {
  background-color: #f1f1f1;
  text-align: center;
}

.cuadro {
    background-color: #f0f0f0;
    border: 2px solid #333;
    border-radius: 10px;
    padding: 20px;
    color: #000;
    font-family: Arial, sans-serif;
  }

  
.link-blanco {
  color: white;
  text-decoration: none; /* Opcional: quita el subrayado */
}

.link-blanco:hover {
  color: #ccc; /* Opcional: cambia el color al pasar el mouse */
}

/* centrar el avatar del login */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

/* formato de la imagen del avatar */
img.avatar {
  width: 40%;
  border-radius: 50%;
}