/* Set the font for the entire body */
body {
    font-family: 'Calibri', sans-serif;
    margin: 0;
    padding: 0;
}

/* Style for the header image */
header img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Style for the main title and paragraph under the title */
section > p {
    font-size: 16px; /* Regular font size for text */
    text-align: center;
    margin-top: 20px;
}

/* Style for the form section and the introductory section */
form, .intro-section {
    width: 100%;
    max-width: 800px; /* Adjust this as needed to match your form width */
    margin: auto; /* Center the form in the page */
}

/* Style for the survey title */
.survey-title {
    font-size: 24px;
    text-align: center;
    margin-top: 20px;
    /* Any additional styles for the title */
}

/* Style for regular paragraphs under section */
.survey-title > p {
    font-size: 16px; /* Regular text size */
    text-align: center;
    margin-top: 20px;
}

/* Override style for the first paragraph to make it larger */
section > p:first-child {
    font-size: 24px; /* Larger font size for the title */
}

/* Style for the form section */
form {
    width: 100%;
    max-width: 800px;
    margin: auto; /* Center the form in the page */
}

/* Style for individual form fields */
.form-row {
    display: flex;
    flex-wrap: wrap; /* Ensure the form fields wrap when needed */
    margin-bottom: 10px;
}

/* Style for labels and form elements */
label, select, input, textarea {
    display: block;
    width: 100%;
    margin: 5px 0;
}

/* Adjustments for input types */
input[type=text],
input[type=email],
input[type=number],
input[type=date],
textarea {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Style for columns in the form */
.form-column {
    padding: 0 10px;
    flex: 1; /* Each column takes equal space */
    min-width: 0; /* Prevent flex items from growing too large */
}

/* Style for the work experience section specifically */
#workExperienceContainer {
    width: 100%; /* Set to the width of the form for proper alignment */
}

/* Style for the work experience entry */
.workExperienceEntry {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/* Style for the button within the work experience entry */
.workExperienceEntry .button-column button {
    margin-top: 0; /* Align with the form fields */
}

/* Style for the button column to ensure it does not grow and is aligned properly */
.button-column {
    flex-grow: 0;
    padding-right: 0; /* Align with the other form columns */
    padding-left: 10px; /* Maintain consistent spacing */
}

/* Style specifically for the button column */
.button-column {
    padding: 0 10px;
    flex: none; /* Do not allow the button column to grow */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align button to the start */
}

/* For the button in the work experience section, align it to the center */
.workExperienceEntry .form-column:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Adjust the last column padding for alignment */
.form-column:last-child {
    padding-right: 0;
}

/* Submit button styling */
input[type=submit] {
    background-color: #4CAF50; /* Green background */
    color: white;
    padding: 14px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: auto; /* Adjust width as needed */
    margin-top: 20px;
}

input[type=submit]:hover {
    background-color: #45a049;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    /* Apply 2px padding on both sides of most elements */
    label, input[type=text], input[type=email], input[type=number], input[type=date], textarea, .button-column {
      padding: 5px 2px; /* Adjust as needed for individual elements */
    }
  
    /* Ensure full width for form elements */
    label, select, input, textarea {
      width: calc(100% - 4px); /* Adjust for padding */
    }
  
    /* Sections and intro-section with slightly more padding */
    section, .intro-section {
      padding: 10px 2px; /* 10px padding + 2px from individual elements */
    }
  
    /* Specific adjustments for work history and experience areas */
    .workHistoryEntry .form-column:first-child,
    .workExperienceEntry .form-column:first-child {
      padding-left: 10px; /* Adjust as needed for specific sections */
    }
  
    /* Address right-side padding for company/state/year row */
    .workHistoryEntry .form-column:last-child .button-column,
    .workExperienceEntry .form-column:last-child .button-column {
      padding-right: 10px; /* Adjust as needed for specific sections */
    }
  
    /* Apply padding to headings */
    h2 {
      padding: 5px 2px; /* Adjust as needed for headings */
    }
  
    /* Target specific text section under "Experience Areas" */
    .workExperienceEntry h2 + p {
      padding: 0 0 0 10px; /* Adjust as needed for specific sections */
    }
  }