html, body {
    margin: 0;
    padding: 0;
    color: black;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

main {
    padding: 2rem 3rem;
    line-height: 1.42;
}

h1 {
    font-family: "Arial Black", sans-serif;
    font-size: 1.2rem;
    text-align: center;
    margin: 0 0 0.25rem;
}

h2 {
    font-family: Calibri, sans-serif;
    font-size: 1.42rem;
    font-weight: normal;
    color: darkblue;
    margin-bottom: 0.8rem;
}

ul {
    margin: 0 0 0.33rem;
    padding-left: 2rem;
}

ul li {
    margin: 0 0 0.5rem;
}

.inline-list {
    text-align: center;
    padding: 0;
    list-style: none;
}

.inline-list li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.inline-list li:before {
    display: inline-block;
    width: 1rem;
    content: "●";
    color: silver;
    font-size: 0.85rem;
}

.inline-list li:first-child:before {
    content: "";
    width: 0;
}

.work-info {
    font-size: 9pt;
}

.tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 0;
    color: dimgray;
    font-weight: bold;
}
.tile {
    text-align: center;
    margin: 1rem 0;
    width: 25%;
    max-width: 12rem;
}
.tile h3 {
    font-size: 1.4rem;
    margin: 0;
}
.tile p {
    font-size: 0.9rem;
    margin: 0;
}

.skills h2 {
    margin-top: 0.5rem;
}

.skills li {
    margin-bottom: 0.25rem;
}

.skills .technologies {
    font-size: 0.9rem;
}

article {
    margin: 1.5rem 0;
}

article:first-of-type {
    margin-top: 0;
}

.position { 
    display: grid;
    grid-template-columns: 16em auto 8em 10em;
    grid-template-rows: 1fr;
    gap: 1em 0;
    grid-auto-flow: column;
}

.position * {
    margin: 0;
    font-size: 1rem;
}

.position .workplace {
    font-weight: bold;
}
.position .location {
    text-align: right;
    justify-self: end;
    align-self: end;
}
.position .period {
    font-weight: bold;
    text-align: right;
    justify-self: end;
    align-self: end;
}

.unaccented {
    font-weight: normal;
}

.description {
    font-style: italic;
    margin: 0.5rem 0;
}

.experience .technologies {
    margin: 0.5rem 0;
}

.projects p {
    margin: 0.5rem 0 0;
}

.volunteer .position, .education .position {
    grid-template-columns: 16em auto 10em;
}

.volunteer .position .period, .education .position .period {
    grid-column: 3;
}


footer {
    font-size: 0.8rem;
    color: silver;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
}
footer a {
    text-decoration: none;
    color: silver;
}
.last-updated {
    right: 0
}

/* screen only */
@media screen {
    html {
        background: #f0f0f0;
    }
    
    body {
        max-width: 60rem;
        margin: auto;
    }
    
    main {
        background: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 1rem;
    }
}

/* mobile */
@media screen and (max-width: 600px) {
    html, body {
        max-width: unset;
    }
    
    main {
        padding: 1rem;
    }

    .name {
        margin: 1em 0;
    }

    .inline-list {
        margin-bottom: 1rem;
    }
    .inline-list li {
        margin: 0 0 0.5rem;
    }
    .inline-list li:before {
        font-size: 0.8rem;
        width: 0.6rem;
    }

    li:has(a) {
        line-height: 1.5em;
    }

    .contacts {
        font-size: 0.85rem;
        margin-bottom: 1em;
    }
    
    .contacts li {
        margin-bottom: 0.25em;
    }

    .contacts .email {
        display: inline;
    }
    .contacts .email:after {
        content: "\A";
        white-space: pre; 
    }
    .contacts .github:before {
        content: "";
    }
    
    .work-info {
        line-height: 0.8em;
        margin-bottom: 1.2rem;
        width: 100%;
    }
    
    .work-info .location { width: 100% }
    .work-info .work-authorization:before {
        display: none;
    }
    .visa-sponsorship {}

    .tiles {
        gap: 0;
    }
    .tile {
        width: 50%;
        margin: 1rem 0;
    }
    .tile h3 {
        font-size: 1.4rem;
        margin: 0 0 0.24rem;
    }
    .tile p {
        font-size: 0.9rem;
        margin: 0;
    }

    .skills li {
        margin-bottom: 0.5rem;
    }
    
    .position {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.2rem 0.5rem;
    }
    
    .title {order: 1}
    .period {order: 2; font-size: 0.8rem}
    .workplace {order: 3}
    .location {order: 4; width: unset; font-size: 0.8rem}
    
    .volunteer .project {order: 3; margin-bottom: 0.4rem}
    
    footer {
        margin-right: 1rem;
        margin-left: 1rem;
    }
}

/* print */
@page {
    margin: 0.5in 0.65in 0.63in 0.5in;
    size: 8.5in 11in;
}

@media print {
    * {
        font-size: 10pt;
    }

    main {
        font-size: 10pt;
        box-shadow: none;
        line-height: 1.15;
        padding: 0;
        margin: 0;
    }
    
    article {
        break-inside: avoid;
    }

    h1 {
        font-family: "Arial Black", sans-serif;
        font-size: 12pt;
        margin: 0 0 4pt;
    }

    h2 {
        font-family: Calibri, Arial, sans-serif;
        font-size: 14pt;
        color: mediumblue;
        font-weight: normal;
        margin-top: 12pt;
        margin-bottom: 3pt;
    }

    ul {
        margin: 0 0 4pt;
    }
    
    ul li {
        margin: 0;
    }
    
    .work-info li {
        font-size: 9pt;
    }
    
    .projects p {
        margin-bottom: 1pt;
    }
    
    .projects p:last-child {
        margin-bottom: 0;
    }
    
    footer {
        display: none;
    }
    
    a[data-print-url]:after {
        content: ' (' attr(data-print-url) ')';
        font-size: 0.85em;
        color: gray;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    a[data-print-url] {
        color: gray;
    }
    
    .projects a {
        font-weight: bold;
    }

    .position {
        grid-template-columns: 2.56in 1.85in 1.5in 1.5in;
    }
    
    .volunteer .position {
        grid-template-columns: 2.56in 3.35in 1.5in;
    }

    .project {
        font-weight: bold;
    }

    .print-condensed-01 {
        letter-spacing: -0.1pt;
    }

    .print-condensed-005 {
        letter-spacing: -0.05pt;
    }
}