/* CSS stands for Cascading Style Sheets.
 * It is used to control the appearance of web pages.
 * You are not required to understand much for this beginner tutorial,
 * but comments are provided to introduce new CSS concepts.
 */

/* Set a default font for the page using Google's Roboto */
body {
    font-family: 'Roboto', Arial, sans-serif;
    background: #f4f6f8;
    color: #222;
}

/* Make the resume preview area look like a printed sheet */
.resume-preview {
    min-height: 600px;
    background: #fff;
    max-width: 800px;
    margin: auto;
    border: 1px solid #e0e0e0;
    box-shadow: 0 8px 40px rgba(64,64,64,0.10);
    font-size: 16px;
}

.resume-header {
    border-bottom: 3px solid #004aad;
    padding-bottom: 12px;
    margin-bottom: 18px;
}

.resume-header h2 {
    margin-bottom: 4px;
    font-size: 2rem;
    color: #004aad;
    font-weight: 700;
    letter-spacing: 1px;
}

.resume-header p {
    font-size: 1.1rem;
    color: #485057;
}

.resume-contact {
    font-size: 0.95rem;
    color: #29303b;
    margin-bottom: 10px;
}

.resume-contact span {
    display: inline-block;
    margin-right: 18px;
}

.resume-section-title {
    color: #004aad;
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 1.25rem;
    font-weight: 500;
    border-bottom: 1px solid #eaeaea;
    letter-spacing: 1px;
}

/* Style summary/description text */
.resume-summary {
    margin-bottom: 12px;
    font-style: italic;
    color: #50555c;
}

/* Skill badges */
.resume-skills {
    margin-bottom: 18px;
}

.resume-skills span {
    background: #e3edff;
    color: #004aad;
    padding: 5px 12px;
    border-radius: 15px;
    margin: 2px;
    display: inline-block;
    font-size: 0.94rem;
}

/* Job/Education item styling */
.resume-job, .resume-edu {
    margin-bottom: 16px;
}

.resume-job h5, .resume-edu h5 {
    margin-bottom: 2px;
    font-size: 1.05rem;
    color: #22338b;
    font-weight: 600;
}

.resume-job .sub, .resume-edu .sub {
    font-size: 0.98rem;
    color: #555b6c;
}

.resume-job .desc, .resume-edu .desc {
    font-size: 0.98rem;
    color: #50555c;
    margin-top: 3px;
}

@media print {
    body {
        background: none;
    }
    .container, .resume-preview {
        box-shadow: none !important;
        border: none !important;
        background: #fff;
    }
    #resume-form, #download-pdf, .btn, .mb-5, h1, .lead, .row>div:first-child {
        display: none !important;
    }
    #resume-preview, .resume-preview {
        margin: 0 !important;
        max-width: none !important;
        min-width: 100% !important;
    }
}