body {
    background-color: #121212;
    color: #E0E0E0;
    font-family: Arial, sans-serif; /* Ensure a readable font */
    text-align: left;
}

.navbar {
    background-color: #092E20;
    border-bottom: 1px solid #092E20;
}

.navbar-brand, .nav-link {
    color: #E0E0E0;
}

.nav-link:hover {
    color: #76C7C0;
}

.container-fluid {
    margin-bottom: 50px; /* To give some space above the footer */
}

h1, h5, p {
    color: #E0E0E0;
}

.container h1 {
    margin-bottom: 2rem; /* Ensures this only affects h1 elements within
    .container */
    text-align: center;  /* Center the h1 element */
}

.container h2 {
    margin-bottom: 2rem; /* Ensures this only affects h2 elements within
    .container */
    text-align: center;  /* Center the h2 element */
}

.container h3 {
    margin-bottom: 2rem; /* Ensures this only affects h3 elements within
    .container */
    text-align: center;  /* Center the h3 element */
}

.post-thumbnail {
    max-width: 150px; /* Adjust size as needed */
    height: auto;     /* Maintain aspect ratio */
    object-fit: cover; /* Crop image to fit the dimensions */
}

.blog-image {
    max-width: 100%;  /* Ensures the image does not overflow its container */
    width: 50%;       /* Image will take up 50% of the container's width */
    height: auto;     /* Maintains the aspect ratio */
    display: block;   /* Ensures that the image centers if it's in a block-level container */
    margin: 0 auto 2rem auto;   /* Centers the image horizontally */
}


/* Change post links color to match social icons */
a.text-decoration-none {
    color: #76C7C0 !important; /* Same color as the social icons */
}

a.text-decoration-none:hover {
    color: #5DA6A6 !important; /* A slightly darker shade for hover effect */
}

.text-container {
    max-width: 45rem; /* Approx 80 characters at 16px font size */
    margin: 0 auto;
    text-align: left; /* Center the text inside the container */
    padding: 2rem 1rem; /* Add padding for spacing */
}

ol {
    text-align: center; /* Centers the content of the list */
    list-style-position: inside; /* Moves numbers inside the content box */
    padding: 0; /* Removes extra padding, if any */
}

.text-container p {
    margin-bottom: 1rem; /* Space between paragraphs */
    line-height: 1.6; /* Increase line height for readability */
    text-align: left; /* center-align the paragraphs for better readability */
}

.text-container h1 {
    text-align: center; /* Center the heading */
    margin-bottom: 2rem; /* Space below the heading */
    font-size: 2.5rem; /* Adjust the heading size */
    color: #76C7C0; /* Match the color of the social icons */
}

/* Left-align unordered and ordered lists */
ul, ol {
    margin-left: 0; /* Remove unnecessary default margins */
    padding-left: 20px; /* Add padding for proper indentation */
    text-align: left; /* Ensure the text inside the list items is left-aligned */
    list-style-position: outside; /* Keep bullets/numbers outside the content */
}

/* Specific styling for lists inside .text-container */
.text-container ul, .text-container ol {
    margin-left: 0; /* Override inherited margins */
    padding-left: 20px; /* Add appropriate indentation */
    text-align: left; /* Explicitly left-align the content */
}


footer a {
    color: #76C7C0;
}

footer a:hover {
    color: #5DA6A6;
}

.bi {
    font-size: 2rem;
    margin: 0 10px;
}

footer p {
    margin-top: 10px; /* Space between icons and text */
}

/* Button Styles for Topics */
.btn {
    background-color: #76C7C0; /* Match the site's accent color */
    color: #121212; /* Contrast against the button background */
    padding: 10px 20px;
    margin: 5px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #5DA6A6; /* Darken slightly on hover */
}

.btn.active {
    background-color: #092E20; /* Darker color for the active button */
    color: #E0E0E0; /* Contrast against the active background */
}

/* Additional styling for the topics container */
.topics {
    text-align: center; /* Center the buttons */
    margin-bottom: 20px; /* Space below the buttons */
}

.posts {
    margin-top: 20px; /* Space above the posts list */
}

.separator {
    height: 2px; /* Height of the separator */
    background-color: #76C7C0; /* Color of the separator, matching your theme */
    margin: 20px 0 40px 0; /* Space above and below the separator */
}

/* Markdown-Deux settings */
code, pre {
    text-align: left; /* Ensures the text is aligned to the left */
    font-family: "Courier New", Courier, monospace; /* Monospace font for code */
    white-space: pre-wrap;       /* Preserve whitespace and line breaks */
    white-space: -moz-pre-wrap;  /* Firefox */
    white-space: -pre-wrap;      /* Opera <7 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Ensure long lines break properly */
}