@charset "utf-8"

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



* {
    box-sizing: border-box;
    color: black;
    margin: 0;
    padding: 0;


}

body {
    font-family: 'Poppins', sans-serif;

}


/* CELULAR*/

/* HEADER - LOGOS*/

.logos-academicos {
    background-color: white;
    margin: 1.2rem 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}


.logodc,
.logofadu {
    background-color: white;
    border-radius: .2em;
    padding: 0 .1em 0;
}

.logofadu {
    width: 200px;
    margin-right: 10px;
}

.logodc {
    width: 100px;
    margin-left: 10px;
}

/* HEADER - MENU GRAL*/

.menu {
    background-color: #672ed5;
    margin: auto;
    padding: 1em;
    list-style: none;
}

header nav .menu li {
    text-align: center;
}

header nav .menu li a {
    display: inline-block;
    width: 150px;
    padding: .5em;
    margin: .5em;
    color: white;
    font-weight: 400;
    letter-spacing: 3px;
    cursor: pointer;
    text-transform: uppercase;
}

header nav .menu li a:hover {
    background: white;
    color: #672ed5;
    border-radius: .8rem;
}


/* MAIN - REGLAS GENERALES */

main {
    margin: 3em auto;
}



h1 {
    font-size: 34px;
    margin-bottom: 1px;
    color: #672ed5
}

h2 {
    font-size: 28px;
    color: #672ed5
}

h3 {
    font-size: 20px;
    color: #3c118e
}

h4 {
    font-size: 18px;
    color: #3c118e;
}


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


ul,
ol {
    list-style: none;
    padding-left: 0;
}


a {
    text-decoration: none;
}

/* MAIN - PERFIL */

#datos-personales {
    margin-top: 1em auto;
    text-align: center;
}


#datos-personales img {
    width: 300px;
    height: 300px;
    margin: auto;
}

#perfil {
    max-width: 500px;
    height: auto;
    margin: auto
}



/* MAIN - INFO TP */
#info-tp {
    display: inline-block;
    margin-top: 1em;
}

#info-tp div {
    padding: 0 1.8rem;
    margin: .8rem 0;

}

#info-tp div p {
    margin-top: .1rem
}

.sub {
    margin: 0 0 .5rem;
    border-bottom: .3rem solid #3c118e;

}



/* MAIN - HISTORIA ACADEMICA */

#historia {
    text-align: center;
    padding: 1em
}


#materias div {
    margin: 1em
}

#historia div h3 {
    margin: 10px;

}


/* MAIN - TRABAJOS*/

#trabajos {
    text-align: center;
    padding: 1em;
}

#grilla {
    margin: 70px
}

.trabajo1,
.trabajo2 {
    width: 300px;
    height: auto;
    margin-bottom: 15px;
}


.trabajo3 {
    width: 300px;
    height: auto;
}


.trabajo1:hover {
    border: .2rem solid;
    border-color: #672ed5;
}

.trabajo2:hover {
    border: .2rem solid;
    border-color: #672ed5;
}


.trabajo3:hover {
    border: .2rem solid;
    border-color: #672ed5;

}


/* MAIN - BIBLIOTECAS INFO*/


#bibliotecas-info {
    text-align: center;
    padding: 1em;
    margin: auto;

}

#boceto-ind {
    margin: 2rem auto;
    cursor: pointer;
}

#boceto-ind a {
    margin: auto;
    padding: 5px 7px 5px 7px;
    border: .1rem solid;
    border-color: #672ed5;
    border-radius: .8rem;
    border-width: .13rem;
    color: white;
    background-color: #672ed5;
}

#boceto-ind a:hover {
    background: white;
    color: #672ed5;
    border-radius: .8rem;

}



/* MAIN - MENU INTEGRANTES*/


#nosotras {
    text-align: center;
    padding: 1em;


}

#integrantes {
    margin-top: 1px;
    cursor: pointer;

}

#integrantes li {
    padding: 5px 15px 5px 15px;
    margin: 5px 15px 5px 0;
}


#integrantes li a {
    padding: 4px 5px 4px 5px;
    color: black;

}

#integrantes li :hover {
    font-weight: 700;
    border-bottom: .3rem solid #672ed5;

}


#logoacumar {
    width: 200px;
    height: auto;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;

}


/* FOOTER*/
footer {
    background-color: #f2f2f2;
    font-size: 12px;

}


#datos-academicos ul {
    padding: 1em
}

#datos-academicos li {
    text-align: left;
    max-width: 300px;
}

#datos-academicos p {
    background-color: #672ed5;
    text-align: center;
    color: white;
    padding: 2em;
    margin: 0;
}




/* MEDIA - TABLET*/


@media screen and (min-width:768px) {
    .menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

    }


    #info-tp {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        margin-top: 1rem;
        flex-wrap: wrap;
    }

    #materias {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }


    #grilla {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        margin: 50px 0 0;
    }


    .trabajo1 {
        width: 715px;
        height: auto;
        margin-bottom: 15px;
    }

    .trabajo2 {
        width: 350px;
        height: auto;
        margin-right: 15px
    }

    .trabajo3 {
        width: 350px;
        height: auto;
    }

    #grilla div {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-content: center;
        flex-wrap: wrap;
    }

    #bibliotecas-info {
        width: 800px;
    }

    #integrantes {
        display: flex;
        flex-direction: row;
        margin: auto;
        justify-content: center;

    }

    #integrantes li {
        padding: 5px 15px 5px 15px;
        margin: 5px 15px 5px 0;
    }

    #logoacumar {
        width: 250px;
        height: auto;
    }

    #datos-academicos {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        text-align: left;
        justify-content: space-around;
    }


    #datos-academicos li {
        width: 400px;
    }



    /* MEDIA - DESKTOP*/


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

        #datos-personales {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        #datos-personales img {
            padding: 0px;
            margin: 0 0 0 auto
        }

        #perfil {
            max-width: 600px;
            margin-left: 2rem;
        }

        #grilla {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-content: center;
            flex-wrap: wrap;
            margin-top: 50px;
        }

        #columna1 {
            padding: 0 .8em;
        }

        .trabajo1 {
            width: 790px;
            height: auto;
        }

        .trabajo2 {
            width: auto;
            height: auto;
        }

        .trabajo3 {
            width: auto;
            height: auto;
        }

        #grilla div {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-content: center;
            flex-wrap: wrap;
        }

        #columna2 a {
            padding: 0 0 .5em 0
        }


        #datos-academicos li {
            padding: 0 8px;
            width: 280px;
        }



    }