@font-face {
    font-family: Fira Sans Condensed;
    font-weight: 400;
    src: url(fonts/FiraSansCondensed-Regular.ttf);
}

@font-face {
    font-family: Fira Sans Condensed;
    font-style: italic;
    font-weight: 400;
    src: url(fonts/FiraSansCondensed-Italic.ttf);
}

@font-face {
    font-family: Fira Sans Condensed;
    font-weight: 300;
    src: url(fonts/FiraSansCondensed-Light.ttf);
}

@font-face {
    font-family: Fira Sans Condensed;
    font-weight: 700;
    src: url(fonts/FiraSansCondensed-Bold.ttf);
}

@font-face {
    font-family: Fira Sans Condensed;
    font-weight: 500;
    src: url(fonts/FiraSansCondensed-SemiBold.ttf);
}

html {
    color: #393939;
    font-family: Fira Sans Condensed;
    font-size: 9pt;
    font-weight: 400;
    line-height: 1.5;
}

:root {
    --page-padding: 2rem;
    --sidebar-width: 50mm;
    --header-height: 35mm;
    --background-color: rgb(249, 249, 249);
    --background-color-highlight: rgb(242, 242, 242);
}

body {
    margin: 0;
}

@page letter {
    padding: 80mm 25mm 20mm 20mm;
    margin: 0;

    @top-center {
        content: element(letter_top);
    }

    @bottom-center {
        content: element(letter_bottom);
    }
}

@page cv {
    background-color: var(--background-color);
    margin: 0 0 0 60mm;
    padding: var(--page-padding);

    @left-top {
        content: element(side);
    }
}

div#address {
    top: -50mm;
    font-size: 11pt;
    position: absolute;
    page: letter;
    font-weight: 300;
}

div#address ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

footer {
    page: letter;
    position: running(letter_bottom);
    width: 210mm;
    height: 25mm;
    padding: 2mm 25mm 2mm 25mm;
    text-align: center;
    color: white;
    background: linear-gradient(
        135deg,
        rgba(18, 78, 120, 1) 0%,
        rgba(14, 44, 69, 1) 100%
    );
}

footer > a {
    display: inline-block;
    color: inherit;
    text-decoration: inherit;
}

footer > a.icon::before {
    margin-left: 4mm;
    display: inline-block;
    width: 8pt;
    height: 8pt;
    background-size: 8pt 8pt;
    margin-right: 1mm;
    background-repeat: no-repeat;
    content: "";
    margin-right: 2mm;
}

div#subject {
    page: letter;
    position: absolute;
    font-weight: 500;
    top: -10mm;
    font-size: 11pt;
}

div#date {
    page: letter;
    position: absolute;
    text-align: right;
    top: -20mm;
    width: 165mm;
    font-size: 11pt;
    font-style: italic;
}

article#letter {
    page: letter;
    break-before: page;
    text-align: justify;
    font-size: 10pt;
    line-height: 1.1;
}

div#letter_top {
    position: running(letter_top);
    width: 210mm;
    height: 10mm;
    background: linear-gradient(
        135deg,
        rgba(18, 78, 120, 1) 0%,
        rgba(14, 44, 69, 1) 100%
    );
}

div#appended {
    font-weight: 300;
    padding-top: 5mm;
    opacity: 0.8;
}

header {
    height: var(--header-height);
    page: cv;
    padding: 8mm 0 4mm 0;
}

header #name {
    font-size: 40pt;
    font-weight: bolder;
}

header #name #first_name {
    padding-right: 6pt;
}

header #description {
    font-size: 11pt;
}

aside {
    position: running(side);
    background: #124e78;
    background: linear-gradient(
        135deg,
        rgba(18, 78, 120, 1) 0%,
        rgba(14, 44, 69, 1) 100%
    );
    width: var(--sidebar-width);
    height: 100%;
    color: white;
    padding: 5mm 5mm 5mm 5mm;
}

aside #profile_image {
    border-radius: 50%;
    border: 1mm solid var(--background-color);
    width: 75%;
    display: block;
    margin: auto;
    margin-bottom: 8mm;
}

aside #contact > a {
    display: block;
    color: inherit;
    text-decoration: inherit;
}

aside #contact > a::before {
    display: inline-block;
    width: 8pt;
    height: 8pt;
    background-size: 8pt 8pt;
    margin-right: 1mm;
    background-repeat: no-repeat;
    content: "";
}

.address_icon::before {
    background-image: url(icons/house-fill.svg);
}

.phone_icon::before {
    background-image: url(icons/telephone-fill.svg);
}

.mail_icon::before {
    background-image: url(icons/envelope-at-fill.svg);
}

.github_icon::before {
    background-image: url(icons/github.svg);
}

.linkedin_icon::before {
    background-image: url(icons/linkedin.svg);
}

aside h1 {
    font-size: 13pt;
    padding: 2mm 0 0 0;
    margin: 0;
}

aside ul {
    margin: 0;
    padding: 0 0 0 2mm;
}

aside .skills a {
    color: inherit;
    text-decoration: inherit;
}

aside .skills ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

aside .skills li.skilllevel_4::before {
    content: "●●●◐";
    padding-right: 1mm;
}

aside .skills li.skilllevel_3::before {
    content: "●●●○";
    padding-right: 1mm;
}

aside .skills li.skilllevel_2::before {
    content: "●●○○";
    padding-right: 1mm;
}

aside .skills li.skilllevel_1::before {
    content: "●○○○";
    padding-right: 1mm;
}

aside .skills li.other {
    padding-top: 1mm;
}

aside .skills li.certificate::before {
    padding-right: 1mm;
    background-image: url(icons/patch-check-fill.svg);
    display: inline-block;
    width: 8pt;
    height: 8pt;
    background-size: 8pt 8pt;
    margin-right: 1mm;
    background-repeat: no-repeat;
    content: "";
}

aside .experience {
    margin-bottom: 4mm;
}

aside .experience > .title {
    font-weight: 500;
}

aside .experience > .time {
    text-align: right;
    font-size: 7pt;
    opacity: 0.5;
    line-height: 1;
}

aside .experience > .description {
    font-weight: 200;
    font-size: 7pt;
}

.skills span.specification {
    display: block;
    font-weight: 200;
    opacity: 0.5;
    font-size: 7pt;
}

.skills span.inline-specification {
    padding-left: 2mm;
    font-weight: 200;
    opacity: 0.5;
    font-size: 7pt;
}

main section > h1 {
    padding: 5mm 0 0 0;
    margin: 0;
}

main .experience {
    margin-bottom: 2mm;
    border-radius: 2mm;
    padding: 1.5mm;
    background-color: var(--background-color-highlight);
    padding-left: 30mm;
}

main .experience .sub_experience {
    padding-top: 1mm;
}

main .experience .sub_experience .title {
    font-weight: 500;
}

main .experience .sub_experience .time {
    font-weight: 300;
}

main .experience ul {
    margin: 0;
    padding: 0mm 2mm;
}

main .experience .title {
    font-weight: bolder;
    display: inline-block;
}

main .experience .institution {
    display: inline-block;
    padding-left: 2mm;
}

main .experience .time {
    position: absolute;
    left: 2mm;
}

.signature {
    max-width: 33%;
}
