:root {
 --primary-color: #b8bec5;
 /* Navy blue */
 --secondary-color: #be8046;
 /* Orange */
 --body-header-color: #0d0d0e;
 --text-color: #0d0d0e;
 /* Dark blue-gray */
 --background-color: #eaecf0;
 /* Slightly darker off-white */
 --header-footer-bg: #778fd7;
 /* Dark navy */
 --accent-color: #3a89c6;
 /* Teal */
 --hover-color: #ef476f;
 /* Coral pink */
 --card-bg: #ffffff;
 /* Pure white */
 --border-radius: 10px;
}

body {
 font-family: 'Montserrat', 'Arial', sans-serif;
 margin: 0;
 padding: 0;
 background-color: var(--background-color);
 color: var(--text-color);
 line-height: 1.6;
}

.container {
 max-width: 1400px;
 margin: 0 auto;
 padding: 0 15px;
}

/* Header Styles */
header {
 background: linear-gradient(135deg, var(--header-footer-bg), var(--primary-color));
 color: rgba(17, 15, 15, 0.973);
 padding: 0.5rem 0;
 text-align: center;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 margin-bottom: 0.5rem;
 /* Added bottom margin */
 width: 100%;
}

header h1 {
 margin: 0;
 font-size: 2.2rem;
 font-weight: 700;
 letter-spacing: 1px;
}

nav ul {
 list-style: none;
 padding: 0;
 margin: 0.3rem 0 0;
 display: flex;
 justify-content: center;
 gap: 10px;
}

nav a {
 text-decoration: none;
 color: rgba(17, 15, 15, 0.973);
 font-weight: 600;
 padding: 0.3rem 1.2rem;
 border-radius: var(--border-radius);
 transition: all 0.3s ease;
 position: relative;
 overflow: hidden;
}

nav a:hover {
 background-color: var(--accent-color);
 transform: translateY(-3px);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Main Content Styles */
main.blog-posts {
 padding: 3rem;
 background-color: var(--background-color);
 max-width: 1200px;
 margin: 3rem auto 5rem;
 /* Increased top and bottom margins */
}

article {
 background-color: var(--card-bg);
 padding: 2rem;
 margin-bottom: 3rem;
 border-radius: var(--border-radius);
 box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
 border-left: 5px solid var(--secondary-color);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

article:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}


article h2 {
 color: var(--body-header-color);
 /* Darker color for better contrast */
 margin-top: 0;
 font-weight: 800;
 /* Bolder text */
 font-size: 2rem;
 /* Slightly larger */
 border-bottom: 2px solid var(--secondary-color);
 padding-bottom: 0.5rem;
 display: inline-block;
}


.post-meta {
 color: var(--body-header-color);
 font-style: italic;
 margin-bottom: 1.5rem;
 background-color: rgba(91, 192, 190, 0.1);
 /* Light teal background */
 display: block;
 padding: 0.3rem 0.7rem;
 border-radius: 20px;
 font-size: 0.9rem;
}

ol {
 padding-left: 2rem;
}

ol li {
 color: var(--body-header-color);
 margin-bottom: 1rem;
 position: relative;
 padding-left: 0.5rem;
}

ol li strong {
 color: var(--body-header-color);
 font-weight: 700;
 font-size: 1.05rem;
}

ol li::marker {
 color: var(--secondary-color);
 font-weight: bold;
}

/* Apply Georgia font to paragraphs with improved styling */
p {
 font-family: Georgia, 'Times New Roman', serif;
 font-size: 1.05rem;
 color: var(--text-color);
 margin-bottom: 1.2rem;
}

p strong {
 color: #0a0a0a; /* Darker color */
 font-weight: 700;
}


article a.back-link {
 display: inline-block;
 padding: 0.7rem 1.5rem;
 background-color: var(--accent-color);
 color: white;
 text-decoration: none;
 border-radius: 25px;
 transition: all 0.3s ease;
 margin-top: 2.5rem;
 /* Increased top margin */
 font-weight: 600;
 letter-spacing: 0.5px;
 border: none;
}

article a.back-link:hover {
 background-color: var(--hover-color);
 transform: translateY(-2px);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Footer Styles */
footer {
 background: linear-gradient(135deg, var(--primary-color), var(--header-footer-bg));
 color: white;
 text-align: center;
 padding: 0.75rem 0;
 /* Reduced padding from 1.5rem to 0.75rem */
 position: sticky;
 bottom: 0;
 width: 100%;
 margin-top: 1.5rem;
 /* Reduced top margin from 3rem to 1.5rem */
}

/* Adjust footer content for more compact appearance */
footer p {
 margin: 0.25rem 0;
 /* Minimal margin for paragraph inside footer */
 font-size: 0.9rem;
 /* Slightly smaller text */
}

footer a {
 color: var(--secondary-color);
 text-decoration: none;
 font-weight: 600;
 transition: color 0.3s ease;
}

footer a:hover {
 color: var(--accent-color);
 text-decoration: underline;
}
/* LinkedIn-specific style */
.linkedin-link {
 color: #141718; /* LinkedIn blue */
}
.linkedin-link:hover {
 color: #005582;
 text-decoration: underline;
}

/* Twitter-specific style */
.twitter-link {
 color: #141718; /* Twitter blue */
}
.twitter-link:hover {
 color: #1479c9;
 text-decoration: underline;
}
/* Additional styling for emphasis */
strong {
 color: var(--primary-color);
 font-weight: 700;
}

em {
 color: var(--secondary-color);
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
 header h1 {
 font-size: 1.8rem;
 }

 nav ul {
 flex-direction: column;
 align-items: center;
 gap: 15px;
 }

 main.blog-posts {
 padding: 1.5rem;
 margin: 2rem auto 3rem;
 /* Adjusted margins for mobile */
 }

 article {
 padding: 0.5rem;
 }
}

/* Add a subtle animation to the page load */
@keyframes fadeIn {
 from {
 opacity: 0;
 transform: translateY(20px);
 }

 to {
 opacity: 1;
 transform: translateY(0);
 }
}

article {
 animation: fadeIn 0.8s ease forwards;
}