:root {
    --p50: #eceff1;
    --p100: #eeeeee;
    --p200: #b0bec5;
    --p300: #90a4ae;
    --p400: #78909c;
    --p500: #607d8b;
    --p600: #546e7a;
    --p700: #455a64;
    --p800: #072942;
    --p900: #062135;
}


}
html {
    background-color: white;
    /*background-color: var(--p50);*/
}
body {
    max-width: 960px;
    background-color: white;
    background-color: var(--p50);
    
    color: var(--p900);
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    margin: auto;
}
* {
    box-sizing: border-box;
}
.grid {
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 10fr;
    grid-template-areas: "hd hd hd hd hd hd hd hd hd hd hd hd" "sk mn mn mn mn mn mn mn mn mn mn mn" "ft ft ft ft ft ft ft ft ft ft ft ft";
}
.header {
    grid-area: hd;
    background-color: var(--p900);
    /*background-image: url(../images/bg4.jpg);*/
    margin: 0px;
    z-index: 100;
    /*box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16), 0 2px 2px rgba(0, 0, 0, 0.23);*/
}
.photo {
    float: left;
    width: 18%;
}

.jobIcon {
    float: left;
    margin: 5px 15px 0 10px;
}

.avatar {
    display: block;
    width: 100px;
    border-radius:50%;
    margin: 0 0 0 20px;
}
.job {
    display: block;
    width: 40px;
    border-radius:50%;
    filter: grayscale(78%);
}

.title {
    margin: auto;
    padding: 15px 15px 0px 5px;
    float: left;
    width: 62%;
    text-align: center;
}
.name {
    color: var(--p100);
    font-weight: 100;
}
.surname {
    color: var(--p50);
    font-weight: 400;
    margin-bottom: 5px;
}
.about {
    /*background-color: rgba(0, 0, 0, .5);*/
    text-indent: 20px;
    text-align: center;
    text-justify: inter-word;
    font-weight: 200;
    color: var(--p100);
    margin: 10px;
}
.coords {
    margin: 0%;
    padding: 5px 0px 5px 0px;
    float: right;
    color: var(--p200);
    font-weight: 200;
    width: 20%;
}
.main {
    padding: 10px;
    grid-area: mn;
    background-color: white;
}
.side {
    margin-top: 15px;
}
.experience {
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 5fr;
    grid-template-areas: "tm jd";
    background-color: white;
    margin: 5px 0 5px 0;
    border-style: solid none none none;
    border-width: 1px;
    border-color: var(--p200);
    /*box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16), 0 2px 2px rgba(0, 0, 0, 0.23);*/
}
.position{
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    color: var(--p900);
}
.timeline {
    width: 100%;
    grid-area: tm;
    display: block;
    margin: auto;
    text-align: left;
}
.tline {
    font-size: 12px;
    font-weight: 50;
    color: var(--p400);
}
.jobdata {
    grid-area: jd;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "re re da" "res res da";
    padding: 1px;
}
.pos {
    grid-area: po;
    font-weight: 100;
    color: var(--p900);
}
.company {
    grid-area: co;
    text-align: left;
}
.data {
    grid-area: da;
    text-align: left;
    padding: 0 5px 0 5px;
}
.resp {
    margin: 0;
    grid-area: re;
}
.results {
    margin: 0;
    grid-area: res;
}
.result{
    font-size: 14px;
    font-weight: 50;
    color: var(--p400);
}
.skills {
    width: auto;
    grid-area: sk;
    padding: 10px;
    background-color: var(--p100);
}
.progress-bar {
    padding: 1px;
    width: 100%;
    height: 5px;
    background-color: var(--p200);
    /*box-shadow: inset 0 2px 2px rgba(0, 0, 0, .2);*/
}
.progress-bar-fill {
    height: 3px;
    width: var(--w);
    background-color: var(--p900);
    animation: prog 2s ease-in-out;
}
@keyframes prog {
    from {
        width: 0%;
    }
    
    to {
        width: var(--w);
    }
}
.activity {
    width: 100%;
    background-color: white;
    margin: 0;
    padding: 10px 10px 10px 0px;
    text-align: justify;
    text-justify: inter-word;
    /*box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16), 0 2px 2px rgba(0, 0, 0, 0.23);*/
}
.footer {
    color: var(--p100);
    vertical-align: middle;
    text-align: center;
    padding: 5px;
    grid-area: ft;
    height: 30px;
    background-color: var(--p900);
    /*background-image: url(../images/bg4.jpg);*/
    /*box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16), 0 2px 2px rgba(0, 0, 0, 0.23);*/
}
p {
    display: inline-block;
    margin: 0;
    font-weight: 300;
    font-size: 14px;
}
h1 {
    display: inline-block;
    margin: 0;
}
h2 {
    display: inline-block;
    margin: 0;
}
h3 {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}
h4 {
    display: inline-block;
    font-weight: 500;
    margin: 0;
}
h5 {
    display: inline-block;
    font-weight: 400;
    margin: 0;
    color: var(--p400);
}
.invert {
    font-size: 12px;
    /*background-color: var(--p400);*/
    padding: 0 1px 0 1px;
    color: var(--p400);
    border-radius: 1px;
}
hr {
    margin: 0;
}
br {
    display: block;
    content: " ";
    margin: 0px;
}
i {
    margin: 0;
    color: var(--p200)
}
a {
    margin: 0;
}
a:link,
a:visited {
    text-decoration: none;
    color: var(--p200);
}
a:hover {
    color: var(--p100);
}
li {
    margin: 0;
}
ul {
    margin: 0;
    padding: 0 0 0 15px;
    list-style: none;
}
li{
    font-size: 10px;
}

