/*style1.css*/

/* 1. Turn the header into a Flex Container */
.profile-header {
    display: flex;
    align-items: flex-start; /* Aligns items to the top of the container */
    gap: 20px; /* Space between the photo and the details column */
    margin-bottom: 30px; /* Space separating the header from the main content below */
}

/* 2. Style the photo column */
.profile-photo {
    /* Set a fixed size for the photo wrapper */
    flex-shrink: 0; /* Prevents the photo from shrinking on smaller screens */
    width: 150px; /* Example size - adjust to your photo size */
    height: 150px; /* Example size - adjust to your photo size */
}

/* 3. Style the details column */
.profile-details {
    /* Allows this column to take up the remaining space */
    flex-grow: 1;
}

/* Ensure the image respects its container */
.profile-photo img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* In your CSS file (for screens 600px or less) */
@media (max-width: 600px) {
    .profile-header {
        flex-direction: column; /* Stack the photo and details vertically */
        align-items: center; /* Center the stacked items (including the photo) */
        text-align: center; /* Center the text in the details section */
        gap: 15px;
    }

    .profile-photo {
        /* On mobile, you might make the photo a bit smaller */
        width: 120px;
        height: 120px;
    }
}





/* Apply this rule to the main body of the page */
body {
    font-family: sans-serif;
    font-size: 12px; /* Ensures a good base font size */
    color: #000; /* Sets a dark grey text color for contrast */
}

/* 2. Override Headings to match the body font */
h1, h2, h3 {
    font-family: sans-serif; /* Explicitly set the same font stack */
    /* Remove any inconsistent default margins if needed */
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}






body
{
background:#eeeeee;
}




a:link {  color: #336666; text-decoration: none; font-weight: normal; font-variant: normal}

a:visited {  color: #660066; text-decoration: none}

a:active {  color: #660066; text-decoration: none}

a:hover {  color: #FF0033; text-decoration: underline; font-variant: normal}

a.side:link {  color: #336666; text-decoration: none; font-weight: normal; font-variant: normal}

a.side:visited {  color: #663366; text-decoration: none}

a.side:active {  color: #FFFFFF; text-decoration: none}

a.side:hover {  color: #FF0033; text-decoration: underline; font-variant: normal}

a.largelink:link {  color: #336666; text-decoration: none; font-weight: normal; font-variant: normal; font-size:150%;}

a.largelink:visited {  color: #663366; text-decoration: none; font-size:150%;}

a.largelink:active {  color: #FFFFFF; text-decoration: none; font-size:150%;}

a.largelink:hover {  color: #FF0033; text-decoration: underline; font-variant: normal; font-size:150%;}

p,td,th,h1,h2,h3,h4,h5,blockquote,div {font-family:Verdana, Arial, Helvetica, sans-serif;}

p,td,th,blockquote {font-size:13px;}

p.bold {font-weight:bold;}

.small {font-size:10px; font-style:italic; text-align:center;}

span.friday {font-weight:bold;font-style:italic;color:#660066;}

span.special {font-weight:bold;font-style:italic;color:green;}

span.title {color: #111111; font-size:150%;}

h1 {font-size:200%; color:#006699;font-weight:bold;}