/* ====== Global Styles ====== */ body { font-family: 'Roboto', Arial, sans-serif; font-size: 1.1rem; line-height: 1.6; margin: 0; padding: 0; color: #333; background-color: #f9f9f9; } /* ====== Header Styles ====== */ header { text-align: center; padding: 20px; background-color: maroon; color: white; } header h1 { margin: 0; font-size: 2.5em; } header h2 { margin: 10px 0 0; font-size: 1.5em; font-weight: normal; } /* ====== Main Layout ====== */ main { padding: 20px; max-width: 800px; margin: 0 auto; } /* ====== Intro Section ====== */ .intro { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 40px; } .profile-container { flex: 1; min-width: 150px; } .profile-image { width: 240px; /* Profile image size */ height: 240px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .text-container { flex: 2; min-width: 300px; } .text-container p { margin-bottom: 15px; } /* ====== Social Icons ====== */ .social-icons { display: flex; gap: 15px; margin-top: 10px; } .social-icons a img { width: 48px; height: 48px; transition: transform 0.3s; } .social-icons a img:hover { transform: scale(1.2); } /* ====== News Section ====== */ .news { margin-top: 40px; } .news h3 { font-size: 1.5em; margin-bottom: 10px; } .news ul { list-style-type: disc; padding-left: 20px; } .news ul li { margin-bottom: 10px; } /* ====== Footer Styles ====== */ footer { text-align: center; margin-top: 40px; padding: 10px 0; background-color: maroon; color: white; font-size: 0.9em; } /* ====== Links ====== */ a { text-decoration: none; color: purple; /* Links inherit the surrounding text color */ } /* ====== Navigation Styles ====== */ nav { background-color: maroon; padding: 10px; text-align: center; font-size: 1.25rem } .nav-links { list-style: none; /* Remove bullets */ margin: 0; padding: 0; display: flex; /* Use flexbox for side-by-side alignment */ justify-content: center; /* Center the links horizontally */ gap: 20px; /* Add space between links */ } .nav-links li { display: inline; /* Ensure links are inline elements */ } .nav-links a { text-decoration: none; /* Remove underline */ color: white; /* Link color */ font-weight: bold; /* Emphasize links */ font-size: 1em; transition: color 0.3s; /* Smooth color change */ } .nav-links a:hover { color: #ffdd57; /* Highlight on hover */ } /* ====== Selected Publications Section ====== */ .publications { margin-top: 40px; } .publications h3 { font-size: 1.5em; margin-bottom: 20px; text-align: center; /* Center-align the section heading */ } .publication-item { display: flex; align-items: flex-start; margin-bottom: 20px; gap: 15px; } .publication-image { width: 200px !important; height: 150px !important; object-fit: cover; border-radius: 5px; /* Optional: Slight rounding for aesthetics */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .publication-info { flex: 1; } .publication-info p { margin: 0; line-height: 1.4; } .publication-info a { text-decoration: none; color: #0056b3; font-weight: bold; } .publication-info a:hover { color: #ffdd57; } /* ====== Responsive Design ====== */ @media (max-width: 768px) { .intro { flex-direction: column; text-align: center; } .profile-image { width: 120px; /* Smaller image for mobile */ height: 120px; margin: 0 auto; } .nav-links { flex-direction: column; /* Stack navigation links */ gap: 10px; } .news ul { padding-left: 10px; /* Reduce indentation */ } body { padding: 10px; /* Add margin for smaller screens */ } .publication-item { flex-direction: column; align-items: center; text-align: center; } .publication-image { width: 100px; /* Smaller size for mobile */ height: 75px; } }