/* Personal Information Section Styling */
.personal-info-container {
    text-align: left;
    background-color: #f4f4f8; /* Light grey background for the section */
    padding: 20px; /* Padding around the content */
    margin: 20px auto;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    max-width: 960px; /* Align with the container's max-width */
    width: 96%; /* Limit the maximum width */
    /* Comment or adjust the margin-top to manage spacing with the banner/profile-pic */
}

.personal-info {
    text-align: left; /* Align text to the left for readability */
}

.personal-info h1 {
    color: #6200ea; /* Primary theme color */
    font-size: calc(22px + (26 - 22) * ((100vw - 300px) / (1600 - 300))); /* Responsive font size */
}

.personal-info-pronouns { /* More specific class for pronouns for styling */
    color: #6d6d6d; /* Lighter than the main text for subtlety */
    font-size: 70%; /* Smaller font size */
    margin-left: 5px; /* Space from the name */
    align-self: flex-end; /* Align to the bottom of the line */
}

.personal-location {
    font-weight: normal; /* Normal weight to not overpower the name */
    color: #333; /* Standard text color */
}

.personal-contact, .personal-info a {
    color: #6200ea; /* Link color */
    text-decoration: underline; /* Underline for clarity that it's clickable */
}

.short-bio {
    margin-top: 20px; /* Space from the name and contact info */
    font-style: italic; /* Italicized for distinction */
    color: #333; /* Standard text color */
}

/* Responsive Adjustments */
@media (max-width: 768px) { /* For tablets and below */
    .personal-info h1 {
        font-size: 20px; /* Slightly smaller font size */
    }
    .personal-info-container {
        padding: 15px; /* Reduced padding */
        margin-top: 20px; /* Adjusted top margin */
        max-width: 960px; /* Match the CTA max-width or adjust as needed */
    }
    .short-bio {
        margin-top: 15px; /* Adjusted margin for compact layout */
    }
}

@media (max-width: 480px) { /* For very small devices like smartphones */
    .personal-info h1 {
        font-size: 18px; /* Further reduced font size for small screens */
    }
    .personal-info-container {
        padding: 10px; /* Minimal padding */
        margin-top: 15px; /* Reduced top margin */
    }
    .short-bio {
        margin-top: 10px; /* Tightened layout */
    }
}