/*---------------------------------------------- * Global Reset *----------------------------------------------*/ * { margin: 0; padding: 0; box-sizing: border-box;}/*---------------------------------------------- * Body Styles *----------------------------------------------*/body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #fff; color: #333; line-height: 1.4; /* Reduced line height for more compact text */ display: flex; flex-direction: column; min-height: 100vh;}/*---------------------------------------------- * Left Side Bar *----------------------------------------------*/body::before { content: ""; position: fixed; top: 0; left: 0; width: 40px; height: 100%; background-color: #e0e0e0;}/*---------------------------------------------- * Header Section *----------------------------------------------*/header { text-align: left; background-color: #f9f9f9; padding: 20px 50px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.about-section h2 { color: #000; /* Black text color for the title in light mode */}header h1 { font-size: 24px; /* Reduced header size */ color: #333; font-family: 'Segoe UI', serif; margin-bottom: 5px;}header p { font-size: 12px; /* Smaller font size for the paragraph */ color: #666; font-family: 'Segoe UI', sans-serif; line-height: 1.4;}/*---------------------------------------------- * Navigation Bar *----------------------------------------------*/.navbar { background-color: #fff; padding-left: 50px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #e0e0e0; margin-top: 10px;}.navbar ul { list-style-type: none; display: flex; gap: 20px; padding: 10px 0;}.navbar ul li { margin-right: 15px;}.navbar ul li a { color: #333; font-size: 14px; /* Reduced font size for navbar links */ text-decoration: none; font-weight: 400; transition: color 0.3s ease;}.navbar ul li a:hover,.navbar ul li a:focus,.navbar ul li a:active { color: #555;}/*---------------------------------------------- * Content Wrapper *----------------------------------------------*/.content-wrapper { display: flex; flex-direction: column; margin: 20px auto; background-color: #fff; border-radius: 12px; text-align: left; margin-left: 70px; max-width: 900px; padding: 20px; /* Reduced padding for compactness */ flex-grow: 1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}/*---------------------------------------------- * About Section *----------------------------------------------*/.about-section { margin: 20px 0;}.about-section h2 { font-size: 18px; /* Reduced title size */ margin-bottom: 15px; font-weight: 700; text-align: center; color: #333 !important;}.profile { display: flex; align-items: center; margin-bottom: 20px; /* Reduced margin for a more compact profile section */ gap: 15px;}.profile-image { width: 150px; /* Reduced image size */ height: 150px; border-radius: 12px; object-fit: cover; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}.bio { flex: 1;}.bio p { font-size: 14px; /* Smaller font size for bio text */ line-height: 1.6; color: #555;}/*---------------------------------------------- * Social Links *----------------------------------------------*/.social-links { display: flex; justify-content: center; margin-top: 10px; /* Reduced margin for a more compact layout */}.social-links a { margin: 0 8px; /* Reduced spacing between social icons */}.social-links img { width: 30px; /* Reduced icon size */ height: 30px; transition: transform 0.3s ease;}.social-links img:hover { transform: scale(1.1);}/*---------------------------------------------- * Footer *----------------------------------------------*/footer { position: sticky; bottom: 0; z-index: 10; text-align: center; padding: 20px; background-color: #f5f5f5; color: #666; border-top: 1px solid #e0e0e0; width: 100%; margin-top: auto;}/*---------------------------------------------- * Dark Mode Styles * Automatically applies when the system is in dark mode *----------------------------------------------*//*---------------------------------------------- * Body Styles for Dark Mode *----------------------------------------------*/ body { background-color: #181818; /* Dark background color for the body */ color: #e0e0e0; /* Light text color for readability in dark mode */}/*---------------------------------------------- * Header Section for Dark Mode *----------------------------------------------*/header { background-color: #232323; /* Dark background for the header */ box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1); /* Lighter shadow for contrast */}header h1 { color: #e0e0e0; /* Light text color for header */}header p { color: #aaa; /* Lighter text color for paragraph */}/*---------------------------------------------- * Navigation Bar for Dark Mode *----------------------------------------------*/.navbar { background-color: #232323; /* Dark background for the navbar */ border-bottom: 1px solid #444; /* Darker border for the navbar */}.navbar ul li a { color: #e0e0e0; /* Light text color for navigation links */}.navbar ul li a:hover,.navbar ul li a:focus,.navbar ul li a:active { color: #fff; /* Highlight color on hover */}/*---------------------------------------------- * Content Wrapper for Dark Mode *----------------------------------------------*/.content-wrapper { background-color: #2a2a2a; /* Dark background for content wrapper */ color: #e0e0e0; /* Light text color for content */ box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); /* Light shadow for contrast */}/*---------------------------------------------- * About Section for Dark Mode *----------------------------------------------*/.about-section h2 { color: #e0e0e0; /* Light text color for section title */}.profile-image { box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1); /* Lighter shadow for profile image */}/*---------------------------------------------- * Footer for Dark Mode *----------------------------------------------*/footer { background-color: #232323; /* Dark background for the footer */ color: #ccc; /* Lighter text color for footer */ border-top: 1px solid #444; /* Darker border for footer */}
/*----------------------------------------------
* Global Reset
*----------------------------------------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*----------------------------------------------
* Body Styles
*----------------------------------------------*/
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #fff;
color: #333;
line-height: 1.4; /* Reduced line height for more compact text */
display: flex;
flex-direction: column;
min-height: 100vh;
}
/*----------------------------------------------
* Left Side Bar
*----------------------------------------------*/
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 40px;
height: 100%;
background-color: #e0e0e0;
}
/*----------------------------------------------
* Header Section
*----------------------------------------------*/
header {
text-align: left;
background-color: #f9f9f9;
padding: 20px 50px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.about-section h2 {
color: #000; /* Black text color for the title in light mode */
}
header h1 {
font-size: 24px; /* Reduced header size */
color: #333;
font-family: 'Segoe UI', serif;
margin-bottom: 5px;
}
header p {
font-size: 12px; /* Smaller font size for the paragraph */
color: #666;
font-family: 'Segoe UI', sans-serif;
line-height: 1.4;
}
/*----------------------------------------------
* Navigation Bar
*----------------------------------------------*/
.navbar {
background-color: #fff;
padding-left: 50px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e0e0e0;
margin-top: 10px;
}
.navbar ul {
list-style-type: none;
display: flex;
gap: 20px;
padding: 10px 0;
}
.navbar ul li {
margin-right: 15px;
}
.navbar ul li a {
color: #333;
font-size: 14px; /* Reduced font size for navbar links */
text-decoration: none;
font-weight: 400;
transition: color 0.3s ease;
}
.navbar ul li a:hover,
.navbar ul li a:focus,
.navbar ul li a:active {
color: #555;
}
/*----------------------------------------------
* Content Wrapper
*----------------------------------------------*/
.content-wrapper {
display: flex;
flex-direction: column;
margin: 20px auto;
background-color: #fff;
border-radius: 12px;
text-align: left;
margin-left: 70px;
max-width: 900px;
padding: 20px; /* Reduced padding for compactness */
flex-grow: 1;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/*----------------------------------------------
* About Section
*----------------------------------------------*/
.about-section {
margin: 20px 0;
}
.about-section h2 {
font-size: 18px; /* Reduced title size */
margin-bottom: 15px;
font-weight: 700;
text-align: center;
color: #333 !important;
}
.profile {
display: flex;
align-items: center;
margin-bottom: 20px; /* Reduced margin for a more compact profile section */
gap: 15px;
}
.profile-image {
width: 150px; /* Reduced image size */
height: 150px;
border-radius: 12px;
object-fit: cover;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.bio {
flex: 1;
}
.bio p {
font-size: 14px; /* Smaller font size for bio text */
line-height: 1.6;
color: #555;
}
/*----------------------------------------------
* Social Links
*----------------------------------------------*/
.social-links {
display: flex;
justify-content: center;
margin-top: 10px; /* Reduced margin for a more compact layout */
}
.social-links a {
margin: 0 8px; /* Reduced spacing between social icons */
}
.social-links img {
width: 30px; /* Reduced icon size */
height: 30px;
transition: transform 0.3s ease;
}
.social-links img:hover {
transform: scale(1.1);
}
/*----------------------------------------------
* Footer
*----------------------------------------------*/
footer {
position: sticky;
bottom: 0;
z-index: 10;
text-align: center;
padding: 20px;
background-color: #f5f5f5;
color: #666;
border-top: 1px solid #e0e0e0;
width: 100%;
margin-top: auto;
}
/*----------------------------------------------
* Dark Mode Styles
* Automatically applies when the system is in dark mode
*----------------------------------------------*/
/*----------------------------------------------
* Body Styles for Dark Mode
*----------------------------------------------*/
body {
background-color: #181818; /* Dark background color for the body */
color: #e0e0e0; /* Light text color for readability in dark mode */
}
/*----------------------------------------------
* Header Section for Dark Mode
*----------------------------------------------*/
header {
background-color: #232323; /* Dark background for the header */
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1); /* Lighter shadow for contrast */
}
header h1 {
color: #e0e0e0; /* Light text color for header */
}
header p {
color: #aaa; /* Lighter text color for paragraph */
}
/*----------------------------------------------
* Navigation Bar for Dark Mode
*----------------------------------------------*/
.navbar {
background-color: #232323; /* Dark background for the navbar */
border-bottom: 1px solid #444; /* Darker border for the navbar */
}
.navbar ul li a {
color: #e0e0e0; /* Light text color for navigation links */
}
.navbar ul li a:hover,
.navbar ul li a:focus,
.navbar ul li a:active {
color: #fff; /* Highlight color on hover */
}
/*----------------------------------------------
* Content Wrapper for Dark Mode
*----------------------------------------------*/
.content-wrapper {
background-color: #2a2a2a; /* Dark background for content wrapper */
color: #e0e0e0; /* Light text color for content */
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); /* Light shadow for contrast */
}
/*----------------------------------------------
* About Section for Dark Mode
*----------------------------------------------*/
.about-section h2 {
color: #e0e0e0; /* Light text color for section title */
}
.profile-image {
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1); /* Lighter shadow for profile image */
}
/*----------------------------------------------
* Footer for Dark Mode
*----------------------------------------------*/
footer {
background-color: #232323; /* Dark background for the footer */
color: #ccc; /* Lighter text color for footer */
border-top: 1px solid #444; /* Darker border for footer */
}