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

:root {
    --primary: rgb(241, 78, 13);
    --primaryDark: rgb(195, 57, 2);
    --primaryLight: rgb(235, 147, 113);
    --primaryText: rgb(242, 206, 149);
    --secondaryText: rgb(204, 216, 216);
    --titleText: rgb(62, 66, 66);
    --regularText: rgb(76, 89, 89);
    --backgroundColor: white; 
    --shadowColor: #888888; 
    --tagBackground: #293c7a;     
}


body {
    background: rgb(204, 188, 188);
    font-family: 'Roboto', sans-serif;
}

#main_container{
    background: var(--backgroundColor);
    margin: 20px;    
    box-shadow: 5px 10px var(--shadowColor);
    display: grid;
    grid-template-columns: 300px auto; 
    grid-template-rows: auto;
}


aside{
    grid-column: 1;
    grid-row: 1;
    background: var(--primary)
}



#div_img{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#photo {
    width: auto;
    height: 200px;
    border-radius: 50% ;
    border: 10px solid var(--primaryLight);
}

#myName{
    color: var(--primaryText);
    text-align: center;
    font-size: 2rem;
    margin-bottom: 0;
}

#profession{
    font-size: 1rem;
    font-style: italic;
    margin-top: 0;
    color: var(--secondaryText);
    text-align: center;
}

hr {
    width: 75%;    
    border: 3px solid var(--primaryLight);
    margin-top: 1rem;
    margin-bottom: 1rem;    
}

.titleAside {
    color: var(--primaryText);
    text-align: center;
    font-size: 1.2rem;
    margin: 0;
}

.contentAside{
    color: var(--primaryText);
    margin-bottom: 1.5rem;    
}

.contentAside div, .contentAside address{
    width: 100%;
    text-align: center;
    margin-bottom: .5rem;
}

.attributeKey {
    font-weight: bold;
}

.attributeIcon{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    padding: 5px;
    font-size: 1.2rem;
    border: 1px solid var(--primaryLight);
    border-radius: 50%;
    background-color: var(--primaryDark);
    margin-right: 0.5rem;
}

a{
    color: var(--primaryText);
    text-decoration: none;
}

/* Content body */

.content {
    grid-column: 2;
    grid-row: 1;   
}

#aboutMe {
    margin-top: 55px;
}

.section_resume{
    display: flex;
    justify-content: baseline;
    align-items: center;
    width: 100%;
    height: 80px;
}

.sectionIcon{
    margin-left: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    padding: 10px;
    font-size: 2rem;
    border: 1px solid var(--primaryLight);
    border-radius: 50%;
    background-color: var(--primaryDark);    
    position: absolute;
}

.title_section{
    background-color: var(--primaryLight);
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
}

.title_section h1 {
    color: var(--titleText);
    margin-left: 120px;
}

.regularText{
    color: var(--regularText);
    padding: 20px 40px;    
}

#education_columns, #work_columns{
    display: grid;
    grid-template-columns: 100px auto; 
    grid-template-rows: auto;
    margin-bottom: 20px;
}

.education_dates, .work_dates{
    grid-column: 1;    ;    
}

.education_dates h4, .work_dates h4{
    font-size: 1rem;
    text-align: center;
    margin: 5px 0 0 0;
}

.education_school, .work_space {
    grid-column: 2;
    margin-left: 20px;
}

.education_school h3, .work_space h3{
    font-size: 1.3rem;
    margin-bottom: 10px;
    margin-top: 5px;
}

.education_school h4, .work_space h4{
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1rem;
}

.school, .company {
    font-style: italic;
    font-weight: lighter;
}

.spacer {    
    height: 100%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.v-line{
    border-left: thick solid #000;
    height:80%;
}

.tag {
    border: 1px solid var(--tagBackground);
    border-radius: 10%;
    padding: 2px 10px;
    background: var(--tagBackground);
    color: var(--secondaryText);
    margin-right: 5px;
}

#badges{
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#badges img {
    width: 100px;
    height: auto;
    
}

/* Media Queries para diseño responsive */
@media screen and (max-width: 768px) {
    #main_container {
        grid-template-columns: 1fr;
        margin: 10px;
    }

    aside {
        grid-column: 1;
        grid-row: 1;
    }

    .content {
        grid-column: 1;
        grid-row: 2;
    }

    #photo {
        height: 150px;
    }

    .section_resume {
        height: 60px;
    }

    .sectionIcon {
        margin-left: 20px;
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .title_section h1 {
        margin-left: 100px;
        font-size: 1.5rem;
    }

    #education_columns, #work_columns {
        grid-template-columns: 1fr;
    }

    .education_dates, .work_dates {
        grid-column: 1;
        text-align: left;
        margin-left: 20px;
    }

    .education_school, .work_space {
        grid-column: 1;
        margin-left: 20px;
    }

    .spacer {
        display: none;
    }

    #badges {
        flex-wrap: wrap;
    }

    #badges img {
        width: 80px;
        margin: 5px;
    }

    .regularText {
        padding: 10px 20px;
    }
}

/* Para pantallas muy pequeñas */
@media screen and (max-width: 480px) {
    #myName {
        font-size: 1.5rem;
    }

    #profession {
        font-size: 0.9rem;
    }

    .title_section h1 {
        font-size: 1.2rem;
    }

    #photo {
        height: 120px;
    }

    .education_school h3, .work_space h3 {
        font-size: 1.1rem;
    }
}