/* BASE STYLES */ body { font-family: 'Times New Roman', Times, serif; background-color: #ffffff; color: #000000; margin: 0; padding: 10px; line-height: 1.6; max-width: 900px; margin-left: auto; margin-right: auto; } /* TARGETED TAMIL FONT STACK */ [lang="ta"] { /* Noto Serif Tamil is now guaranteed to load via the link tag */ font-family: 'Noto Serif Tamil', 'Tamil MN', serif; font-size: 0.93em; } /* TARGETED HINDI & MARATHI FONT STACK (Devanagari) */ [lang="hi"], [lang="mr"] { /* Noto Serif Devanagari is now guaranteed to load via the link tag */ font-family: 'Noto Serif Devanagari', 'Devanagari Sangam MN', 'Mangal', serif; } /* LINK COLOR: #0077CC (Recommended) */ a { color: #0077CC; text-decoration: none; } a:hover { text-decoration: underline; } /* HEADER & RAINBOW LINES */ header { margin-bottom: 30px; } /* The Rainbow Line */ .rainbow-line { height: 4px; border: none; background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); margin: 15px 0; } /* QUOTE SECTION */ .quote-block { max-width: 75%; margin: 0 auto; padding-bottom: 10px; } .quote-line { font-size: 1.2em; text-align: center; margin-top: 10px; font-style: italic; } .attribution { font-size: 0.7em; display: block; text-align: right; margin-bottom: 5px; } /* 2. QUOTE OVERRIDE RULE (NEW): This targets the quote on the Tamil page (only where html[lang="ta"] is active). The factor 1.29em (1.2 / 0.93 ≈ 1.29) is used to perfectly compensate for the 0.93em scaling from the parent tag, making the final computed size exactly 1.2em of the root size. */ html[lang="ta"] .quote-line { font-size: 1.29em; } html[lang="ta"] .attribution { font-size: 0.753em; } /* PROFILE SECTION: MAIN CONTAINERS (APPLYING 0.75 WIDTH) */ .profile-container { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: 30px; max-width: 75%; margin-left: auto; margin-right: auto; } /* CONTACT INFO: TYPOGRAPHY AND SPACING */ .contact-info { flex: 1; padding-right: 10px; } /* Styling the H1 to look visually like an H2 */ .contact-info h1 { font-size: 1.8em; margin-top: 0; margin-bottom: 5px; } .contact-info p.name-translations { font-size: 1.2em; line-height: 1.1; margin-top: 5px; margin-bottom: 15px; font-weight: normal; } .contact-info p { margin-top: 15px; margin-bottom: 0; } .profile-photo { flex: 0 0 auto; text-align: center; } .profile-photo img { max-width: 200px; height: auto; } /* BIO SECTION (Full width since no constraint applied) */ .bio { margin-bottom: 30px; text-align: justify; } /* NAVIGATION */ nav ul { padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 15px; border-top: 1px solid #ccc; padding-top: 15px; } nav li { font-weight: bold; } /* General Separator Rule for new line */ .separator { border: 0; height: 1px; background-color: #ccc; margin: 20px 0; } /* MOBILE TWEAKS */ @media (max-width: 768px) { .profile-container { max-width: 95%; flex-direction: column; margin-left: auto; margin-right: auto; align-items: center; } .profile-photo { margin: 0 auto; display: block; } .contact-info { padding-right: 0; text-align: center; } nav ul { flex-direction: column; justify-content: flex-start; } .quote-block { max-width: 95%; } } /* --- Custom Rules for Denser Content (e.g., Students Page) --- */ /* Targets all main content within the compact section */ .compact-content h1, .compact-content h2 { margin-top: 20px; margin-bottom: 8px; /* Reduces space below headers */ } /* Targets paragraphs within a compact section */ .compact-content p { margin-top: 5px; margin-bottom: 5px; } /* Targets ordered and unordered lists within a compact section */ .compact-content ol, .compact-content ul { line-height: 1.4; /* Reduces line spacing (default is 1.6) */ padding-left: 25px; margin-top: 5px; margin-bottom: 5px; } /* Targets list items within a compact section */ .compact-content ol li, .compact-content ul li { margin-bottom: 2px; /* Minimizes space between list items */ } /* --- Mobile Tweak for Denser Lists on Small Screens (for students.html) --- */ @media (max-width: 500px) { /* Only applies to screens 500px wide or less (typical phone size) */ .compact-content ol, .compact-content ul { line-height: 1.5; /* Slightly less dense than the desktop 1.4 */ padding-left: 20px; } .compact-content ol li, .compact-content ul li { margin-bottom: 5px; /* Adds a bit more space between list items on mobile */ } /* Ensure long links/text can break gracefully */ .compact-content p, .compact-content li { word-wrap: break-word; overflow-wrap: break-word; } }