style.css

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    max-width: 960px;
    margin: auto;
    background-color: #fafafa; /* Light Gray background for the whole page */
    color: #333333; /* Dark Gray text for better readability */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

h1 {
    font-size: 2.5em;
    letter-spacing: .3em;
    padding-top: 0.2em;
    padding-bottom: 0.7em;
    color: #ffffff; /* Navy color for main headings */
    line-height: 1.3;
}

h1 br {
    margin-bottom: 0.5em; 
    display: block;       
    content: "";          
}

h1 strong {
    font-weight: 800;  /* Make the bold part more prominent */
    color: #ffffff;
}

/* Consistent h2 Styling */
h2 {
    font-size: 1.5em;
    padding-bottom: 1em;
    color: #2c3e50; /* Navy color for subheadings */
    margin-top: 0; /* Reset top margin */
    margin-bottom: 0.5em; /* Consistent bottom margin */
}


h3 {
    font-size: 1em;
    padding-bottom: 0em;
    font-weight: bold;
    color: #2c3e50; /* Navy color for section titles */
}

.work-entry h3 {
    font-size: 1.2em; 
}

main { 
    display: grid;
    grid-template-columns: 30% 70%;
    margin-top: 2em;
    background-color: #ffffff; /* White background for main content */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); 
    border-radius: 8px; 
    overflow: hidden; /* Ensures child elements respect border radius */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

header {
    text-align: center;
    margin: auto 2em;
    padding: 1em 0;
    background-color: #2c3e50; /* Navy background for the header */
    color: #ffffff; /* White text for contrast */
    border-radius: 8px 8px 0 0; /* Rounded top corners */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

section {
    margin: auto 1em 3em 2em;
}

.contact-section {
    margin-top: 0.5em;  /* Adjust this value as needed to match your desired spacing */
}

.about-section {
    margin-top: 1.5em;  /* Increase this value if you want more space */
}

#mainLeft {
    border-right: 1px solid #e0e0e0; /* Light gray border */
    background-color: #f0f4f8; /* Soft blue background for the left sidebar */
    padding: 1em;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

a.publication-link {
    color: #2c3e50; /* Navy color for links */
    text-decoration: none;
    font-weight: bold;
}
a.publication-link:hover {
    text-decoration: underline;
}

a.contact-link {
    color: #3366CC;
    text-decoration: none;
}
a.contact-link:hover {
    text-decoration: underline;
}

hr {
    border: none;
    background-color: #e0e0e0; /* Light gray line */
    height: 1px;
}

p {
    margin: .2em auto;
    line-height: 1.6; /* Improved readability */
}

strong {
    color: #2c3e50; /* Navy color for bold text */
}

/* List Styling */
ul {
    padding-left: 1.2em;
    margin: 0.5em 0;
}

ul li {
    list-style-type: disc;  /* Default bullet points for all lists */
    margin-bottom: 0.3em;
}

.training-list li {
    list-style-type: none;
    position: relative;
}

.training-list li:before {
    content: "-";
    position: absolute;
    left: -1em;
}

.publications-list {
    margin: 0;
    padding-left: 1.2em;
}

.publications-list li {
    margin-bottom: 1em;
}

/* Add CSS classes for language bars */
.language-bar {
    background-color: #e0e0e0;
    border-radius: 5px;
    height: 8px;
    width: 150px;
    margin-top: 0.5em;
    margin-bottom: 1em;
    position: relative;
    display: block; /* Ensure the bar is displayed as a block element */
}
.language-fill {
    background-color: #285f96;
    border-radius: 5px;
    height: 100%; 
    position: absolute; /* Position inside the parent bar */
    left: 0;
    top: 0;
}

/* Education section styling */
.education-entry {
    margin-bottom: 1em;
}

.university-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -0.2em;  /* Pull university line slightly up */
}

.education-date {
    color: #666;
    min-width: 85px;
    text-align: right;
}

/* Education section styling */
.education-entry {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1em;
}

.education-entry .education-content {
    flex: 1;
}

.education-entry .education-date {
    min-width: 85px;
    text-align: right;
    color: #666;
}

.education-entry .education-content h3 {
    margin-bottom: 0.2em;  /* Reduce space between title and university line */
}

/* Training section styling */
.training-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.training-content {
    flex: 1;
    padding-right: 1em;
}

.training-date {
    color: #666;
    min-width: 85px;
    text-align: right;
}

/* Work Experience section styling */
.institution-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -0.3em;  /* Reduce space after h3 */
    margin-bottom: 1em;  /* Increase space before bullet points */
}

