body {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 920px;
    padding: 0 16px;
}
header {
    text-align: center;
    margin-bottom: 20px;
}
h1 {
    font-size: 2.5em;
    margin-bottom: 0;
}

button {
    background-color: #fff;
    border-color: #dbdbdb;
    border-width: 1px;
    color: #18181b;
    cursor: pointer;
    justify-content: center;
    padding: calc(.5em - 1px) 1em;
    text-align: center;
    white-space: nowrap;

    &.active {
        background-color: #1d293d;
        color: #fff;
    }
}

.options {
    display: flex;
    justify-content: space-between;
}

.language-selector {
    display: flex;
}

.contact-info {
    max-width: 750px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    list-style: none;
}

.separator {
    margin: 0 5px;
    font-size: 10px;
    color: #1d293d;
}


section h3 {
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
    margin-top: 30px;
}


.job-header {
    display: flex;
    justify-content: space-between;

    p {
        margin: 0;
    }
}

.job, .school {
    margin-bottom: 20px;
}

.job {
    padding: 10px;
}

.job:nth-child(even) {
    background-color: #f5f5f5;
    border-radius: 3px;
}

.school {
    margin-bottom: 16px;
}

.school-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.school-title {
    font-weight: bold;
}

.school-period {
    color: #444;
}

.school-degree {
    margin: 4px 0 0 0;
}

.job-title {
    font-weight: bold;
}

.date {
    text-align: right;
}

.skills-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 40px;
}

.skill-category {
    display: flex;
    gap: 8px;
}

.skill-label {
    font-weight: bold;
    white-space: nowrap;
}

.skill-items {
    color: #444;
}

@media (max-width: 768px) {
    .contact-info {
        flex-direction: column;
        gap: 0;


    }

    .contact-info .separator {
        display: none;
    }

    .contact-info li {
        margin: 5px;
    }

    h1 {
        font-size: 2em;
    }

    .job-header {
        flex-wrap: wrap;
    }

    .job:nth-child(even) {
        background-color: #fff;
    }


    .job {


        li {
            padding: 0 4px;
            margin-bottom: 4px
        }

        li:nth-child(even) {
            border-radius: 5px;
            background-color: #f4f4f5;
        }

    }

    .skills-grid {
        grid-template-columns: 1fr;
    }

}

@media print {
    body {
        font-size: 12pt;
        color: #000;
        max-width: 100%;
    }

    header, section h3 {
        page-break-after: avoid;
    }

    .no-print {
        display: none !important;
    }

    .contact-info {
        display: flex;
        flex-direction: row;
        gap: 0;
    }

    .job, .school {
        page-break-inside: avoid;
    }

    .job:nth-child(even) {
        background-color: #fff;
    }

    .job li:nth-child(even) {
        background-color: #fff;
    }

    a {
        text-decoration: none;
        color: #000;
    }

    section h3 {
        border-bottom: 2px solid #333;
    }

    .skills-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 4px 24px;
    }

    .skill-category {
        gap: 4px;
    }
}