nice-divider {
    border: none; /* Remove default border */
    border-top: 1px solid #ccc; /* A thin, light grey line */
    margin: 20px auto; /* Center the HR horizontally and add vertical space */
    width: 60%; /* Make it span 60% of its parent's width */
    max-width: 400px; /* Optional: Limit its maximum width */
}

/* You can also add more styles for different looks: */

/* A slightly thicker, darker line */
.nice-divider.dark {
    border-top: 2px solid #555;
    width: 50%;
}

/* A dotted line */
.nice-divider.dotted {
    border-top: 1px dotted #888;
    width: 70%;
}

/* A "fade" effect (requires slightly more complex CSS) */
/*
.nice-divider.fade {
    border: none;
    height: 1px;
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 50%, rgba(0,0,0,0) 100%);
    margin: 20px auto;
    width: 70%;
}
*/

/* General table styling to ensure it's not limiting the width */
table {
    width: 100%;
    max-width: 1200px; /* Optional: Set a max-width for the entire table if you don't want it to stretch across super wide screens */
    border-collapse: collapse;
    margin-left: auto; /* Center the table if max-width is applied */
    margin-right: auto;
}

td {
    width: 100%; /* Ensure TD takes full width of its parent TR/Table */
    padding: 10px; /* Add some general padding for content */
    text-align: center; /* Keep content centered horizontally */
    vertical-align: top; /* Adjust vertical alignment within cell if needed */
}

/* Remove the specific style1 if you're not using it elsewhere or rename it */
.style1 {
    color: #006633;
    font-weight: bold;
}



/* Styling for the container holding the photo */
.photo-container {
    text-align: center; /* Center the image within its container */
    margin: 20px auto;   /* Add vertical space around the photo, and horizontal centering */
    /* Optional: You might want to limit the max-width of the container */
    /* max-width: 400px; */ /* For example, slightly wider than the image's intrinsic width (390px) */
}

/* Styling for the photo */
.responsive-photo {
    /* Critical for scaling: */
    width: 100%;       /* Make the image take 100% of its parent's width */
    max-width: 390px;  /* Set the maximum width to the image's intrinsic width (or slightly larger if desired) */
    height: auto;      /* Maintain aspect ratio */

    /* Ensure it's treated as a block for proper centering and no weird spacing */
    display: block;
    margin-left: auto; /* Center it within its parent */
    margin-right: auto;

    /* Optional aesthetic styles */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


/* Styling for smaller b&w photo */
.responsive-photo-small {
    /* Critical for scaling: */
    width: 60%;       /* Make the image take 100% of its parent's width */
    max-width: 200px;  /* Set the maximum width to the image's intrinsic width (or slightly larger if desired) */
    height: auto;      /* Maintain aspect ratio */

    /* Ensure it's treated as a block for proper centering and no weird spacing */
    display: block;
    margin-left: auto; /* Center it within its parent */
    margin-right: auto;

    /* Optional aesthetic styles */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


/* ----------------------------------------------------- */
/* CSS for the Responsive Video Embeds */
/* ----------------------------------------------------- */

/* This container will hold the aspect ratio for all embedded content */
.responsive-embed-container {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    /* Common aspect ratios: */
    /* 16:9 aspect ratio (9/16 = 0.5625) */
    padding-bottom: 56.25%;
    /* 4:3 aspect ratio (3/4 = 0.75) */
    /* padding-bottom: 75%; */
    max-width: 1000px; /* Set a max-width for the video/embed itself */
    margin: 0 auto; /* Center the video/embed if max-width is set */
}

/* Target the iframes directly within the responsive container */
.responsive-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Ensures no border on the iframe itself */
}

/* Specific styling for the ScreenPal embed div if needed, though iframe above should cover it */
.sp-embed-player {
    /* If you need specific styles for the ScreenPal div itself, put them here */
    /* But the iframe within will fill the .responsive-embed-container */
}

/* Spacing adjustments, using CSS margin/padding instead of <br> */
p.section-spacer {
    margin-top: 20px; /* Adds space above */
    margin-bottom: 20px; /* Adds space below */
}

p.content-text {
    margin-top: 10px;
    margin-bottom: 10px;

    /* --- Core Readability Enhancements --- */
    font-family: 'Georgia', serif; /* Or 'Arial', sans-serif; or 'Roboto', sans-serif; */
    font-size: 1.1em; /* Slightly larger text for better readability */
    line-height: 1.6; /* Ample space between lines for easy reading */
    color: #333333; /* Dark grey instead of pure black for softer look */

    /* Optional: Limit line length for better reading flow on wide screens */
    max-width: 700px; /* Adjust as needed */
    margin-left: auto; /* To center the paragraph if max-width is applied */
    margin-right: auto; /* To center the paragraph if max-width is applied */
}

/* --- Styles for the Fancy Name --- */

.large-fancy-name {
    margin-top: 20px; /* Adjust spacing above the name */
    margin-bottom: 15px; /* Adjust spacing below the name */
    text-align: center; /* Ensure the name is centered */

    /* Font for Option A: Playfair Display */
    /* Uncomment this block if you chose Playfair Display in HTML */
    font-family: 'Playfair Display', serif;
    font-size: 2.8em; /* Adjust size as needed - this is quite large */
    font-weight: 700; /* Bold, if the font supports it */
    color: #004d40; /* A nice deep green, or choose your own color */
    letter-spacing: 0.05em; /* A little extra spacing for readability */
    line-height: 1.2; /* Tighter line height for larger text */


    /* Font for Option B: Great Vibes */
    /* Uncomment this block instead if you chose Great Vibes in HTML */
    /*
    font-family: 'Great Vibes', cursive;
    font-size: 3.5em; /* Script fonts often need to be larger to be readable */
    /* font-weight: normal; /* Script fonts often don't have bold variants */
    /* color: #8B4513; /* SaddleBrown for a warm, elegant look */
    /* line-height: 1.2;
    /* text-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* Optional: subtle shadow */
    */

    /* Ensure responsiveness for the name itself on smaller screens */
    word-break: break-word; /* Prevents long names from overflowing on very small screens */
    white-space: normal; /* Ensures word wrapping */
}