@charset "utf-8";
/* CSS Document */

body, html {                
    height: 100%;           
}                           
body{
    font-size: 1em;
    margin: 0%; 
   background-image: url("img/Balanza.jpg");   
    height: 100%;                                
    background-position: center;                 
    background-repeat: no-repeat;                
    background-size: contain;                     
}                                             

.salir, .titulo, {
    /* Para poderlos alinear */
    float: left;
    /* Para que los elementos no tiendan a expandirse y pierdan el tamaño que se les dio en un inicio*/
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
.titulo{
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    text-shadow: 2px 2px 5px yellow;
    font-weight: bold;
    }



@media screen and (min-width: 1024px) {  
       .titulo{
        text-align: center;
        width: 90%;
        margin: 10% 5% 20% 5%;
        font-size: 2.5em;
        }
    .salir{
        width: 14%;
         margin: 0% 43%;
        height: 40px;
        }
  } 

@media screen and (min-width: 780px) and (max-width:1024px){
      .titulo{
         text-align: center;
        width: 90%;
        margin: 20% 5% 15% 5%;
        font-size: 40px;
        }
     .salir{
        width: 18%;
         margin: 0% 41%;
        height: 38px;
        }

}
@media screen and (min-width: 480px) and (max-width:780px){
      .titulo{
        text-align: center;
        width: 90%;
        margin: 30% 5% 20% 5%;
        font-size: 35px;
        }
     .salir{
        width: 24%;
         margin: 0% 38%;
        height: 35px;
        }

}

@media screen and (max-width:480px){ 
      .titulo{
        text-align: center;
        width: 90%;
        margin: 35% 5% 25% 5%;
        font-size: 35px;
        }
     .salir{
        width: 30%;
         margin: 0% 35%;
        height: 30px;
        }

}