@media (max-width: 768px) {
    /* Typography */
    body {
        font-size: 16px;
        line-height: 1.6;
    }

    h1 {
        font-size: 28px;
    }
    h2 {
        font-size: 24px;
    }

    /* Layout containers */
    .container,
    .index-container,
    .post-container,
    .nav-bar {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .container,
    .index-container {
        padding: 15px;
    }

    /* Navigation */
    .nav-bar {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 15px;
    }

    .nav-item {
        /* margin: 5px; */
        padding: 0;
    }

    .nav-bar > *:not(:first-child) {
        padding: 5px;
        width: auto;
    }

    .nav-bar :last-child {
        padding-right: 0px;
    }

    /* Post styling */
    .post {
        margin-bottom: 25px;
        display: flex;
        flex-direction: column;
    }

    .post-date {
        font-size: 14px;
        color: #666;
        margin-right: 10px;
    }

    .post-title-separator {
        margin: 10px 0;
    }

    .post-content {
        white-space: normal;
        word-break: normal;
        hyphens: none;
        max-width: 100%;
    }

    /* Index page specific */
    .index-date {
        order: -1;
        flex: 0 0 15px;
    }

    .index-post-title {
        font-size: 18px;
        font-weight: 100;
    }

    /* Links */
    .nav-item a,
    .index-post-title a {
        padding: 5px 0;
        display: inline-block;
    }

    /* Media and code blocks */
    img,
    code,
    pre {
        max-width: 100%;
        height: auto;
    }

    code,
    pre {
        white-space: pre-wrap;
        word-wrap: break-word;
        text-wrap: nowrap;
    }

    footer {
        max-width: none; /* Remove the max-width constraint */
        width: auto; /* Let it take width based on padding */
        padding-left: 15px; /* Add padding to match mobile container */
        padding-right: 15px; /* Add padding to match mobile container */
        margin-left: 0; /* Remove auto margins */
        margin-right: 0; /* Remove auto margins */
        font-size: 14px; /* Slightly smaller font size for mobile */
        margin-top: 30px; /* Adjust top margin if needed */
        padding-top: 15px; /* Adjust top padding if needed */
    }

    .footer-line {
        margin-bottom: 8px; /* Adjust space below the line if needed */
    }

    .footer-text {
        font-size: 1em; /* Ensure text size is relative to footer */
    }
}

@media (max-width: 500px) {
    .nav-bar {
        flex-wrap: wrap;
    }

    .nav-bar > *:not(:first-child) {
        order: 2;
        width: auto;
        padding: 0px;
    }

    .nav-bar > *:first-child {
        flex: 1 1 100%;
        margin-bottom: 10px;
    }
}