@page {
    margin: 4mm 0mm 0mm 0mm;
}
body {
    font: 15px/1.5 Oswald, sans-serif,Arial;
    padding: 0;
    width: 95%;
    background-color: whitesmoke;
    color: black;
    margin: auto;
}

a{
    text-decoration: none;
    font-weight: bold;
    color: black;
    text-transform: uppercase;
}
.section-title {
    font-size: 30px;
    font-weight: bold;
    height: 40px;
    text-align: center;
}

.little-text {
    font-size: 12px;
    font-style: italic;
    text-transform: capitalize;
}

.message-small {
    font-size: 10px;
}

.message-small-black {
    font-size: 10px;
    font-weight: bold;
}

.message-medium-justified {
    font-size: 16px;
    text-align: justify;
    text-justify: inter-word;
}

.message-medium {
    font-size: 16px;
}

.message-title {
    font-size: 22px;
    font-weight: bold;
    overflow: hidden;
}

.color-dark {
    color: rgb(165, 120, 49);
    font-weight: bolder;
}

.main-grid {
    display: grid; 
    
    grid-template-rows: 0fr 10fr 0fr;
    grid-template-areas:
        "header"
        "article"
        "footer"
}
.header {
    grid-area: header;
    width: 90%;
    margin: auto;
    text-align: center;
    font-size: 50px;
    border-bottom: 3px solid gray;
}

.header-content {
    display: flex;
    align-items: center;
}

.header .logo {
    width: 50%;
    margin: auto;
    font-weight: bold;
    font-family: 'Lobster';
    flex: 1 1 auto;
}

.header .logo .sub{
    font-size: 14;
    font-style: italic;
    margin: auto;
}

.header .extra {
    width: 50%;
    font-size: 15px;
    flex: 1 1 auto;
}

.header .extra ul {
    list-style-type: none;       
}

.header .extra li {
    display: inline;
    padding: 0 20px 0 20px;        
}
.article {
    grid-area: article;
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 8fr) minmax(0, 2fr);
    grid-gap: 10px;
    grid-template-areas:
        "letter letter letter"
        "skills professional studies"
}
.div-letter {
    grid-area: letter;
    text-align: justify;
    text-justify: auto;
    font-style: italic;
    font-size: 15px;
    border-bottom: 1px solid gray;
    padding: 5px 0px 5px 0px;
}

.column-side {
    grid-area: skills;
    display: flex;
    flex-direction: column;
    padding-right: 2px;
    border-right: 1px solid gray;
}

.column-professional {
    grid-area: professional;
    display: flex;
    flex-direction: column;
}
.column-studies {
    grid-area: studies;
    display: flex;
    flex-direction: column;
    padding-left: 2px;
    border-left: 1px solid gray;
}

.footer {
    grid-area: footer;
    text-align: center;
    width: 90%;
    margin: auto;
    border-top: 3px solid gray;
    padding: 5px 0px 5px 0px;
}

.div-cv {
    margin: auto;
    text-align: center;
    width: 100%;
}
  
.icon-standard {
    pointer-events: fill; 
    width: 20px;
    vertical-align: middle;
    /*filter: invert(57%) sepia(4000%) saturate(500%) hue-rotate(346deg) brightness(114%) contrast(97%);*/
}
.icon-standard:hover {
    pointer-events: none;
    width: 20px;
    vertical-align: middle;
    filter: invert(47%) sepia(4000%) saturate(200%) hue-rotate(356deg) brightness(74%) contrast(97%);
}
