main{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

section {
    width: 100%;
    height: 100%;
    padding: 120px 150px;
}

h2{
    font-size: 30px;
    font-weight: 900;
}

h4{
    font-size: 17px;
}

h5{
    font-size: 14px;
    color:gray;
    text-align: center;
    margin-top: 10px;
    
}

/*STYLE PRESENTATION SECTION*/

.presentacion{
    width: 100%;
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: space-evenly;
    margin-top: 100px;
    margin-bottom: 80px;
}
.holasoy{
    width: 50%;
    height: 297px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.nombre{
    font-size: 40px;
    font-weight: 900;
    color: tomato;
}
.descripcion{
    font-size: 14px;
    color: gray;
}
.botonhago{
    width: 150px;
    height: 40px;
    background-color: tomato;
    border-radius: 40px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.drawing{
    width: 385px;
    height: 297px;
    filter: drop-shadow(4px 6px 10px grey);
    transition-duration: 0.5s;
}

/*STYLE SECTIONS ANS TITLES*/

.section-name{
    width:100%;
    color: grey;
    text-align: center;
    margin: 0 0 20px;
}
.conocimientos{
    background-color:rgba(233, 229, 229, 0.849);
}
.habilidades{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.bajada{
    width: 60%;
    text-align: center;
    margin: 20px 0;
}

/*STYLE SECTIONS WITH CARDS*/


.grid{
    width: 700px;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}
.card{
    width: 200px;
    height: 200px;
    background-color: white;
    border-radius: 20px;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:15px;
    transition-duration: 0.5s;
}
.icon-card{
    font-size: 80px;
    margin-bottom: 15px;
}

/*STYLES SECTION HABILITIES*/

.fa-html5{
    color:#E54D26;
}
.fa-css3-alt{
    color:#3D8FC6
}
.fa-sass{
    color: #CC6699
}
.fa-js-square{
    color:#F0DB4F
}
.fa-react{
    color:#61DAFB
}
.fa-git-alt{
    color:#F34F29
}


/*QUOTE SECTION*/

.quote{
    width: 100%;
    height: 100%;
    background-color: tomato;
    color: white;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*STYLES PROJECTS DEVELOPED*/


.project-card{
    width: 200px;
    height: 200px;
    background-color: white;
    border-radius: 20px;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:15px; 
    transition-duration: 0.2s;   
}
.thumb{
    width: 60%;
    height: 60%;
    filter:drop-shadow(4px 6px 10px grey);
}


/*MAIN SECTIONS HOVERS AND ACTIVES*/


.card:hover{
    border: 2px solid tomato;
    filter:drop-shadow(4px 6px 10px grey);
    transition-duration: 0.5s;    
}
.project-card:hover {
    transform: scale(1.2);
    filter:drop-shadow(2px 4px 8px grey);
    transition-duration: 0.5s;
}
.botonhago:hover {
    transform: scale(1.2);
}

.drawing:hover{
    transform: scale(1.5);
    transition-duration: 0.5s;
}
/*RESPONSIVE*/

@media screen and (max-width: 725px) {
    
    section {
        width: 100%;
        height: 100%;
        padding: 50px 20px;
    }

    h1{
        text-align: center;
    }

    p{
        text-align: center;
    }

    .presentacion{
        flex-direction: column-reverse;
        align-items: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .holasoy{
        width: 100%;
        align-items: center;
    }

    .drawing:hover{
        transform: scale(1.1);
        transition-duration: 0.5s;
    }
    .grid{
        width: 98%;
        height: 100%;
        display: flex;
        flex-wrap:wrap;
        justify-content: center;
    }

    .card{
        width: 130px;
        height: 130px;
        background-color: white;
        border-radius: 20px;
        font-size: 15px;
        margin:12px;    
    }

    .project-card{
        width: 130px;
        height: 130px;
        font-size: 15px;
        margin:12px;    
    }
    
    .icon-card{
        font-size: 60px;
        margin-bottom: 12px;
    }    

    .bajada{
        width: 80%;
    }

    .descripcion{
        width: 80%;
        align-self: center;
    }

    .section-name{
        margin: 0 0 10px
    }

    .project-card:active {
        transform: scale(1.2);
        transition-duration: 0.2s;       
    }

}