@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Gelasio:wght@400;600&family=Lato:wght@400;700&display=swap');

* {
	Box-sizing: border-box;
}

:root {
	--color-titulos:#000000;
	--color-subtitulos: #EF84A8;
	--color-subtitulos-2: #F6A2BE;

    --color-margenes:#54899F;
    --color-fondo: #FFFFFF;
    --tipo-titulos: 'Calistoga', italic; 
	--tipo-subtitulos: 'Lato', sans-serif;
	--tipo-textos: 'Gelasio', serif;
}

body {
	font-family: var(--tipo-textos);
	margin: 0;
    background-color: var(--color-fondo);
    Min-height: -webkit-fill-available;
    Display: flex;
    Flex-direction: column; 
    Justify-content: space-between;
}

main {
    background-color: #EFE2D9;
}

 /* dgpc logo*/

#logo {
    display: block;
    width: 5em;
    margin-left: 1.25rem;
/* ajusta el tamaño de la imagen al ancho de la pagina*/
}

header .contenedora {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.hamburger {
    background: none;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 45px;
    padding: 5px 15px 0px 15px;
    color: var(--color-1);
    border: 0;
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    z-index: 10000000000000;
}

.cross {
    background: none;
    position: absolute;
    top: 0px;
    right: 0;
    padding: 7px 15px 0px 15px;
    color: var(--color-1);
    border: 0;
    font-size: 3em;
    line-height: 65px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    z-index: 10000000000000;
}

.menu {
    z-index: 1000000;
    font-size: 0.8em;
    width: 50%;
    background: var(--color-margenes);
    position: absolute;
    text-align: center;
    font-size: 12px;
    margin-left: 47.5%;
    margin-top: 57%;
}

.menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}

.menu li {
    display: block;
    padding: 15px 0 15px 0;
    border-bottom: #dddddd 1px solid;
    font-family: var(--tipo-subtitulos);
}

.menu li:hover {
    display: block;
    background: #ffffff;
    padding: 15px 0 15px 0;
    border-bottom: #dddddd 1px solid;
}

.menu ul li a {
    text-decoration: none;
    margin: 0px;
    color: #666;
}

.menu ul li a:hover {
    color: #666;
    text-decoration: none;
}

.menu a {
    text-decoration: none;
    color: var(--color-1);
}

.menu a:hover {
    text-decoration: none;
    color: var(--color-2);
}

.glyphicon-home {
    color: white;
    font-size: 1.5em;
    margin-top: 5px;
    margin: 0 auto;
}

figure {
    margin-block: 0px;
    margin-inline: 0px;
    display: flex;
    position: relative;
    align-items: center;
}

figcaption {
    font-family: var(--tipo-titulos);
    color: #414042;
    font-size: 40pt;
    padding-inline-start: 0.5em;
    position: absolute;
    z-index: 9000;
}

 /* foto*/

