body {
    margin: 0;
    padding: 0;
    background-color: white;
    font: 12pt "Tahoma";
    color: rgb(101, 102, 100);
    letter-spacing: 2px;
}

.bold {
    font-weight: bold;
}

.page {
    margin: 50px
}

h3 {
    margin: 0
}

h1 { 
    font-size: 3em;
}

.container-new {
    display: grid;
    grid-template-columns: 50% 20px auto;
    grid-template-rows: auto;
    grid-template-areas: 
        "header     header     header"
        "left       separator  right"
        "left       separator  right"
        "left       separator  right"
        "left       separator  right"
        "left       separator  right"
        "left       separator  right"
        "left       separator  right"
        "experience experience experience";
    gap: 20px 10px;
}

.picture {
    grid-area:  1 / 1;
    justify-self: center;
}

.me { 
    grid-area:  1 / 2 / 2 / 4;
    align-self: center
}

.contact {
    grid-area: 2 / 1;
} 

.profile {
    grid-area: 2 / 3;
}

.profile > .content {
    font-size: 15pt
}

.courses {
    grid-area: 3 / 1 / 5 / 2;
}

.language {
    grid-area: 3 / 3;
}

.cloud {
    grid-area: 5 / 1;
}

.practices {
    grid-area: 4 / 3;
}

.framework {
    grid-area: 6 / 1;
}

.tools {
    grid-area: 5 / 3;
}

.methodologies {
    grid-area: 7 / 1;
}

.architectures {
    grid-area: 6 / 3;
}

.databases {
    grid-area: 7 / 3;
}

.experience {
    grid-area: experience;
    display: grid;
    grid-template-columns: 40px auto;
    grid-template-rows: auto;
    grid-template-areas: 
        "title    title"
        "timeline work";
    gap: 10px 10px;
    margin-top: 10px;
}

.experience > .title {
    grid-area: title;
    letter-spacing: 2.5px;
    border-bottom: 2px solid gray;
    height: 40px;
    display: flex;
}

.experience > .title > h3 {
    align-self: center;
}

.experience > .timeline {
    grid-area: timeline;
    width: 2px;
    justify-self: center;
    background-color: gray;
    margin: 10px 0 10px 0;
}

.experience > .work {
    grid-area: work;
}

.border {
    grid-area: separator;
    width: 2px;
    justify-self: center;
    background-color: gray;
    margin: 10px 0 10px 0;
}

.picture > img {
    border: 3px solid #ffffff;
    border-radius: 50%;
    height: 150px;
    width: 150px;
}

.labeled {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 30px;
}

.labeled > div {
    padding: 4px 4px 4px 4px;
    border-radius: 5px;
    border: 1px solid gray;
    text-align: center;
    background-color: rgb(190, 190, 190);
    /* font-weight: bold; */
    font-size: 10pt;
    white-space: nowrap;
    font-style: italic;
}

.labeled > div {
    margin: 3px 3px 3px 3px;
}

.content.labeled {
    padding-left: 30px;
}

.list > div:not(.title) {
    padding: 4px 4px 4px 60px;
    text-align: left;
    position: relative;
}

.list > div:not(.title):before {
    content: '';
    border-radius: 50%;
    border: 1px solid rgb(150, 150, 150);
    background-color: rgb(150, 150, 150);
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 25px;
    transform: translateY(-50%);
}

.list > div:not(:last-child) {
    margin-bottom: 5px;
}

.section > .title {
    letter-spacing: 2.5px;
    border-bottom: 2px solid gray;
    height: 40px;
    display: flex;
}

.section > .title > h3 {
    align-self: center;
}

.section > .content {
    padding-top: 15px;
}

.section {
    margin-bottom: 5px;
}

.section > .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section > .icon:after {
    font-size: 40px;
    font-weight:900;
    z-index: -1;
}