@media screen and (max-width: 1000px ) {
    body {
        font-size: 300%;
    }
    .about{
        font-size: 100%;
    }
    .position{
        font-size: 100%;
    }
    .tline{
        font-size: 80%;
    }
    .invert{
        font-size: 50%;
    }
    p{
        font-size: 80%;
    }
    .result{
        font-size: 100%;
    }
    h3{
        font-size: 100%;
        border-weight: 1px;
        border-color: var(--p200);
        border-style: solid none;
    }
    h4{
        text-align: center;
        font-size: 80%;
    }
    .grid {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "hd" "sk " "mn" "ft";
    }
    
    .header {
        background-image: none;
        display: flex;
        flex-wrap: wrap;
    }
    .footer{
        clear: both;
        position: relative;
        height: 250px;
        margin-bottom: -100px;
    }
    
    .photo {
        display: block;
        margin: auto;
        width: 50%;
    }
    
    .avatar {
        border-radius: 50%;
        margin: auto;
        width: 100%;
    }
    
    .title {
        display: block;
        width: 100%;
        text-align: center;
        margin: auto;
    }
    
    .coords {
        width: 100%;
        text-align: center;
    }
    
    .skills {
        display: inline;
        text-align: center;
    }
    
    .coords br {
        display: none;
    }
    
    .main {
        width: 100%;
        text-align: center;
    }
    
    .experience {
        width: 100%;
        grid-template-areas: "tm" "jd";
        display: flex;
        flex-wrap: wrap;
    }
    
    .timeline {
        width: 100%;
        text-align: center;
    }
    
    .jobdata {
        grid-template-areas: "re" "res" "da";
        display: flex;
        flex-wrap: wrap;
    }

    .jobIcon {
        display: block;
        margin: 0 auto;
        width: 100%;
    }
    .job {
        border-radius: 50%;
        display: block;
        margin: 0 auto;
        width: 150px;
    }
    .resp {
        width: 100%;
        text-align: center;
    }
    .position{
        text-align: center;
    }
    
    .results {
        text-align: center;
        width: 100%;
    }
    
    .data {
        width: 100%;
        text-align: center;
    }
    
    li {
        list-style-type: none;
    }
}

@media print {
    @page {
        size: A4;
        padding: 0mm;
        margin: 0mm;
    }
    
    html,
    body {
        width: 210mm;
        height: 297mm;
        padding: 5mm;
    }
    
    * {
        color: black !important;
        box-shadow: none !important;
        transition: none !important;
        animation: none !important;
    }
    
    .header {
        background-image: none;
        border-bottom: 1px solid lightgrey;
    }
    
    .avatar {
        transform: scale(1.2);
        border-radius: 50%;
        border: 1px solid lightgrey;
    }
    .jobIcon {
            display: none;
        }
    .job {
        display: none;
    }

    .title {
        padding: 15px 10px 5px 15px;
    }
    
    .coords {
        padding: 15px 0px 5px 0px;
    }
    
    .side {
        margin-top: 15px !important;
    }
    
    .experience {
        padding: 0px;
        /*border-bottom: 1px solid lightgrey;*/
    }
    
    .skills {
        min-width: 4cm;
        border-right: 1px solid lightgrey;
    }
    
    .progress-bar-fill {
        background-color: grey !important;
        -webkit-print-color-adjust: exact;
    }
    
    .jobdata {
        padding: 0 !important;
        margin: 0%;
    }
    
    .data {
        padding: 0 !important;
        margin: 0%;
    }
    
    .timeline {
        margin: 0;
    }
    
    .resp {
        margin: 0;
    }
    
    .footer {
        border-top: 1px solid lightgrey;
        border-bottom: 1px solid lightgrey;
    }
    
    .about {
        font-size: 14px !important;
        font-weight: 300;
    }
    
    p {
        font-size: 12px !important;
        padding: 0%;
    }
    
    li {
        padding: 0%;
    }
    
    h3 {
        font-size: 16px !important;
        margin: 0% !important;
    }
    
    h4 {
        font-size: 14px !important;
        padding: 0% !important;
    }
    
    h5 {
        font-size: 12px !important;
    }
    
    hr {
        color: lightgrey;
    }
    
    .invert {
        color: lightgrey !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .results {
        margin: 0;
        grid-area: res;
    }
    /*.nobreak {
        page-break-before: auto;
        page-break-after: auto;
        page-break-inside: auto;
    }
    */
    /*.print:last-child {
        page-break-after: auto;
    }*/
}