:root {
    --gray: #8a8a8a;
}

html {
    font-family: "JetBrains Mono", Arial, sans-serif;
}

.a4 {
    max-width: 595pt;
    max-height: 842pt;
    margin-left: auto;
    margin-right: auto;
}

.icon {
    --icon-dim: 1.5rem;
    width: var(--icon-dim);
    height: var(--icon-dim);
}

body {
    display: grid;

    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 2rem;

    padding-top: 2rem;
    @media print {
        padding-top: 0;
    }
}

header {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: start;
    align-items: center;
    margin-bottom: 2rem;

    grid-column-start: 1;
    grid-row-start: 1;
}

main {
    grid-column-start: 1;
    grid-row-start: 2;
}

menu {
    grid-column-start: 2;
    grid-row-start: 1;
}

aside {
    grid-column-start: 2;
    grid-row-start: 2;
}

main > *:not(:last-child) {
    margin-bottom: 1.5rem
}

.experience:not(:last-child) {
    margin-bottom: 1rem
}

.pfp {
    border-radius: 50%;

    width: 5rem;
    height: 5rem;
}

menu.links {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding: 0;

    margin-bottom: 1rem;
}

.experience-time-span {
    font-size: 0.85rem;
    color: var(--gray);
}


aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.skills-section:not(:last-child) {
    margin-bottom: 0.5rem;
}

dl.details {
    display: grid;
    grid-template-columns: auto auto;

    justify-content: start;
    column-gap: 1rem;
    row-gap: 0.25rem;
}


@media print {
    .experience {
        page-break-inside: avoid;
    }
}