@page {
    size: A4;
    margin: 1rem;
}
:root {
    --ogga: #2c4863;
    --indep: green;
    --smile: #ff8054;
    --ecl: #80242E;

    --grey: #555555;

    --accent-fg: oklch(25% 0.085 275);
    --accent-bg: oklch(90% 0.085 275);
    --accent-border: oklch(50% 0.085 275);
}

[hidden] {
    display: none !important;
}

html {
    background: #eeeeee;
    color: #000000;
    font-family: Nunito, sans-serif;
    font-size: 16px;
}
body {
    background: white;
    width: 47.5rem;
    margin: 1rem auto;
    padding: 1rem;
    box-sizing: border-box;
}
h2 {
    margin: 1rem 0 .5rem;
    font-weight: 700;
    color: var(--accent-fg);
}
a {
    color: var(--accent-fg);
    text-decoration: none;
}
p {
    margin: .5rem 0;
}
header {
    display: flex;
}
header > div {
    flex: 1
}
#name {
    flex: 0 0 14rem;
    margin-left: 2rem;
    text-align: right;
}
#name div.photo > img {
    width: 9rem;
    border-radius: 100%;
}
header h1 {
    font-family: Fredoka, sans-serif;
    font-weight: 600;
    margin: 0;
    color: var(--accent-fg);
}

small {
    color: var(--grey);
    font-size: .9rem;
}

dl, ul {
    margin: .5rem 0;
}
dl:has(~ .fork) {
    margin-bottom: 0;
}
dl.under-fork {
    margin-top: 0;
}
dt {
    font-weight: 700;
    color: var(--accent-fg);
}
dd {
    margin-left: 3rem;
    text-indent: -1.5rem;
}
ul {
    padding: 0 .5rem 0 1.5rem;
}
li {
    list-style: "» ";
}
#profile h2 {
    font-family: Fredoka, sans-serif;
    font-weight: 600;
}
#profile p {
    text-align: justify;
}

#softskills-wrapper {
    flex: 1;
    display: flex;
}
#softskills-wrapper > div {
    flex: 1;
}
#softskills-wrapper > div#softskills {
    flex: 2;
}
#softskills ul {
    column-count: 2;
}
#softskills-wrapper > div#languages {
    flex: .6;
}

#technologies div.table {
    display: grid;
    grid-column-gap: 1.5rem;
    grid-template-columns: min-content repeat(3, 1fr);
}
#technologies div.table div:not(.header) {
    border-top: solid 1px var(--accent-border);
    margin-top: .3rem;
    padding-top: .3rem;
}
#technologies div.table div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
#technologies div.table div span {
    font-size: .9rem;
    background: var(--accent-bg);
    border-radius: 1em;
    padding: 0 .4em;
    margin: .1em;
}

div.chronology div.columns {
    display: flex;
    align-items: start;
}
div.chronology div.columns > * {
    flex: 1;
}

div.chronology dl {
    border-left: solid .3rem;
    padding-left: .5rem;
    margin: 0;
}

div.chronology dl + dl {
    padding-top: 1rem;
}

div.chronology dl.ogga {
    border-color: var(--ogga);
}
div.chronology dl.indep {
    border-color: var(--indep);
}
div.chronology dl.smile {
    border-color: var(--smile);
}
div.chronology dl.ecl {
    border-color: var(--ecl);
}
div.chronology dt span.dates {
    font-weight: normal;
}

h3.company {
    grid-column: text;
    font-size: 130%;
}
h3.company strong {
    margin-right: 1rem;
    font-family: Fredoka, sans-serif;
    font-weight: 600;
}
h3.company small {
    font-weight: normal;
}
h3.company.ogga strong, dl.text.ogga dt {
    color: var(--ogga);
}
h3.company.indep strong, dl.text.indep dt {
    color: var(--indep);
}
h3.company.smile strong, dl.text.smile dt {
    color: var(--smile);
}
h3.company.ecl strong, dl.text.ecl dt {
    color: var(--ecl);
}

@media print {
    html {
        background: none;
    }
    body {
        margin: 0;
        background: none;
        print-color-adjust: exact;
    }
    dl {
        break-inside: avoid;
    }
}