@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,700;1,300;1,400&display=swap');


* {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;

}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'Open Sans', sans-serif;
}


main {
    background-color: #fff8ff;
}

header,
footer {
    background-color: #a9d3f4;
    color: white;
    padding: 1em;
}

footer {
    color: black;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
}


ul {
    list-style: none;
    padding: 0;
}

.contenedora {
    display: block;
    max-width: 40em;
    margin: 0 auto;
}



/*HEADER*/

header .contenedora {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

/** bara de navegacion*/

nav ul li a {
    display: block;
    color: snow;
    background-color: black;
    text-align: center;
    font-weight: bold;
    margin: 0.5em;
    padding: 0.25em 1em;

}

nav ul{
     display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
}



nav ul li a:hover {
    background-color: snow;
    color: black;
}

/*navegacion 2 materias aprobadas tps equipo*/

#navbar2 ul li a {
    display: block;
    color: snow;
    background-color: #a9d3f4;
    text-align: center;
    font-weight: bold;
    margin: 0.5em;
    padding: 0.25em 1em;

}

#navbar2 ul{
    display: flex;
    flex-wrap: wrap;
}

#navbar2 ul li a:hover {
    background-color: #eaaeae;
    color: white;
}

.logodgpc {
    width: 13em;
}

/*contenedora foto de perfil info personal*/

.contenedora2 {
    max-width: 60em;
    margin: 0 auto;
}



/*COMITENTE BIBLIOTECAS MOVILES JT16 (se comparte con los html de plan, mapa y, analisis) */

.infopersonal {
    display: flex;
    flex-direction: column;
    align-content: center;
    margin: 1em 1em;
    padding: 1em;
}

.infopersonal p {
    font-size: 20px;
    margin: 10pxpx;
}


#avatar {
    width: 250px;
    margin: 3em 2em;
    box-shadow: -20px -20px 1px 1px rgba(169, 211, 244, 10);
}



.personal {
    display: flex;
    justify-content: center;
    display: block;
    margin: auto;
    width: 100%;
    padding: .4em 2em;
}

/*contenedora nombre apellido info*/

#nombre {
    display: flex;
    justify-content: center;
    align-content: center;
}

#nombre {

    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    font-size: 20px;
    font-weight: 700;
}

/*krin*/

#apellido {
    font-family: 'Open Sans';
    letter-spacing: 8pt;
    align-content: center;
    justify-content: center;
    display: flex;
    color: black;
    font-size: 25px;
}

/*boceto indiv*/

#boceto {
    color: #a9d3f4;
    padding: 1em .5em;
    margin: auto;
}

/*ludmila debora*/

#nombre1 {
    letter-spacing: 10pt;
    font-size: 19pt;
    font-weight: bold;
    display: flex;
    align-content: center;
    justify-content: center;
    margin: .1em 0;
    padding: 0 .2em 1em;

}




#tps {
    padding: 1em;
    margin: auto;
    justify-content: center;
    width: 40em;
}

.logoacu {
    width: 300px;
    margin: .25em 1em;
    text-align: center;
}

.materias {
    display: flex;
    margin: 1em;
    font-weight: bold;
    font-variant: 
}

.aprobadas {
    display: flex;
    outline: 8px solid #a9d3f4;
}

.cursando {
    background-color: black;
}

.cursando li {
    color: #ebacad
}
   /*titulo trabajos afiche y proyecto transmedia*/

#trabajos {
    color: black;
    font-size: 25px;
    font-style: italic;
    letter-spacing: 3pt;
}

#materias {
    align-content: center;
    color: black;

}

#materias li {
    margin: .6em;
    padding: 0;
}

.jt16 li h3 {
    margin: .1em 0 0;
    padding: .1em 1em 0 1em;
}

#tituloequipo {
    color: #a9d3f4;
    font-size: 30px;
}

.miembros ul li {
    display: block;
    justify-content: space-between;
    margin: 2em 0.4em 3em;
    padding: 1em;
    text-align: center;
}

/*imagenes tps desctacados*/

.miembros img {
    width: 200px;
    margin: 2em;
    text-align: center;
}

.miembros h3 {
    margin: 2em;
    text-align: center;
    color: #ffe9d6;

}

/* texto de cada una*/

.miembros p {
    color: black;
}

/*verpefil*/

.perfil {
    display: flex;
    justify-content: center;
    align-content: center;
}

.perfil p {
    color: #ffe9d6;
    margin: 1em 6em;
    align-content: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    background-color: black;
    padding: 1em;

}



/*--------------INFORMACIÓN ACADÉMICA, logos y textos-----------------------------------------------*/

.datos {
    color: black;
    font-weight: bolder;
    margin: 1em;
    padding: 1em 0 0 1em;
}


.logos ul {
    margin: 0;
}

.logos img {
    text-align: center;
    height: 4em;
    margin: 1em 0;
}

.logos ul li {
    margin: .5em 0 2em 0;
    padding: 0 1em;
}

.info {
    font-size: 1em;
}


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


  /*nav compartido con el rotulo grupal*/

    #navbar ul {
        display: flex;
    }

  /* contenedora general*/

    .contenedora {
        max-width: 80em;
        width: 100%;
    }

 /*contenedora info personal*/

    .contenedora2 {
        display: flex;
        justify-content: center;
        width: 100%;
    }



   /* equipo jt16 fondo negro */

    .contenedora3 ul {
        display: block;
        flex-wrap: nowrap;
        justify-content: center;
    }



    .logos ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0 0 0 1em;
    }


}