@charset "utf-8";
/*Mobile First*/


@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

/*html{
 height: -webkit-fill-available;   
} */   
    
body{
    background-image:linear-gradient(#c70054, #0a0065);
    font-family: 'Rubik' , sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-around;
    min-height: -webkit-fill-available;
    
}
        
h1{
    font-size: 4em;
}
    
h1, h2{ 
    color:beige;
    font-family: 'Rubik', sans-serif;
    text-align: center;
    margin: 0.5em;
    
}

h2 {
    font-size: 2em;
    }
h3 {
    color: darkorange;
    font-family: 'Rubik', sans-serif;
    text-align: center;
    margin: 1em;
    font-size: 1.7em;
    box-sizing: content-box;
}

img {
    width: 100%;
}
    
#fotodeperfil {
    width: 20em;
    border-color: darkorange;
    border-radius: 0em 0em 1em 1em;
    border-style: solid;
    border-width: 1.2em;
    margin: auto;
}

header .encabezado {
    background-color: darkorange;
    font-family: 'Rubik', sans-serif;
    text-align: center;
    color: beige;
   display: flex;
    justify-content: space-between;
    align-items: center;

}

header {
    display: block;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}    


.boceto {
    align-content: center;
}

ul li { 
    list-style: none;
    
}

    
.columnas{
    border: solid;
    border-color:beige;
    border-radius: 1em;
    border-width: 0.3em;
    width: 20em; 
    margin: auto;
    font-size: 1.1em;
}    

.tercero{ 
    font-family:'Rubik' , sans-serif;
    text-align: center;
    color: beige;
    margin: 0.5em;

}



main nav ul li a {
    color: darkorange;
 }
    
header nav ul li a {
    color: beige;
    font-size: 1em;
    width: 100%;
    height: 100%;
    font-weight:bold;
 }
    
footer{
    font-family: 'Rubik' , sans-serif;
    color: beige;
    font-size: 0.7em;
    margin: 1em;
    text-align: center

    }

#comofooter{
    font-family: 'Rubik' , sans-serif;
    color: beige;
    text-align: center;
    }

#dgpc{
    width: 14%;
    margin-left: 1em;
}

header ul{ 
    display: flex;
    max-width: 40em;
    padding: 1em 0em 1em 0em;
    }

header ul li{
    width: 4em;
    margin-right: .6em;
    height: 2em;
    margin-left: em;
    margin-top: 0.7em;
    display: flex;
    
    
    }

.agustinavota{
    margin: auto;
    text-align: center;
    max-width: 20em;


}

nav ul img {
    width: 100%;
    margin: 0;
    padding: 0;
    align-items: flex-start;
}

.integrantes{
    display: flex;
    margin-left: 3em;
    margin-bottom: 1em;
    justify-content: flex-start;

    
}

.boceto{
}

@media screen and (min-width: 600px){
    #cajas{
        flex-direction: column;
    }
     .integrantes{
        justify-content: space-around;
        margin-right: 3em;
    }
    
    #dgpc{

    margin-left: 4em;
}
    header nav ul li a {
    color: beige;
    width: 50%;
    height: 50%;
    font-weight:bold;
    margin-right: 3em;    
 }
    header ul li{
    width: 2em;
    margin-right: 4em;
    height: 2em;
    margin-top: 0.7em;
    display: flex;
    
    
    }
    
}

.textos{
    display: flex;
    flex-direction: column;
    margin-left: 1em;
    margin-top: 1em;
    font-size: 1.2em;

}

p{
    color: beige;
    font-size: 1em;
}


@media screen and (min-width: 768px){
   .columnas{
    border: solid;
    border-color:beige;
    border-radius: 1em;
    border-width: 0.3em;
    width: 16em; 
    margin: auto;
    font-size: 1.1em;
    
} 
    .cajaborde{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap:wrap; 
        align-items: flex-end;
    }
    
    h2{
        margin-top: 1em;
    }
    
    h2{
        justify-content: flex-start;

    }
 .integrantes{
        justify-content: space-around;
        margin-right: 3em;
    
    }

    header nav ul li a {
    color: beige;
    font-size: 1.3em;
    width: 50%;
    height: 50%;
    font-weight:bold;
    margin-right: 3em;    
 }
    header ul li{
    width: 4em;
    margin-right: 3em;
    height: 2em;
    margin-left: em;
    margin-top: 0.7em;
    display: flex;
        }
    #dgpc{
    width: 14%;
    margin-left: 2em;
}
}

@media screen and (min-width: 992px) {
    .columnas{
    border: solid;    
    border-color:beige;
    border-radius: 1em;
    border-width: 0.3em;
    width: 16em; 
    margin: auto;
    font-size: 1.1em;
    margin-right: 1em;
    }
    .agustinavota{
        display: flex;
        margin-bottom: 20px;
        justify-content: center;
        align-items: center;
        max-width: 80em;
        }
    #fotodeperfil{
        margin-left: 3em;
    }
    h1{
        margin-right: 2em;
        font-size: 4em;
    }
    
    #dgpc{
    width: 8%;
    margin-left: 4em;
}
    header nav ul li a {
    color: beige;
    font-size: 1.5em;
    width: 50%;
    height: 50%;
    font-weight:bold;
    margin-right: 3em;    
 }
    header ul li{
    width: 4em;
    margin-right: 4em;
    height: 2em;
    margin-left: em;
    margin-top: 0.7em;
    display: flex;
    
    
    }
    
    .integrantes{
        justify-content: space-around;
        margin-right: 2em;
        margin-left: 6em;
        padding-right: .3em;
    }
    
}




@media only screen and (min-width: 1200px) {
    .columnas{
    border: solid;    
    border-color:beige;
    border-radius: 1em;
    border-width: 0.3em;
    width: 16em; 
    margin: auto;
    font-size: 1.1em;
    }
    .agustinavota{
        display: flex;
        margin-bottom: 20px;
        justify-content: center;
        align-items: center;
        max-width: 80em;
        }
    #fotodeperfil{
        margin-left: 3em;
    }
    h1{
        margin-right: 2.5em;
        font-size: 4.7em;
    }
    
    #dgpc{
    width: 8%;
    margin-left: 4em;
}
    header nav ul li a {
    color: beige;
    font-size: 1.5em;
    width: 50%;
    height: 50%;
    font-weight:bold;
    margin-right: 3em;    
 }
    header ul li{
    width: 4em;
    margin-right: 4em;
    height: 2em;
    margin-left: em;
    margin-top: 0.7em;
    display: flex;
    
    
    }
    
    .integrantes{
        justify-content: space-around;
        margin-right: 2em;
        margin-left: 5em;
    }
    
}


#cajas{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: auto;
    margin-top: 1em;
    flex-direction: column;
}

.cajasinteg{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0;
    padding: 0;
}