/* Para el googlefonts: */
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');



@media screen and (min-width:768px){


    
    body{
        text-align:center;
        display:flex;
        flex-direction:column;
        background:rgb(214, 255, 255);
        margin: 0;
        font-family:'lato',sans-serif;
        font-size:100%;
        list-style:none;
        flex-direction:column;
        min-height: 100vh;
        justify-content:space-between;
        text-decoration:none;
        
    }
    
    h1{
        color: rgb(40,100,100);
        font-size: 1.5em;
        line-height:1.3em;}

    h2,h3,h4,h5{
        color: darkslategrey;
        font-size: 1em;}

    #logo{
        background-color:rgb(231, 231, 231);
        border-radius:.35em;
        padding:.35rem;
        width:8em;
    }

    header, footer{
        margin: 0;
        border:0;
        justify-content:space-between;
        align-items:center;
        background-color:rgb(37, 37, 37);
        box-sizing: border-box;
        font-size:100%;
        list-style:none;}
        
    footer{
        margin-top:auto;
    }
    
    header a{
        color:rgb(90,250,250);
        text-decoration:none;}

    header nav ul li a{
    border-radius:.25em;
    color:lightblue;
    font-weight:bold;
    padding:.25em .5em;
    text-align:center;
    display:block;
    text-transform: uppercase;
    font-family: "poppins", sans-seriff;
    }

    .navigation ul {
        margin:0;
        padding:0;
        list-style:none;
        display:flex;
        flex-wrap:wrap;
        justify-content:flex-end;
        list-style:none;
        text-decoration:none;}

    .navigation ul li{
        display:inline-block;}
    .navigation ul li a{
        display:block;
        padding:0.5em 1rem;}

    .usuario{
        box-sizing:border-box;
        display:flex;
        justify-content:center;
        text-align:center;
        background-color:rgb(160, 160, 160);
        border-radius:.99em;
        flex-direction:column;
        margin:2em 0 0 0;
        padding:2em;
    }

    .usuario img{
        max-width: 20em;
        border-radius:2em;
        margin-left:auto;
        margin-right:auto;
    }

    .contenedor{
        background-color:rgb(37, 37, 37);
        max-width:300px;
        padding:1rem;
        margin:1em 0 0 0;
        width:85%;
        max-width:50rem;
        margin:0 auto;
        color:white;
        justify-content:space-between;
        align-items:center;
        display:flex;
        justify-content: space-around;
        text-decoration:none;
    }

    .vinculos{
        display:flex;
        flex-direction: column;
        padding:1rem;
    }

    .vinculos a{
        text-decoration:none;
        color:inherit;
    }

    .Datos{
        color:white;
        background-color:rgb(136, 203, 206);
        flex-direction:column;
        display:flex;
        padding:1rem;
        border-radius:.99em;
    }

    .Bocet{
        background-color:rgb(37, 37, 37);
        display:flex;
        flex-direction:column;
        justify-content:center;
        color:white;
        max-width:50%;
        margin-left:auto;
        margin-right:auto;
        width:40%;
}

#boceto{
    max-width:60%;
    height:auto;
}

}

@media screen and (max-width: 992px){
    body{
        text-align:center;
        display:flex;
        flex-direction:column;
        background:rgb(214, 255, 255);
        margin: 0;
        font-family:'lato',sans-serif;
        font-size:100%;
        list-style:none;
        flex-direction:column;
        min-height: 100vh;
        justify-content:space-between;
        box-sizing:border-box;
        text-decoration:none;
    }
    
    h1{
        color: rgb(40,100,100);
        font-size: 1.5em;
        line-height:1.3em;}

    h2,h3,h4,h5{
        color: darkslategrey;
        font-size: 1em;}

    #logo{
        background-color:rgb(231, 231, 231);
        border-radius:.35em;
        padding:.35rem;
        width:8em;
    }

    header, footer{
        margin: 0;
        border:0;
        display:flex;
        justify-content:space-between;
        align-items:center;
        background-color:rgb(37, 37, 37);
        box-sizing: border-box;
        font-size:100%;
        list-style:none;}


    header nav ul li a{
    border-radius:.25em;
    color:lightblue;
    font-weight:bold;
    padding:.25em .5em;
    text-align:center;
    display:block;
    text-transform: uppercase;
    font-family: "poppins", sans-seriff;
    }

    .navigation ul {
        margin:0;
        padding:0;
        list-style:none;
        display:flex;
        flex-wrap:wrap;
        justify-content:flex-end;
        list-style:none;
        text-decoration:none;}

    .navigation ul li{
        display:inline-block;}
    .navigation ul li a{
        display:block;
        padding:0.5em 1rem;}

    .usuario{
        box-sizing:border-box;
        display:flex;
        justify-content:center;
        text-align:Center;
        background-color:rgb(160, 160, 160);
        border-radius:.99em;
        flex-direction:column;
        margin:2em 0 0 0;
        padding:2em;
    }

    .usuario img{
        max-width: 20em;
        border-radius:2em;
        margin-left:auto;
        margin-right:auto;
    }

    .contenedor{
        background-color:rgb(37, 37, 37);
        padding:1rem;
        margin:1em 0 0 0;
        width:85%;
        max-width:50rem;
        margin:0 auto;
        color:white;
        justify-content:space-between;
        align-items:center;
        display:flex;
        justify-content: space-around;
        text-decoration:none;
    }

    .vinculos{
        display:flex;
        flex-direction: column;
        padding:1rem;
    }

    .vinculos a{
        text-decoration:none;
        color:inherit;
    }

    .Datos{
        color:white;
        background-color:rgb(136, 203, 206);
        flex-direction:column;
        display:flex;
        margin: 0 auto;
        padding:1rem;

    }

    .Bocet{
        background-color:rgb(37, 37, 37);
        display:block;
        flex-direction:column;
        justify-content:center;
        color:white;
        border-radius:.99em;

    }

    #boceto{
        flex-wrap:flex;
        height:auto;
        max-width:20em;

    }

}