@charset "utf-8";

@font-face {
    font-family: 'roboto_slabbold';
    src: url('robotoslab_bold-webfont.woff2') format('woff2'),
         url('robotoslab_bold-webfont.woff') format('woff'),
         url('robotoslab_bold-webfont.ttf') format('truetype'),
         url('robotoslab_bold-webfont.svg#roboto_slabbold') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'roboto_slablight';
    src: url('robotoslab_light-webfont.woff2') format('woff2'),
         url('robotoslab_light-webfont.woff') format('woff'),
         url('robotoslab_light-webfont.ttf') format('truetype'),
         url('robotoslab_light-webfont.svg#roboto_slablight') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*primero mobile*/
* {
    /* selector universal */
    box-sizing: border-box;
    /* para que el ancho de todas las etiquetas
        tomen como referencia el borde de las mismas
        y NO el contenido, como viene por defecto  */
    list-style: none;
    margin: 0;
    padding: 0;
}


html {
        font-size: 10px;
}

body{
        background-color: #FFFFFF;  
       
}

#pagina{
        display: flex;  
        flex-direction: column;
        width: 350px;
        margin:auto;
        text-align: left;
        text-decoration: none;
        background-color: #F0504C; 
        
  
}

header{
        
    text-align: center;
}
/*---------------icono caretas--------------*/
#icono {
    padding-top: 5rem;
    padding-bottom: 3rem;
    justify-content:space-around;  
   
}

#boton {
    padding-top: 3rem;
    padding-bottom: 3rem;
    justify-content:space-around;   
}

h1 { 
    font-family: 'roboto_slabbold';
    font-size: 2.5rem;
    text-align: center;
    color:#FFFFFF;
}

h2 { 
    font-family: 'roboto_slabbold';
    font-size: 1.5rem;
    text-align: center;
    color:#FFFFFF;
}

h3 {
    font-family:  'roboto_slabbold';
    color: #69C1C1;
    font-size: 2rem;
    text-align: center;
    text-decoration: none;

    border: 0.5rem solid #C62C2C;
    border-radius: 1rem;
    justify-content:space-around;
}

h4 { 
    font-family: 'roboto_slabbold';
    font-size: 1.5rem;
    text-align: center;
    color:#69C1C1;
}

main {
   font-family: 'roboto_slablight';
   font-size: 1rem;
   color: #FFFFFF; 
   text-align: center;
   margin:1rem;
}

footer a {     
    font-family:  'roboto_slablight';
    color: #69C1C1;
    font-size: 2rem;
    text-align: center;
    text-decoration: none;
    
    
}

footer {
     align-content: center;
     text-align: center;
     margin: 4rem 4rem 1rem ;
}

#espacio {
     padding-bottom: 13rem 
}

#espaciochico {
     padding-bottom: 2rem 
}

#espaciochicoarriba {
     padding-top: 2rem 
}

form input { 
    
    width: 250px;
    display: inline-block;
    align-content: center;
    align-items: center;
    text-align: left;

    padding: 0.5rem;
    margin-top: 0.5rem;
   

    background-color: whitesmoke;
    border: 1px solid:#062b7e;
    border-radius: 5px;
    box-shadow: none;
    text-shadow: none;
    
    font-family: 'roboto_slablight' ;
    font-weight: 700;
    font-size: 1.8rem;
    color: #151515;
   }