.institution-name,
.institution-date {
    color: #666;
}

.institution-date {
    min-width: 140px;
    text-align: right;
}

.work-entry ul {
    margin-bottom: 2em;  /* Add more space after each list */
}

.work-entry h3:not(:first-of-type) {
    margin-top: 1em;  /* Add space before each h3 except the first one */
}

/* Publications section styling */
.publication-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1em;
}

.publication-content {
    flex: 1;
    padding-right: 1em;
}

.publication-date {
    color: #666;
    min-width: 85px;
    text-align: right;
}

/* Ensure background colors are printed */
body, 
header, 
#mainLeft, 
main, 
section, 
h1, 
h2, 
h3, 
p, 
ul, 
li, 
a {
    -webkit-print-color-adjust: exact; /* For WebKit-based browsers */
    print-color-adjust: exact; /* Standard property */
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    main {
        grid-template-columns: 1fr;
    }
    #mainLeft {
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }
}

/* Print-Specific Styles */
@media print {
    body {
        background-color: #fafafa; /* Retain original background color */
        color: #000000; /* Ensure text is black for better print readability */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    main {
        grid-template-columns: 35% 65% !important; /* Maintain two columns */
        box-shadow: none; /* Remove shadows for print */
        border-radius: 0; /* Remove border radius for print */
    }

    #mainLeft {
        border-right: 1px solid #e0e0e0; /* Light gray border */
        background-color: #f0f4f8; /* Soft blue background for the left sidebar */
        padding: 1em;
    }

    header {
        background-color: #2c3e50 !important; /* Retain original background */
        border-radius: 0; /* Remove rounded corners */
    }

    /* Force About Me and Work Experience to stay together on the first page */
    .about-section,
    .work-experience-section {
        page-break-inside: avoid;
    }

    /* Correct the page-break-before to target only the Languages section */
    .languages-section { /* Languages section */
        page-break-before: always;
    }

    .awards-section {
        page-break-inside: avoid;  /* Prevent Awards from breaking across pages */
        page-break-before: avoid;  /* Prevent Awards from starting on a new page */
    }

    /* Uniform Link Colors in Print */
    a.publication-link{
        color: #2c3e50 !important; /* Ensure color is consistent in print */
        text-decoration: none;
    }

    a.contact-link {
        color: #3366CC !important; /* Ensure color is consistent in print */
        text-decoration: none;
    }

    /* Optional: Hide elements that are unnecessary for print */
    .no-print {
        display: none;
    }

    /* Reduce spacing between h2 and content in right column */
    #mainRight h2 {
        padding-bottom: 0.5em;  /* Reduce from 1em to 0.5em */
        margin-bottom: 0.2em;   /* Tighter margin */
    }

    /* Ensure proper spacing between sections */
    #mainRight section {
        margin-bottom: 1.5em;     /* Slightly reduced section spacing */
    }

    /* Add margin before Languages section in left column */
    .languages-section h2 {  /* Languages section */
        margin-top: 1.5em;
    }

    /* Add padding before Publications section in right column */
    .publications-section {
        padding-top: 1.5em; /* Add top padding to ensure space */
        /* Optionally prevent margin collapse */
        overflow: hidden;
    }

    /* If needed, adjust the h2 margin as well */
    .publications-section h2 {  /* Publications section */
        margin-top: 0; /* Reset to avoid conflict with padding */
    }
}