/* Basic body styling */
body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    max-width: 800px;
    margin: 20px auto;
    background: #fff;
    padding: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

h1, h2 {
    color: #333;
    margin-bottom: 1em;
}

/* Form styling - rely heavily on Bootstrap if using it */
.form-label {
    font-weight: bold;
}

/* You would define styles for each resume template here */
/* Example for a hypothetical resume preview area or the final PDF */

/* --- Template Color Variables (Example) --- */
:root {
    --primary-color-blue: #0d6efd;
    --secondary-color-blue: #cfe2ff;
    --primary-color-green: #198754;
    --secondary-color-green: #d1e7dd;
    /* Add other colors */
}

/* Example applying a color variable */
.resume-header.color-blue {
    background-color: var(--primary-color-blue);
    color: white;
}
.resume-section-title.color-blue {
    color: var(--primary-color-blue);
    border-bottom: 2px solid var(--primary-color-blue);
}

/* Styles for Template 1 */
.resume.template1 {
    /* specific layout styles */
}
.resume.template1 h1 { /* Styles for name in template 1 */ }

/* Styles for Template 2 */
.resume.template2 {
    /* different layout styles */
}
/* etc. */

/* Button styling */
.btn-primary {
    /* Customize Bootstrap or define your own */
}

/* Add more styles for borders, padding, margins, etc. */