*{
    box-sizing: content-box;
    margin: 0;
    padding: 0;
}
body{
    font-size: 20px; 
}
h1{
    color: var(--color-titles);
}
:root{
    --background-color: #fff;
    --color-titles:rgb(51, 51, 51);
    --color-titles-numbers: rgb(51, 51, 51,0.4);
    --font-family-titles: 'Times New Roman';
    --color-border: rgb(51, 51, 51,0.2);
    --font-family-paragraphs: "Helvetica";
}
main{


    width: 100%;
    height: auto;
    margin: 0;
    padding-top: 8%;
    font-family: var(--font-family-titles);
    font-weight:normal;
    font-size: 3rem;
    display: flex;
    justify-content: center;
    gap: 7%;
    .paragraphs{
        font-family: var(--font-family-paragraphs);
        font-weight: lighter;
        font-size: 1.5rem;
    }
}

#content-left{


    grid-column: 1;
    width: 25% ;
    height: 100%;
    padding: 0;
    margin-left: 12%;
    display: flex;
    justify-items: left;
    overflow: hidden;
    .box-content-left{
        width: 100%;
        overflow: hidden;
        font-weight: normal;
        color: var(--font-family-titles);
        .content-box-project{
            gap: 0;
        }
    } 
    #box-img-content-left {
        width: 100%;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
#content-project{

    
    border-left: var(--color-border) solid 2px ;
    width: 75% ;
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    .box-contents-project{
        .text-top-content-project{
            font-size: 1.5rem;
        }
        .content-box-project{
            margin-right: 10%;
            .img-content-box-project{
                width: 100%;
            }
            .box-pie{
                margin-top: 2%;
                display: flex;
                gap: 5%;
                .sub-titles{
                    color: var(--color-titles);
                }

            }
        }

    }
}