.fotoperfil{
    margin-left: 6rem;
    margin-top: 1.5rem;
    margin-right: 2rem;
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

 /* Lucila Mundani Vegega*/
.alumna h1 {
    color: #414042;
	font-family: var(--tipo-titulos);
    margin-left: 2rem;
    margin-right: 2rem;
    display: flex;
    justify-content: center;
}

.sobremi,
.carrera,
.enlaces,
.equipo,
.webapp,
.datosacademicos {
    margin-inline-start: 28px;
    margin-inline-end: 28px;
    margin-block-end: 1em;
}

.alumna h2 {
    border-block-start: 2px solid #414042;
    padding-top: 0.9rem;
    font-family: var(--tipo-subtitulos);
    color: var(--color-margenes);
    margin-inline-start: 0px;

}

 /* soy estudiante de...*/
.alumna p {
    font-family: var(--tipo-textos);
}

.carrera h2,
.enlaces h2,
.equipo h2,
.webapp h2,
.tituloda h3 {
    font-family: var(--tipo-subtitulos);
    color: var(--color-margenes);
    margin-inline-start: 0px;
}

.carrera img {
    width: 300px;
}

li {
    font-family: var(--tipo-textos)
}

.carrera h4 {
    font-family: var(--tipo-subtitulos);
    color: var(--color-margenes);
}

ul,
h4 {
    padding-inline-start: 0px;
}

.behance,
.instagram {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 2px solid var(--color-margenes);
}

.behance,
.instagram {
    padding-inline-start: .5em;
    margin-inline-end: 63%;
}

.behance svg,
.instagram svg {
    fill: var(--color-margenes)
}

.behance a,
.instagram a {
    margin-inline-start: .5em;
    font-family: var(--tipo-subtitulos);
    color: var(--color-margenes);
    padding-block: .5em;
}

.instagram {
    margin-block-start: 1em;
}

.companeras {
    display: flex;
    gap: 2em;
}

.ayelen img {
    width: 30%;
}

.aixa img {
    width: 36%;
}

.aixa, .ayelen {
        color: var(--color-5);
        display: flex;
        align-items: center;
        margin-bottom: 1em;
}

.aixa a,
.ayelen a {
    margin-inline-start: .5em;
    font-family: var(--tipo-subtitulos);
    color: var(--color-margenes);
}

.ui {
    border: 2px solid var(--color-margenes);
    margin-inline-end: 63%;
    padding-block: .3em;
    padding-inline-start: .5em;
}

.ui a {
    color: var(--color-margenes);
    font-family: var(--tipo-subtitulos);
}

.tituloda h3 {
    margin-inline-start: 28px;
    margin-inline-end: 28px;
    margin-block-start: 2em;
    border-top: 2px solid #414042;
    padding-top: 0.9rem;

}

.datosacademicos {
    font-family: var(--tipo-textos);
    color: #414042;
}

.datosacademicos h5 {
margin-block-end: 0.3em;
}

.datosacademicos ul {
    margin-block-end: 1em;
    }



header,
footer {
    background-color: var(--color-margenes);
    padding: 0.6rem;
     /* color tipografia*/
    color: var(--color-fondo);
}




 /* links enlace y equipo*/

a {
    text-decoration: none; 
 /* esto sirve para cancelar los estilos predeterminados*/

 }




 
ul {  
	list-style: none;
}

    
footer p{
    margin-top: 0.6rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

/*TABLETAS*/

@media (min-width: 768px) {

    html {
        background-color: #EFE2D9;
    }
    header,
    footer {
    background-color: var(--color-margenes);
    padding: 1rem;
    color: var(--color-fondo);
    margin-left: -3rem;
    margin-right: -3rem;
    }

    body {
        margin-left: 2.5rem;
        margin-right: 2.5rem;
    }

    .menu {
        margin-top: 30.6%;
        margin-left: 28em;
    }

    .contenedora nav {
        margin-right:4rem
    }

    #logo {
        margin-left:4rem;
    }

    .contenedora img {
        width: 110%;
    }

    picture img {
        width: 100%;
    }

    .textoalumna {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-bottom: 1em;
        margin-right: 2rem;
        }

    .fotoperfil {
        width: 20%;
    }
    .aixa, .ayelen {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-bottom: 1em;
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .ayelen img {
        width: 40%;
        display: flex;
        justify-content: center;
    }

    .aixa img {
        width: 49%;
        display: flex;
        justify-content: center;
    }

    .equipo a {
        margin-top: 0.5rem;
        text-align: left;
    }
}

/*PANTALLA*/

@media (min-width: 1200px) {
    header,
    footer {
    background-color: var(--color-margenes);
    padding: 1rem;
    color: var(--color-fondo);
    margin-left: -8rem;
    margin-right: -8rem;
    }

    body {
        margin-left: 7rem;
        margin-right: 7rem;
    }
    .contenedora nav {
        margin-right:9rem
    }

    .menu {
        margin-top: 21%;
        margin-left: 40.7em;
    }

    .hamburger,
    .cross {
        margin-inline-end:8%;
        justify-content: center;
    }

    #logo {
        margin-left:9rem;
    }

    .contenedora img {
        width: 120%;
    }

    .fotoperfil {
        margin-inline-start: 28px;
    }

    .textoalumna {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    margin-bottom: 1em;
    margin-right: 2rem;
    }

    .ui,
    .behance, 
    .instagram  {
        margin-inline-end: 85%;
    }

    .materiasaprobadas {
        display: flex;
        gap: 4em;
    }
}

/*Propuesta*/

.propuestas h1 {
    color: var(--color-titulos);
	font-family: var(--tipo-titulos);
    margin-left: 2rem;
    margin-right: 2rem;
    display: flex;
    justify-content: center;
    border-block-end: 2px solid var(--color-titulos);
    padding-bottom: 1rem;
}

.propuestas h2 {
    margin-inline-start: 22px;
    font-family: var(--tipo-subtitulos);
    color: #E99E4B;
}

.mobile, 
.desktop, .tablet {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 1em;
    margin-right: 2rem;
}

.mobile img {
    width:20%;
}
.desktop img {
    width: 30%;
}
.tablet img {
    width: 30%;
}