:root {
    --header-background-color: hsl(0, 0%, 95%);

    --skill-color: hsl(0, 0%, 90%);
    --language-color: hsl(40, 100%, 90%);
    --tool-color: hsl(80, 100%, 90%);
    --framework-color: hsl(120, 100%, 90%);
    --database-color: hsl(160, 100%, 90%);
    --cloud-color: hsl(200, 100%, 90%);
    --library-color: hsl(240, 100%, 90%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --header-background-color: hsl(0, 0%, 50%);

        --skill-color: hsl(0, 0%, 25%);
        --language-color: hsl(40, 100%, 25%);
        --tool-color: hsl(80, 100%, 25%);
        --framework-color: hsl(120, 100%, 25%);
        --library-color: hsl(160, 100%, 25%);
        --database-color: hsl(200, 100%, 25%);
        --cloud-color: hsl(240, 100%, 25%);
    }
}

nav>ol ol {
    margin-left: 1em;
}

blockquote {
    font-style: italic;
    margin: 1em 2em;
    border-left: solid 2px var(--muted-font-color);
    padding: 0 1em;
}

article {
    display: flex;
    flex-direction: column;

    align-items: center;
}

article>nav {
    width: 100%;
    padding: 1em;

    font-family: var(--sans-serif-family);
}

article>nav li {
    font-size: 1.25rem;
    margin: 0.5em 0;
}

section {
    width: 100%;
}

header {
    justify-self: start;
}

header {
    font-family: var(--serif-family);
}

section#jobs {
    display: flex;
    flex-direction: column;
    align-items: center;
}

section#jobs>header {
    font-size: 2em;
    margin: 1em 0;
    text-align: center;
}

section#jobs>header,
section#projects>header {
    font-size: 1.25em;

    width: 100%;

    background-color: var(--header-background-color);
    border-radius: 0.25em;
    text-align: center;
    padding: 0.25em 0.5em;

    margin: 0.25em 0;
}

section#projects {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 3em;
}


section#education {
    width: 70ch;
    max-width: 100vw;
}

#education>section>header {
    background-color: var(--header-background-color);
    border-radius: 0.25em;
    text-align: center;
    padding: 0.25em 0.5em;
    margin-bottom: 0.25em;
}

#experience+#education {
    margin-top: 3em;
}

section>header {
    font-family: var(--sans-serif-family);
    text-transform: uppercase;
}

article>header,
section>header {
    font-weight: bold;
}

ul.skill>li:nth-of-type(5n)+li {
    /* Separate long lists of skills */
    margin-top: 0.5em;
}

q {
    font-style: italic;
}

ul.project {
    width: 70ch;
    max-width: 100vw;
    align-items: stretch;
    align-self: center;
}

ol.position *+ul.quote {
    margin-top: 0.5em;
}

ul.quote {
    display: flex;
    flex-direction: column;

    row-gap: 1em;
    padding: 0 2em;
}

ul.quote>li {
    display: grid;
    grid-template-areas:
        'quote quote quote    quote'
        '.     name  position relation';
    grid-template-columns: 1fr auto auto auto;
    column-gap: 0.5ch;
}

ul.quote>li>blockquote {
    grid-area: quote;
    margin: 0;
}

ul.quote>li>span.name {
    grid-area: name;
}

ul.quote>li>span.position {
    grid-area: position;
}

ul.quote>li>span.position::before {
    content: "- ";
}

ul.quote>li>span.relation {
    grid-area: relation;
    color: var(--muted-font-color);

    display: inline-flex;
}

ul.quote>li>span.relation::before {
    content: "(";
}

ul.quote>li>span.relation::after {
    content: ")";
}


header.company {
    font-weight: bold;
    font-size: 1.5em;

    text-transform: uppercase;
    text-align: center;

    margin-top: 0.5em;
    margin-bottom: 0.25em;
}

header.job.title {
    margin: 0;
    font-size: 1.25em;
}

ol.job {
    width: 80ch;
    max-width: 100vw;
}

ol.job {
    list-style: none;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    align-self: center;

    row-gap: 2em;
}

ol.position {
    list-style: none;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    row-gap: 1em;

    padding-left: 1em;
    padding-right: 1em;
}

ol.position>li {
    display: grid;
    grid-template-areas:
        'title contract location period';
    grid-template-columns: auto auto 1fr;
    column-gap: 0.5ch;
    grid-auto-rows: auto;

    align-items: baseline;
}

ol.position>li>header.job.title {
    grid-area: title;
}

ol.position>li>aside.location {
    grid-area: location;
    color: var(--muted-font-color);
}

ol.position>li>section.period {
    grid-area: period;
    text-align: right;
}

ol.position>li>aside.contract {
    grid-area: contract;
    color: var(--muted-font-color);
}

ol.position>li>* {
    grid-column: span 4;
}

ul.scholarship {
    display: grid;
    grid-template-areas: 'year amount title institution';
    grid-template-columns: auto auto 1fr auto;
    column-gap: 1em;
    row-gap: 0.5em;
    padding: 1em;
}

ul.scholarship>li {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 4;

    align-items: baseline;
}

ul.scholarship>li>header {
    grid-area: title;
    margin: 0;
    font-weight: normal;
}

ul.scholarship>li>span.year {
    grid-area: year;
}

