:root{

    --default-section-padding: 70px;

    --color-light-easy:rgb(248, 249, 250);
    --color-light-medium:rgb(233, 236, 239);
    --color-light-hard:rgb(222, 226, 230);
    --color-light-harder:rgb(206, 212, 218);
    --color-light-dark:rgb(173, 181, 189);
    --color-dark-easy: rgb(108, 117, 125);
    --color-dark-medium:rgb(73, 80, 87); 
    --color-dark-hard:rgb(52, 58, 64); 
    --color-dark-harder:rgb(33, 37, 41); 

}


html{
    scroll-behavior: smooth;
}
body{
    font-family: 'Geologica', sans-serif;
    margin: 0;
    color: var(--color-dark-harder);
}
.averagePadding{
    padding: 5px;
}


header{
    
    display: flex;
    background-color: var(--color-light-medium);
    color: var(--color-light-easy);
    align-items: center;
    justify-content: center;
    
    
}

#divProfile{
    
    display: flex;
    align-items: center;
    width: 20%;
    
}

h1{
    background: linear-gradient(to right, #636df8 0%, #cd3937 69%, #eec832 100%);
    -webkit-background-clip: text;
    background-clip: auto;
    -webkit-text-fill-color: transparent;
    
}
.nav{
    
    width: 60%;
    display: flex;
    justify-content: center;
}

.links{
    
    margin: 0px 10px;
    
}
#divTema,#divIdioma{
    width: 3%;
}



main{
   
    background-color: var(--color-light-easy);
    
}
.divsMain{
    padding: 0 20%;
   
}
#divSummary{
    padding-top: var(--default-section-padding);
    padding-bottom: var(--default-section-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    
}
p{
    text-align: center;
}
#divSummary p{
    margin: 0 30px;
    text-align: start;
   
}

#imgSummary{
    width: 230px;
    border-radius: 20px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.544);
    margin:0px 20px ;
}
#divTextSummary{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    width: 60%;
    margin: 10px;
}
#divHello{
    display: flex;
    align-items: center;
}
#spanEmogi{
    font-size: 40px;
}

#cvButton{
    margin-bottom: 10px;
    width: 50px;
    height: 30px;
    font-size: 15px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0px;
}
#divSummaryLinks{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-light-hard);
    width: fit-content;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 3px 3px 7px  rgba(0, 0, 0, 0.294);
    border-bottom: 5px solid var(--color-light-harder);

}

#divSummaryLinks p{
    margin: 5px;
}
#divSummaryLinks .divsContact{
    width: fit-content;
    display: flex;
    justify-content: start;
    align-items: center;

}
#divSummaryLinks .divsContact img{
    width: 20px;
}
.imgSummaryLinks{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 5px;
    

}
.imgSummaryLinksShadow{
    filter: drop-shadow(3px 3px 10px #00000054);
}

#divSectionTittle{
    display: flex;
    align-items: center;
    height: fit-content;
    margin-bottom: 70px;
    background-color: var(--color-light-hard);
    width: fit-content;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 3px 3px 7px  rgba(0, 0, 0, 0.403);
    border-bottom: 5px solid var(--color-light-harder);
}
.imgSectionTittle{
    width: 45px;
    
}
.h3Secciones{
    width: fit-content;
    font-size: 30px;

    margin: 0px;
    
    

}
#divSectionSubtittle{
    display: flex;
    align-items: center;
    height: fit-content;
    margin-bottom: 30px;
    background-color: var(--color-light-hard);
    width: fit-content;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 3px 3px 7px  rgba(0, 0, 0, 0.403);

    

    border-bottom: 5px solid var(--color-light-harder);
    
}
.imgSectionSubtittle{
    width: 35px;
    
}
.h3SectionSubtitle{
    margin: 0px;
}


#skills{
    padding-top: var(--default-section-padding);
    padding-bottom: var(--default-section-padding);
    background-color: var(--color-light-medium);
}
#divAllTecnologies{
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    
}

.imgTecnol{
    
    width: 70px;
    height: 70px;
    border-radius: 5px;
    transition: 150ms;
    
    
}
.imgTecnol:hover{
    
    filter: grayscale(0);
    
    
}
.divCardTecnol{
    
    width: 70px;
    margin: 10px;
    filter: drop-shadow(3px 3px 10px #0000006b);
    
}


#projects{
    
    padding-top: var(--default-section-padding);
    padding-bottom: var(--default-section-padding);
    background-color: var(--color-light-easy);
}
#divAllProjects{
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.divBigProject{
    padding: 10px 0;
    
    margin-bottom: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.divMainProjectInfo{
    margin: 0px 20px;
    height: 100%;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-light-hard);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 3px 3px 7px  rgba(0, 0, 0, 0.403);
    

    border-bottom: 5px solid var(--color-light-harder);
   
}
.imgMainProjectLogo{
    width: 130px;
}
.divMainProjectName{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.h2ProjectName{
    margin: 0px;
    text-align: center;
}
.pCategory{
    margin: 0px;
    text-align: center;

    border-radius: 10px;
    
    width: fit-content;
    padding: 3px;
}
.divMainProjectDescription{

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.divMainProjectsTecnologies{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    width: 70%;
}
.divMainProjectsTecnologies .divMainProjectsTecnologiesIntern{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    
}
.divMainProjectsTecnologies div img{
    margin: 3px;
    
}
.imgMainProjectTecnol{
    width: 30px;
    height: 30px;
}
.divMainProjectLinks{
    
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.smallProjects{
    display: flex;
    justify-content: center;
    align-items: center;
}
.imgSmallProject{
    margin-top:5px;
    width: 120px;
}
#btnDawUp{
    
    position: fixed;
    bottom: 10px;
    right: 10px;
    border-radius: 30px;
    padding: 0px;
    width: 40px;
    height: 40px;
    display: none;
    border: none;
    background-color: var(--color-light-dark);
    
    
}

#imgBajarSubir{
    margin: 0px;
    border-radius: 50%;
    width: 37px;
    height: 37px;

}
#imgBajarSubir:hover{
    box-shadow: 0px 0px 8px var(--color-dark-medium);
}


footer{
    
    
    background-color: var(--color-light-hard);
    display: flex;
    justify-content: center;
}



::selection {
    color: rgb(255, 255, 255);
    background: rgb(35, 35, 35);
}


::-webkit-scrollbar{
    width: 15px;
} 

::-webkit-scrollbar-thumb {
    background-color: var(--color-dark-hard);
    /* border-radius: 20px; */
    border: 2px dashed var(--color-dark-easy);
    
}