/*
Fonts
font-family: 'Montserrat', sans-serif;
font-family: 'Nunito', sans-serif;
*/

/*General styles*/

body {
    background-color: rgb(0, 0, 0);
    width: 100%;
    height: 100%;
    margin: 0;
    color: white;
    padding: 0;
}

ul {
    font-family: 'Montserrat', sans-serif;
}

p {
    font-family: 'Nunito', sans-serif;
}

h3 {
    font-family: 'Montserrat', sans-serif;
}

h1 {
    font-family: 'Montserrat', sans-serif;
}

a {
    text-decoration: none;
    color: white;
    background-image: linear-gradient(red, red);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2vh;
    background-position-y: 2vh;
    transition: background-size .3s;
}

a:hover, a:focus {
    background-size: 100% 1vh;
}

/*////////////DESKTOP//////*/

/*navbar*/

#navbar {
    display: flex;
    flex-direction: row;
}

#divImgNavbar {
    width: 30vh;
    padding: 1vh;
    margin-top: 2vh;
    margin-left: 30rem;
}

#imgNavbar {
    width: 70%;
    height: auto;
}

#divNavbarLeft {
    display: flex;
    flex-direction: row;
}

#nameDescription {
    margin-top: 4vh;
    margin-left: -5%;
}

#divnavbarRight {
    margin: auto;
    display: flex;
    width: 100%;
    font-size: 2vh;
    margin-top: 6vh;
    margin-left: 25%;
}

/*Content*/

#content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2vh;
    margin-top: 15vh;
  align-items: center;  
}
#titleContent{
    font-size: 2vh;
}
#infoContent{
    font-size: 2vh;
}
/*Personal info*/

#personalInfo {
    margin-top: 10%;
    display: flex;
    flex-direction: row;
    width: 100%;
}

#personalImage {
    width: 50%;
}

#imageProfile {
    width: 70%;
    height: 80vh;
}

#personalText {
    width: 50%;
    margin-top: 20vh;
    padding: 5vh;
    display: flex;
    flex-direction: column;
    font-size: 3vh;
    
}

/*Skills*/

#skills {
    margin-top: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: auto;
}

#tittleSkills {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
  
}

#skillsImgs {
    margin-top: 10vh;
    display: grid;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
    grid-template-rows: auto;
}

.skillsImg {
    padding: 5vh;
}

/*Footer*/

footer {
    margin-top: 40vh;
    background-color: white;
    width: 100%;
    height: 25vh;
    color: black;
    font-family: 'Nunito', sans-serif;
    display: flex;
    flex-direction: row;
}

#fTittleProject {
    text-decoration: underline;
    margin-left: 4vh;
}

#fProject {
    margin-left: 20vh;
    margin-top: 1vh;
    text-align: start;
    width: 60vh;
}

#fContentProject {
    text-align: start;
    font-family: 'Nunito', sans-serif;
}

.aF {
    color: black;
    text-decoration: none;
}

#fAbout {
    margin-left: 20vh;
    margin-top: 1vh;
    text-align: start;
    width: 60vh;
}

#fTittleAbout {
    text-decoration: underline;
    margin-left: 4vh;
}

#fContentAbout {
    text-align: start;
    font-family: 'Nunito', sans-serif;
}

#fSocial {
    display: flex;
    flex-direction: column;
}

#fSocialIcons {
    display: flex;
    flex-direction: row;
}

#lnk {
    margin-top: 0.8vh;
    margin-left: 2vh;
}

#fTittleSocial {
    text-decoration: underline;
}

/*//////MOBILE///////*/

@media only screen and (max-width: 768px) {
    /*navbar*/
    #divImgNavbar {
        width: 10vh;
        padding: 1vh;
        margin-top: 1vh;
        border-radius: 60%;
        margin-left: 0vh;
    }
    #imgNavbar {
        width: 85%;
        height: auto;
    }
    #nameDescription {
        display: none;
    }
    #navbar {
        display: flex;
        flex-direction: row;
    }
    #divnavbarRight {
        margin: auto;
        display: flex;
        width: 100%;
        font-size: 2vh;
        margin-top: 3vh;
       margin-left: 12vh;
    }
    /*Content*/
    #content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 2vh;
        margin-top: 5vh;
        margin-left: auto;
        margin-right: auto;
    }
    /*Personal info*/
    #personalInfo {
        margin-top: 10%;
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
        justify-content: center;
    }
    #personalImage {
        display: flex;
        justify-content: center;
        width: 50%;
        margin-left: 10vh;
    }
    #imageProfile {
        width: 100%;
        height: 50vh;
        border-radius: 2%;
    }
    #personalText {
        margin-top: auto;
        width: 50%;
        margin-left: 6vh;
        
    }
    
    /*Skills*/
    #skills {
        margin-top: 15vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: auto;
    }
    
    #tittleSkills {
        font-family: 'Montserrat', sans-serif;
        text-align: center;
      
    }
    
    #skillsImgs {
        margin-top: 10vh;
        display: grid;
        justify-content: center;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto;
    }
    
    .skillsImg {
        padding: 5vh;
        width: 10vh;
        height: 10vh;
    }
    /*Footer*/
    footer {
        background-color: white;
        width: 100%;
        height: 60vh;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    #fProject {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 42.5%;
        margin: 0;
    }
    #fTittleProject {
        margin: 0;
    }
    #fAbout {
        align-items: center;
        margin: 0;
        width: 42.5%;
    }
    #fTittleAbout {
        margin-bottom: 5.5vh;
    }
    #fSocial{
        align-items: center;
    }
}