ul.scholarship>li>span.institution {
    grid-area: institution;
}

ul.scholarship>li>span.amount {
    grid-area: amount;
}

ul.certification {
    list-style: none;

    display: flex;
    flex-direction: column;
}

ul.certification>li {
    display: grid;
    grid-template-areas:
        'title        title verify'
        'organization valid valid';
    grid-template-columns: auto auto 1fr;

    column-gap: 0.5ch;
    row-gap: 0.25ch;

    align-items: baseline;
}

ul.certification>li>header {
    grid-area: title;
    margin: 0;
    font-weight: bold;
}

ul.certification>li>aside {
    grid-area: verify;
}

ul.certification>li>span.institution {
    grid-area: organization;
}

ul.certification>li>section.period {
    grid-area: valid;
    justify-content: right;
}

ul.degree {
    list-style: none;
    display: flex;
    flex-direction: column;
}

ul.degree>li {
    display: grid;
    grid-template-areas:
        'title title period'
        'institution faculty .'
        'skill skill skill';
    grid-template-columns: auto auto 1fr;

    column-gap: 0.5ch;
    row-gap: 0.25ch;

    align-items: baseline;
}

ul.degree>li>header {
    grid-area: title;
    margin: 0;
    font-weight: bold;
}

ul.degree>li>.period {
    grid-area: period;
    text-align: right;
}

ul.degree>li>span.faculty {
    grid-area: faculty;
}

ul.degree>li>span.institution {
    grid-area: institution;
}

ul.degree>li>ul.skill {
    grid-area: skill;
}

ul.project {
    margin-left: 0;
    margin-top: 2em;
}

ul.project {
    list-style: none;
    padding-left: 0;

    display: flex;
    flex-direction: column;
    row-gap: 1.5em;
}

ul.project>li {
    display: grid;
    grid-template-areas:
        'title links period'
        'purpose purpose purpose';
    grid-template-columns: auto auto 1fr;

    column-gap: 1ch;

    align-items: baseline;
}

ul.project>li>header {
    grid-area: title;
    margin: 0;
    font-weight: bold;
    font-size: 1.25em;
}

ul.project>li>aside.links {
    grid-area: links;
}

ul.project>li>.period {
    grid-area: period;
    text-align: right;
}

ul.project>li>p {
    grid-area: purpose;
    margin: 0;
    width: 100%;
}

ul.project>li>* {
    grid-column: span 3;
}

ul.project ul.knowledge {
    padding-left: 1em;
    padding-right: 1em;
    margin-top: 0.5em;
}

ol.position ul.skill,
ol.position ul.knowledge {
    padding-left: 0.5em;
}

ul.skill {
    list-style-type: square;
}


header.company {
    border-bottom: solid 1px var(--font-color);
}

section.period {
    flex-direction: row;
    column-gap: 0.5ch;
}

ol.position *+ul.knowledge {
    margin-top: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
}

ul.knowledge {
    list-style: none;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 0.5em;
    row-gap: 0.25em;

    font-family: var(--sans-serif-family);
}


ul.knowledge>li {
    border-radius: 1em;
    padding: 0.25em 0.5em;

    background-color: var(--skill-color);
}

ul.knowledge>li.language {
    background-color: var(--language-color);
}

ul.knowledge>li.tool {
    background-color: var(--tool-color);
}

ul.knowledge>li.framework {
    background-color: var(--framework-color);
}

ul.knowledge>li.library {
    background-color: var(--library-color);
}

ul.knowledge>li.database {
    background-color: var(--database-color);
}

ul.knowledge>li.cloud {
    background-color: var(--cloud-color);
}

ul.knowledge>li.cloud.database {
    background: linear-gradient(135deg, var(--cloud-color) 35%, var(--database-color) 65%);
}

ul.knowledge>li.tool.language {
    background: linear-gradient(135deg, var(--tool-color) 35%, var(--language-color) 65%);
}


@media (width < 80ch) {
    ol.position {
        padding-left: 0;
        padding-right: 0;
    }

    ol.position ul.skill,
    ol.position ul.knowledge {
        padding-left: 0;
    }

    ol.position ul.quote {
        padding: 0;
    }

    ol.position>li {
        grid-template-areas:
            'title title title'
            'contract location period';
        grid-template-columns: auto auto 1fr;
    }

    ol.position>li>* {
        grid-column: span 3;
    }

    ul.project>li {
        grid-template-areas:
            'title title'
            'links period'
            'purpose purpose';
        grid-template-columns: auto 1fr;
    }

    ul.project>li>* {
        grid-column: span 2;
    }

    ul.project ul.skill,
    ul.project ul.knowledge {
        padding-left: 0;
    }


    ul.degree>li {
        grid-template-areas:
            'title title'
            'institution faculty'
            'period period'
            'skill skill';
        grid-template-columns: auto 1fr;
    }


    ul.certification>li {
        grid-template-areas:
            'title title'
            'organization verify'
            'valid valid';
        grid-template-columns: auto 1fr;
    }


    ul.scholarship {
        grid-template-columns: auto 1fr;
        padding-left: 0;
        padding-right: 0;
    }

    ul.scholarship>li {
        grid-template-areas:
            'year institution'
            'amount title';
        grid-template-columns: subgrid;
    }
}