*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica';
}
/* -------- Header -------- */
header{
    background: #192D70;
    font-size: 1.1rem;
}
.navbar{
    width: 80%;
    margin: auto;
    padding: 0;
}
.logo{
    width: 15%;
}
.menu{
    margin: auto 0;
    padding: 0;
}
.menu a{
    display: inline-block;
    padding: 1.5rem 1.5rem;
    color: #fff;
    text-decoration: none;
}

/* ------- Main --------- */
main{
    width: 80%;
    margin: auto;
}
.intro{
    display: flex;
    justify-content: center;
    margin-top: 7rem;
}
.profilePic{
    width: 40%;
}
.nameAndText{
    width: 50%;
    margin: auto 0;
}
.nameAndText h1{
    width: 90%;
    margin: auto;
    color: #192D70;
    font-size: 3.5rem;
}
.nameAndText > p{
    margin: auto;
    margin-top: 3rem;
    width: 90%;
    line-height: 1.5;
    color: #707070;
    font-size: 1.5rem;
}
/* -------- About Me -------- */
.aboutMe{
    margin-top: 9rem;
}
.text{
    width: 100%;
    margin: auto;
    margin-top: 3rem;
}
.text p{
    margin: auto;
    width: 95%;
    font-size: 1.45rem;
}
.row{
    margin: 3rem 0;
    width: 100%;
    justify-content: space-between;
    font-size: 1.1rem;
}
.col{
    padding: 0 2rem;
}
.accordion-item{
    font-size: 1.1rem;
    width: 100%;
}
.accordion-button{
    font-size: 1.2rem;
}
/* -------- Education -------- */
.education{
    margin-top: 4rem;
    background: #F7F7F7;
}
.contenedor{
    width: 80%;
    margin: auto;
}
.contenedor h2{
    padding-top: 3rem;
}
.tarjetas{
    display: flex;
    justify-content: space-between;
}
.tarjeta{
    width: 47%;
    margin-top: 2.5rem;
    margin-bottom: 4rem;
    border: 1px solid;
    border-radius: 10px;
    background-color: #fff;
    padding-bottom: 1rem;
    transition: width 1s;
    -webkit-box-shadow: 1px 9px 55px -15px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 9px 55px -15px rgba(0,0,0,0.75);
    box-shadow: 1px 9px 55px -15px rgba(0,0,0,0.75);
}
.tarjeta img{
    border-radius: 10px 10px 0 0;
}
.tarjeta li{
    list-style: none;
    margin: .5rem 1.9rem 0;
    font-size: 1.2rem;
}
/* -------- Projects --------- */
.projectos{
    width: 80%;
    margin: 4rem auto 0;
}
.projects{
    width: 80%;
    margin: 3rem auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 3rem;

}
.projects h3{
    margin: 0;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
}
.project{
    margin: auto;
    border-radius: 15px 15px 0 0;
}
.imgProject img{
    border: 1px solid;
    border-radius: 15px;
}
.project a{
    display: block;
    text-decoration: none;
    color: #fff;
    background-color: #192D70;
    padding: .5rem 3rem;
    border-radius: 10px;
    width: 45%;
    margin: 1.5rem auto;
    text-align: center;
    font-size: 1.2rem;
}
/* -------- Courses ---------*/
.courses{
    background-color: #F7F7F7;
    padding-bottom: 5rem;
}
.cursos{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 2rem;
}
.courses h2{
    width: 80%;
    margin: auto;
    padding: 3rem 0;
}
.curso{
    background-color: #fff;
    padding-bottom: 2rem;
    border: 1px solid;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.75);
}
.curso h3{
    font-size: 1.5rem;
    text-align: center;
}
.curso h4{
    text-align: left;
    margin: 1rem 1rem;
    padding: 0;
}
.curso img{
    border-radius: 10px 10px 0 0;
}
/* -------- Contacto ---------*/
.contact{
    width: 80%;
    margin: auto;
    margin-top: 4rem;
    font-size: 1.2rem;
}
.contact h2{
    margin-bottom: 3rem;
}
.contacto{
    display: flex;
    justify-content: center;
}
.entrada{
    display: block;
    width: 40%;
    margin: .8rem;
    padding: .5rem 1rem;
    border-radius: 5px;
    border: #bababa solid;
}
#msg{
    display: block;
    width: 82%;
    margin: .8rem auto;
    padding: .5rem 0 0 1rem;
    border-radius: 5px;
    border: #bababa solid;
}
.contact button{
    display: block;
    text-decoration: none;
    color: #fff;
    background-color: #192D70;
    padding: .5rem 3rem;
    border-radius: 10px;
    width: 15%;
    margin: 1.5rem auto;
    text-align: center;
    font-size: 1.2rem;
}
/* -------- Generalidades --------*/
img{
    width: 100%;
}
h2{
    color: #192D70;
    font-size: 2.5rem;
}
h3{
    margin: 1.3rem 2rem  0;
}
h4{
    margin: .5rem 2.1rem 0;
    font-size: 1.3rem;
}
p{
    margin: .5rem 4rem 0;
    font-size: 1.2rem;
}
.imgProject{
    position: relative;
    overflow: hidden;
}
/* --------- Social ----------*/

