/*Hoja de estilo pagina login*/
/*Asignamos a todos nuestros elementos */
*{
    /*El padding y el border pasen a formar parte del cálculo del ancho de la caja.*/
    box-sizing:border-box;
}
/*A nuestro body*/
body{
    /*Asignamos un fondo*/
    background-image:url(../img/fondo.jpg);
    /*Declaramos que la imagen de fondo no se repita*/
    background-repeat:no-repeat;
     /*Definimos que la imagen cubra todo el fondo */
    background-size:cover;
    /*Y asignamos el tipo de letra autilizar en todo el contenido*/
    font-family:arial,helvetica,sans-serif;
}

.logo{
    display: block;
    margin: 0 auto;
    max-width: 50%;
    padding: 10px;
}

/*A nuestro formulario*/
.formulario{
    /*Asignamos el color blanco con sus valores RGB y una opacidad de 0.9*/
    background-color:rgba(255,255,255,0.9);
    /*Colocamos un margin auto para centrar*/
    margin:auto;
    /*Modificacmos el margin-top para separarlo del encabezado*/
    margin-top:160px;
    /*Colocamos un padding*/
    padding:3px;
    /*Definimos el ancho y el alto del formulario*/
    width:500px;
    height:300px;
    /*Colocamos max-width para hacer nuestro formulario responsivo al cambio de tamaño*/
    max-width: 100%;
    /*Redondeamos los bordes 5%*/
    border-radius:15px;
    /*Colocamos una sombra a nuestro formulario*/
    box-shadow: 0 0 20px 1px rgba(0,0,0,0.5);
    /*Asignamos una posición relativa*/
    position:relative;

}
/*A nuestro contenedor */
.contenedor{
    /*Centramos nuestro contenedor*/
    margin:0 auto;
    /*Asignamos un tamaño del 90% con respecto a nuestro formulario*/
    width:90%;
}
/*A nuestros inputs*/
.input-contenedor{
    /*Asignamos un espacio inferior entre cada input*/
    margin-bottom:15px;
    /*Colocamos un borde de 1px color gris a nuestros inputs*/

}

/*A nuestros dos tipos de inputs*/
input[type="text"],input[type="password"]{
    /*Colocamos una fuente de 20px*/
    font-size:20px;
    /*Asignamos un tamaño del 100% con respecto al input-contenedor*/
    width:100%;
    /*Asignamos un padding para que las letras queden centradas en el input-contenedor*/
    padding:10px;
    /*Les quitamos los bordes*/
    border-radius: 15px; 

     outline:none;    
}
/*A nuestro button*/
.button{
     display: block;
    margin: 0 auto;
    /*Eliminamos el borde*/
    border:none;
    /*Asignamos un tamaño de 100% con respecto al contenedor*/
    width:50%;
    /*Asignamos el color de fuente a blanco*/
    color:white;
    /*Tamaño de letra de button de 20px*/
    font-size:20px;
    /*Asignamos un color de fondo azul marino*/
    background:#823bf4;
    /*Colocamos un padding arriba, abajo de 15px y izquierda, derecha de 20px;*/
    padding:15px 20px;
    /*Redondeamos los bordes 5px*/
    border-radius:30px;
    /*Cambiamos el cursor cuando nos posicionemos en el button*/
    cursor:pointer;
}
/*Cambiamos el color de nuestro button cuando el cursor este encima*/
.button:hover{
    /*Asignamos el color cadetblue*/
    background:rgb(6, 151, 218);
}
/*A nuestras etiquetas de texto los centramos*/
p,h1,a{
    color: rgb(27, 27, 27);
    text-align:center;
    text-decoration: none;
}