:root {
    --primary: #000;
    --primary-light: #8a8a8a;
    --primary-lightest: #eaeaea;

    font-family: "JetBrains Mono", Arial, sans-serif;
    @media print {
        font-size: 6.7pt;
    }
}

body {
    max-width:1024px;
    margin-left: auto;
    margin-right: auto;

    color: var(--primary);
}

.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;
    padding-bottom: 2rem;
    @media print {
        padding: 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
}

.experiences-heading {
    display: flex;
    flex-direction: row;
    /*align-items: baseline;*/
    justify-content: start;
    gap: 0.5rem;

    & img {
        width: 2rem;
        height: 2rem;
    }
}

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

.experience > p:not(:last-child) {
    margin-bottom: 0.5rem;
}

.pfp {
    border-radius: 50%;

    width: 8rem;
    height: 8rem;
}

div:has(> .pfp) {
    border-radius: 50%;

    width: 6rem;
    height: 6rem;

    display: flex;
    justify-content: center;
    align-items: center;

    border: 4px solid var(--primary-light);
}

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

    margin-bottom: 1rem;

    @media print {
        flex-direction: column;
    }
}

.external-link {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}

.print-only {
    @media not print {
        display: none;
    }
}

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


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

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

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

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

    & dt {
        font-weight: bolder;
    }
}


@media print {

    p {
        page-break-inside: avoid;
    }

    hgroup, h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }
}

a {
    color: var(--primary-light);

    &:hover {
        color: var(--primary);
    }
}