.social{
    background-color: #192D70;
    margin-top: 8rem;
}
.socialContainer{
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-direction: row;
}
.socialContainer a{
    display: block;
    width: 15%;
    margin: 2rem 1rem;
    transition: width .5s;
}
.socialContainer img{
    border-radius: 10px;
}
/* -------- Hovers --------- */
.menu a:hover{
    background: #213D9F;
}
.education li::before{
    content: " - ";
}
.img1::before{
    content: "Developed a simulation that shows if you have malaria, by helping people to understand how does dielectrophoresis works, using MatLab tools to calculate the percentage of electrons in a red blood cell and creating an electromagnetic field between two charged plates.";
}
.img2::before{
    content: "Worked with a team to implement a script in R, by helping to predict and analyze variants of SARS-CoV-2 in the top 20 countries affected by this virus, researching the characteristics of each variant and comparing them using graphics and genetic trees generated by R.";
}
.img3::before{
    content: "Designed a smart thermos prototype, by increasing the number of people that would buy a thermos by 16% (30 clients) since the last survey at the beginning of the project, by identifying the people preferences, using electronic components and programming it with Arduino code.";
}
.img4::before{
    content: "Developed a \"Jeorpardy\" (Questions and Answers) videogame, helping Mexican children to prepare for the enlace test, improving their knowledge on math, science and reading comprehension while they are having fun, by using python to create the visual interface and the operation of the program.";
}
.img5::before{
    content: "Designed and developed a web page for a soccer team, increasing the number of players that wanted to play there by 50% (150 players), by using HTML and CSS to show relevant information about the club.";
}
.img6::before{
    content: "Developed with a colleague an escape room video game that test your abilities to solve puzzles getting through different zones of a house and trying to survive, by using C++ entirely.";
}
.imgProject::before{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #000;
    transform: scale(0);
    transition: transform 1s;
    font-size: 1.2rem;
    color: #fff;
    padding: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .9;
    border-radius: 10px;

}
.imgProject:hover::before{
    transform: scale(1) rotate(360deg);
}
.tarjeta:hover{
    width: 47.5%;
}
.project a:hover{
    background-color: #213D9F;
}
.contact button:hover{
    background-color: #213D9F;
}

.socialContainer a:hover{
    width: 16%;
}
/* -------- Media Queries ------- */

@media( max-width: 1200px) {
    :root{
        font-size: 13px;
    }
    .aboutMe{
        margin-top: 11rem;
    }
}
@media( max-width: 1065px) {
    :root{
        font-size: 12px;
    }
    .intro{
        margin-top: 12rem;
    }
    .profilePic{
        width: 50%;
    }
}
@media( max-width: 990px) {
    .projects{
        grid-template-columns: repeat(2,1fr);
        gap: 3rem;
    }
    .tarjeta{
        width: 80%;
    }
    .tarjeta:hover{
        width: 81%;
    }
    :root{
        font-size: 13px;
    }
    .tarjetas{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .contact button{
        width: 20%;
    }
    .row{
        flex-direction: column;
    }
    .intro{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-top: 3rem;
    }
    .nameAndText{
        margin-top: 3rem;
        width: 70%;
    }
    .logo{
        width: 20%;
    }
    .cursos{
        grid-template-columns: repeat(2,.4fr);
        justify-content: center;
    }
    .socialContainer a{
        width: 25%;
    }
    .socialContainer a:hover{
        width: 26%;
    }
    .contact button{
        width: 40%;
    }
}
@media(max-width: 660px){
    .navbar{
        width: 95%;
    }
    :root{
        font-size: 12px;
    }
    .navbar .menu{
        visibility: hidden;
        display: none;
    }
    .tarjeta{
        width: 100%;
    }
    .tarjeta:hover{
        width: 101%;
    }
    .logo{
        width: 30%;
    }
    .projects{
        grid-template-columns: repeat(1,.7fr);
        justify-content: center;
    }
    .profilePic{
        width: 65%;
    }
    .imgProject::before{
        font-size: 1.5rem;
    }
    .logo{
        width: 35%;
        padding: 1.5rem;
    }
    .contacto{
        flex-direction: column;
        align-items: center;
    }
    .entrada{
        width: 100%;
    }
    .contact button{
        width: 50%;
    }
    .cursos{
        grid-template-columns: repeat(2,1fr);
    }
}
@media(max-width: 500px){
    :root{
        font-size: 11.5px;
    }
    .profilePic{
        width: 90%;
    }
    .nameAndText h1{
        margin-top: 3rem;
        width: 100%;
        font-size: 2.3rem;
    }
    .nameAndText > p{
        width: 100%;
    }
    .projects{
        grid-template-columns: repeat(1,.9fr);
    }
    .logo{
        width: 43%;
    }
}