@charset "utf-8"

/*@import url ('https://fonts.googleapis.com/css2? family = KoHo & display = swap');*/
    
*{
    margin: 0;
    border: 0;
    padding: 0;
    box-sizing: border-box;
}

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

img{
    width: 100%;
}

ul{
    list-style: none;
    margin: .5em 1em 1em 1em;
}

body{
    background-color:#fff7e3;
    min-height: -webkit-fill-available;
}

html{
    height: -webkit-fill-available;
}

header{
    background-color: #ffe0f2;
    padding: .5em 0em .1em 0em;
    /*display: flex;
    flex-direction: column;*/
}

.contenedora{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    border-bottom: solid white .2em;
}

.logos{
    width: 30%;
    display:flex;
    align-items: center;
    margin: .1em 1em;
    max-width: 20em;
    min-width: 20em;
}

#logoDgpc{
    width: 40%;
    margin: 0em 1em;
}

nav{
    width: 100%;
}

nav ul{
    background-color: #ffe0f2;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: .1em;
}

nav ul li{
    width: 90%;
    text-align: center; 
    margin: .1em 1em; 
    background-color: #ffe0f2;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav ul li a{
    width: 100%;
    height: 100%;
    background-color: #ffe0f2;
    color: black;
    border: solid black .15em;
    border-radius: .2em;
    padding: .2em;
}

nav ul li a:hover{
    background-color: #ff8de5;
    color: white;
}

main{
    flex-grow: 1;
}

.datosEstudiante{
    display: flex;
    flex-wrap: wrap;
    flex-direction:column;
    justify-content:center;
    justify-items:center;
    text-align: center;
    align-items: center;
    align-content:center;
    margin: 1em;
}

h1{
    margin: 0 .5em .5em;
}

.fotoEstudiante{
    width: 90%;
    text-align: center;
    max-width: 40em;
    min-width: 20em;
}

h2{
    width: 100%;
    margin: 0;
    padding: .1em 0em .1em 1em;
    background-color: #ffe0f2;
}

.materias{
    text-align: center;
   /* font-family: 'KoHo', sans-serif;
    font-weight: 600;
    font-style: italic;*/
}

h3{
    width: 100%;
    margin: .4em 1em .4em 1em;
    padding: .1em 2em .1em 1em;
}

.ejercicios a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: solid #d8ac4a .15em;
    margin: .5em 1em;
    padding: .3em;
    color: black;
}

.ejercicios a:hover{
    background-color: #d8ac4a;
    color: white;
}

h4{
    margin: 1em;
}

.ejercicioMockup{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0em 1em 1em;
}

.ejercicioMockup img{
    width: 30%;
    margin: .2em .2em .2em;
}

.mockupMobile,
.mockupDesktop{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}

.mobileInicio,
.mobilePunto,
.mobileRecorrido,
.mobileSeParte,
.desktopInicio,
.desktopPunto,
.desktopRecorrido,
.desktopSeParte{
    text-align: center;
    border: solid #d8ac4a .15em;
    margin: .2em;
    padding: .5em;
    width: 90%;
}

.mockupDesktop img{
    width: 45%;
}

.comitente{
    text-align:justify;
}

.comitente p{
    margin: .5em 1em 1em 1em;
}

footer{
    background-color: #ffe0f2;
    display: inline-block;
    text-align:justify;
    flex-wrap: wrap;
    padding: .5em 1em .5em 1em;
}



/* Escritorio */

@media all and (min-width: 992px){
    
    .contenedora{
        display: flex;
        flex-direction: row;
        justify-content:space-between; 
    }

    .contenedora nav{
        width: 50%;
        margin: 0em .5em;
        padding: 0em 1em;
        justify-content:space-between;
    }
    
    .contenedora nav li{
        margin: .1em .5em;
    }
    
    header nav ul{
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
    }
    
    #navegacion{
        padding: 0em 5em;
    }
    
    .materias{
        display: flex;
        flex-direction:row;
        flex-wrap: wrap;
        text-align:center;
        justify-content:space-evenly;
        align-items:center;
        align-content:center;
    }

    .materias h2{
        margin: 0;
        padding: 0 0 0 0;
    }

    .bocetoMobile,
    .bocetoDesktop{
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
    }

    .bocetoMobile a,
    .bocetoDesktop a{
        width: 30%;
    }

    .ejercicioMockup img{
        width: 30%;
        max-width: 15em;
    }

    .mockupDesktop img{
        width: 70%;
        max-width: 80em;
    }
    
}