/* =======================================================
 *  Harvard Resume Style
 *  Daniel Alejandro Gamboa Frayre
 = *====================================================== */

:root {

    --text: #222;
    --light-text: #555;
    --border: #d8d8d8;
    --accent: #000;

    --paper-width: 210mm;

}

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    font-size: 16px;

}

body {

    font-family: "Source Sans 3", Arial, sans-serif;

    background: #efefef;

    color: var(--text);

    line-height: 1.65;

    padding: 50px 0;

}

/* =======================================================
 *  Paper
 = *====================================================== */

.container {

    width: 210mm;

    max-width: 95%;

    margin: auto;

    background: white;

    padding: 45px 60px;

    box-shadow:
    0 4px 20px rgba(0,0,0,.08);

}

/* =======================================================
 *  Header
 = *====================================================== */

header {

    text-align: center;

    margin-bottom: 30px;

}

header h1 {

    font-family: "Libre Baskerville", serif;

    font-size: 2.2rem;

    letter-spacing: 1px;

    margin-bottom: 8px;

}

.title {

    font-size: 1.1rem;

    color: var(--light-text);

    margin-bottom: 14px;

}

.contact {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 16px;

    font-size: .95rem;

    color: #555;

}

/* =======================================================
 *  Divider
 = *====================================================== */

hr {

    border: none;

    border-top: 2px solid var(--accent);

    margin: 30px 0;

}

/* =======================================================
 *  Sections
 = *====================================================== */

section {

    margin-bottom: 40px;

}

section:last-child {

    margin-bottom: 0;

}

section h2 {

    font-family: "Libre Baskerville", serif;

    font-size: 1.25rem;

    margin-bottom: 18px;

    padding-bottom: 6px;

    border-bottom: 1px solid var(--border);

    letter-spacing: .5px;

}

section p {

    text-align: justify;

}

/* =======================================================
 *  Skills
 = *====================================================== */

.skills {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    list-style: none;

}

.skills li {

    border: 1px solid var(--border);

    padding: 5px 12px;

    border-radius: 4px;

    font-size: .92rem;

}

/* =======================================================
 *  Experience
 = *====================================================== */

.job {

    margin-bottom: 38px;

}

.job:last-child {

    margin-bottom: 0;

}

.job-header {

    margin-bottom: 14px;

}

.job-header h3 {

    font-size: 1.15rem;

    font-weight: 700;

}

.job-meta {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 8px;

    color: var(--light-text);

    font-size: .92rem;

    margin-top: 5px;

}

.job ul {

    margin-left: 20px;

    margin-bottom: 16px;

}

.job li {

    margin-bottom: 8px;

}

.job h4 {

    margin-top: 18px;

    margin-bottom: 10px;

    font-size: 1rem;

    font-weight: 600;

}

/* =======================================================
 *  Education
 = *====================================================== */

.education h3 {

    font-size: 1.05rem;

    margin-bottom: 6px;

}

.education p {

    margin-bottom: 5px;

}

/* =======================================================
 *  Footer
 = *====================================================== */

footer {

    border-top: 1px solid var(--border);

    margin-top: 40px;

    padding-top: 20px;

    text-align: center;

    color: var(--light-text);

    font-size: .9rem;

}

/* =======================================================
 *  Links
 = *====================================================== */

a {

    color: inherit;

    text-decoration: none;

}

a:hover {

    text-decoration: underline;

}

/* =======================================================
 *  Print
 = *====================================================== */

@page {

    size: A4;

    margin: 12mm;

}

@media print {

    body {

        background: white;

        padding: 0;

    }

    .container {

        width: auto;

        max-width: none;

        margin: 0;

        padding: 0;

        box-shadow: none;

    }

    a {

        text-decoration: none;

        color: black;

    }

}

/* =======================================================
 *  Responsive
 = *====================================================== */

@media (max-width: 768px) {

    .container {

        padding: 30px;

    }

    .job-meta {

        flex-direction: column;

        gap: 3px;

    }

    .contact {

        flex-direction: column;

        gap: 4px;

    }

    header h1 {

        font-size: 1.8rem;

    }

}

.download-section {

    margin-top: 22px;

    display: flex;

    justify-content: center;

}

.download-btn {

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 16px;

    background: transparent;

    border: 1px solid #d0d7de;

    color: #24292f;

    border-radius: 6px;

    font-weight: 600;

    text-decoration: none;

    transition: .2s ease;

}

.download-btn:hover {

    background: #f6f8fa;

    border-color: #8c959f;

    color: #24292f;

}

.download-btn i {

    color: #e63946;

}