body {
    max-width: 100%;
}

main {
    display: grid;
    grid-template-columns: 75% 25%;
    grid-gap: 10px;
}

.first-column {
    grid-column: 1 / 2;
    grid-row: 1;
}

.second-column {
    grid-column: 2 / 2;
    grid-row: 1 / 3;
}

header {
    display: flex;
    flex-direction: row;
}

.header-image {
    max-width: 100%;
}

.gb-flag {
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNjAgMzAiIGhlaWdodD0iNjAwIj4NCjxkZWZzPg0KPGNsaXBQYXRoIGlkPSJ0Ij4NCjxwYXRoIGQ9Im0zMCwxNWgzMHYxNXp2MTVoLTMwemgtMzB2LTE1enYtMTVoMzB6Ii8+DQo8L2NsaXBQYXRoPg0KPC9kZWZzPg0KPHBhdGggZmlsbD0iIzAwMjQ3ZCIgZD0ibTAsMHYzMGg2MHYtMzB6Ii8+DQo8cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNiIgZD0ibTAsMGw2MCwzMG0wLTMwbC02MCwzMCIvPg0KPHBhdGggc3Ryb2tlPSIjY2YxNDJiIiBzdHJva2Utd2lkdGg9IjQiIGQ9Im0wLDBsNjAsMzBtMC0zMGwtNjAsMzAiIGNsaXAtcGF0aD0idXJsKCN0KSIvPg0KPHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEwIiBkPSJtMzAsMHYzMG0tMzAtMTVoNjAiLz4NCjxwYXRoIHN0cm9rZT0iI2NmMTQyYiIgc3Ryb2tlLXdpZHRoPSI2IiBkPSJtMzAsMHYzMG0tMzAtMTVoNjAiLz4NCjwvc3ZnPg0K');
    width: 1.5em;
    height: 0.75em;
    display: inline-block;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left top;
    -webkit-print-color-adjust: exact !important;
}

.fr-flag {
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MDAgNjAwIj4NCjxwYXRoIGZpbGw9IiNlZDI5MzkiIGQ9Im0wLDBoOTAwdjYwMGgtOTAweiIvPg0KPHBhdGggZmlsbD0iI2ZmZiIgZD0ibTAsMGg2MDB2NjAwaC02MDB6Ii8+DQo8cGF0aCBmaWxsPSIjMDAyMzk1IiBkPSJtMCwwaDMwMHY2MDBoLTMwMHoiLz4NCjwvc3ZnPg0K');
    width: 1.5em;
    height: 0.75em;
    display: inline-block;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left top;
    -webkit-print-color-adjust: exact !important;
}

.fas, .fab, .flag {
    margin-right: 0.5em;
}

.li-header {
    font-weight: bolder;
}

#personal-data p {
    padding-left: 1.5em;
    margin-top: 0;
    margin-bottom: 0;
}

#skills p {
    padding-left: 1.5em;
    margin-top: 0;
    margin-bottom: 0;
}

#skills h4 {
    padding-left: 1.5em;
    margin-top: 1em;
    margin-bottom: 1em;
}

#languages p {
    padding-left: 1.5em;
    margin-top: 0;
    margin-bottom: 0;
}

.section-title {
    margin-top: 1.5em;
}

.timeline * {
    box-sizing: border-box;
}

.timeline {
    -webkit-print-color-adjust: exact !important;
    position: relative;
    margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: goldenrod;
    top: 0;
    bottom: 0;
    left: 5%;
    margin-left: -3px;
}

.tl-item {
    width: 100%;
}

.tl-item-title {
    padding: 10px 30px;
    position: relative;
    width: 95%;
    left: 5%;
    background-color: white;
    border-radius: 6px;
}

/* circle for title*/
.tl-item-title::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: white;
    border: 5px solid goldenrod;
    top: 5px;
    border-radius: 50%;
    z-index: 1;
    left: -15px;
}

/* circle for subtitle*/
.tl-item-subtitle::after {
    content: '';
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    background-color: goldenrod;
    border: 5px solid goldenrod;
    top: -1px;
    border-radius: 50%;
    z-index: 1;
    left: -9px;
}

.tl-item-content {
    padding: 0 40px;
    position: relative;
    width: 95%;
    left: 5%;
}

.tl-item-section-title {
    padding: 0 40px;
    position: relative;
    width: 95%;
    left: 5%;
}

/* circle*/
.tl-item-section-title::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: goldenrod;
    border: 5px solid goldenrod;
    top: -5px;
    border-radius: 50%;
    z-index: 1;
    left: -17px;
}

.tl-item-container {
    background-color: inherit;
    padding: 5px 20px;
    position: relative;
    border-radius: 6px;
}

.timeline p, li {
    text-align: justify;
    text-justify: distribute;
}

@media print {
    html {
        font-size: 9pt;
    }

    h1 {
        font-size: 18pt;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    h2 {
        font-size: 16pt;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    h3 {
        font-size: 12pt;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    h4 {
        font-size: 10pt;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #personal-data p {
        padding-left: 0.5em;
        margin-top: 0;
        margin-bottom: 0;
    }

    #skills p {
        padding-left: 0.5em;
        margin-top: 0;
        margin-bottom: 0;
    }

    #skills h4 {
        padding-left: 0.5em;
        margin-top: 1em;
        margin-bottom: 1em;
    }

    @page {
        size: 21cm 29.7cm;   /*A4*/
        margin: 0; /*webkit says no*/
    }

    body {
        max-width: 100%;
    }

    .tl-item-section-title::after {
        width: 16px;
        height: 16px;
        left: -13px;
        top: -2px;

    }

    .tl-item-subtitle::after {
        width: 6px;
        height: 6px;
        left: -8px;
        top: 0;
    }

    .tl-item-title::after {
        width: 14px;
        height: 14px;
        left: -12px;
        top: 7px;
    }
}