.experience > .title > .icon {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.experience > .title > .icon:after {
    font-family: "Font Awesome 5 Free";
    content: "\f0b1";
    font-size: 20px;
    font-weight:900;
    z-index: -1;
}

.section.work .job {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 
        "title" 
        "company"
        "details";
    gap: 10px 0;
}

.section.work .job:not(:last-child) {
    margin-bottom: 40px;
}

.section.work .job > .title {
    grid-area: title;
    position: relative;
    font-size: 1.2em;
    font-weight: 600;
}

.section.work .job > .title::before {
    content: '';    
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgb(150, 150, 150);
    background-color: lightgray;
    width: 10px;
    height: 10px;
    left: -37px;
    top: 50%;
    transform: translateY(-50%);
}

.section.work .job .company {
    grid-area: company;
    font-style: italic;
    margin-bottom: 15px;
}

.section.work .job .details {
    grid-area: details;
}

.section.work .job > .details .title {
    font-style: italic;
    margin-bottom: 5px;
}

.section.work .job .project {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas: 
        "name name name name"
        "description features responsibilities stack";
    gap: 15px 10px;
    border: 1px dashed gray;
    border-radius: 10px;
    padding: 10px;
}

.section.work .job .project > .name {
    grid-area: name;
}

.section.work .job .project > .description {
    grid-area: description;
}

.section.work .job .project > .features {
    grid-area: features;
}

.section.work .job .project > .responsibilities {
    grid-area: responsibilities;
}

.section.work .job .project > .stack > .labeled{
    grid-area: stack;
    padding-left: 0;
}

.section.work .job .project .list *:not(.title){
    padding: 4px 4px 4px 30px;
}

.section.work .job .project .list *::before{
    left:10px;
}

.section.work .job .project:not(:last-child){
    margin-bottom: 25px;
}

.section.work .job .project > *:not(:last-child){
    margin-bottom: 7px;
}

.section > .title > .icon:after {
    font-size: 20px;
    font-weight:900;
    z-index: -1;
}

.section > .title {
    display: flex;
    align-items: center;
}
.section > .title > *:not(:last-child){
    margin-right: 10px;
}

/* Language */

.section.language > .title > .icon:after {
    font-family: "Font Awesome 5 Free";
    content: "\f11c";
}

.section.language > .content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
} 

.section.language > .content > .item{
    display: flex;
    flex-direction: column;
    flex: 1 1 0px
} 

.section.language > .content > .item > span[class^="icon-"]{
    font-size: 30px;
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
} 

.section.language > .content > .item > span[class^="icon-"]:before {
    color: rgb(101, 102, 100);
}

.section.language > .content > .item > span.name{
    text-align: center;
}

.section.language > .content > .item:not(:last-child) {
    margin-right: 10px;
}



/* Courses */
.section.courses > .title > .icon:after {
    font-family: "Font Awesome 5 Free";
    content: "\f501";
}

/* Tools */
.section.tools > .title > .icon:after {
    font-family: "Font Awesome 5 Free";
    content: "\f0ad";
}

/* Methodologies */

.section.methodologies > .title > .icon:after {
    font-family: "Font Awesome 5 Free";
    content: "\f5eb";
}

/* Frameworks and Libraries*/
.section.framework > .title > .icon:after {
    font-family: "icomoon";
    content: "\e942";
}

/* Cloud */
.section.cloud > .title > .icon:after {
    font-family: "Font Awesome 5 Free";
    content: "\f0c2";
}

/* Architectures */
.section.architectures > .title > .icon:after {
    font-family: "icomoon";
    content: "\ea62";
}

/* Practicies */
.section.practices > .title > .icon:after {
    font-family: "Font Awesome 5 Free";
    content: "\f164";
}

/* Databases */
.section.databases > .title > .icon:after {
    font-family: "Font Awesome 5 Free";
    content: "\f1c0";
}

/* Profile */
.section.profile > .title > .icon:after {
    font-family: "Font Awesome 5 Free";
    content: "\f2bd";
}

/* Contact */
.section.contact > .title > .icon:after {
    font-family: "Font Awesome 5 Free";
    content: "\f2b9";
}

.section.contact .item {
    display: flex;
    flex-direction: row;
    align-content: center;
}

.section.contact .item:not(:last-child) {
    margin-bottom: 15px;
}

.section.contact .item .icon {
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section.contact .item > .details { 
    display: flex;
    flex-direction: column;
}

.section.contact .item > .details *:not(:last-child)  {
    margin-bottom: 5px 
}

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}