header {
            border-bottom: 1px solid #c5c5c5;
            padding-bottom: 20px;
            margin-bottom: 40px;
            background-color: #ffffff;
        }

        .logo {
            font-size: 1rem;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .tagline {
            font-size: 1.1em;
            color: #666;
        }

        nav {
            margin-top: 20px;
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 30px;
        }

        nav a {
            text-decoration: none;
            color: #000;
            font-weight: bold;
            padding: 5px 10px;
            border: 1px solid transparent;
        }

        nav a:hover {
            border: 1px solid #000;
            color:#292828
        }

        .active {
            border: 1px solid #000 !important;
        }

        main {
            min-height: 500px;
        }

        /* HOME PAGE STYLES */
        .home-page {
            display: block;
        }

        .post-preview {
            border-bottom: 1px solid #dddddd ;
            margin-bottom: 30px;
            padding: 25px;
        }

        .post-preview h2 {
            font-size: 1.8em;
            margin-bottom: 10px;
            cursor: pointer;
            font-weight: 600;
            border: 0;
        }

        .post-preview h2:hover {
            /* text-decoration: underline; */
        }

        .post-meta {
            color: #1b1b1b;
            font-size: 0.8rem;
            margin-bottom: 15px;
            font-weight: 200;
        }

        .post-excerpt {
            margin-bottom: 15px;
        }

        .read-more {
            color: #000;
            text-decoration: none;
            font-weight: bold;
            border: 1px solid #000;
            padding: 5px 15px;
            display: inline-block;
        }
        .post-link {
            color: #000;
            text-decoration: none;
            font-weight: bold;
            padding: 5px 15px;
            display: inline-block;
        }

        .post-link:hover {
            color: #d3bcbc;
        }

        .post-link h3 {
            font-size: 1.1rem;
            font-weight: 400;
            line-height: 1.6rem;
            color: #6b6b6b;
            border:0;
        }
        .read-more:hover {
            background-color: #000;
            color: #fff;
        }

        /* POST PAGE STYLES */
        .post-page {
            display: block;
        }

        .post-header {
            border-bottom: 1px solid #c5c5c5;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }

        .post-title {
            font-size: 2.2em;
            margin-bottom: 10px;
        }

        .post-content {
            font-size: 1.1em;
            line-height: 1.8;
        }

        .post-content h3 {
            font-size: 1.4em;
            margin: 30px 0 15px 0;
            border-left: 3px solid #000;
            padding-left: 15px;
        }

        .post-content p {
            margin-bottom: 20px;
        }

        .post-content code {
            background-color: #f5f5f5;
            padding: 2px 6px;
            font-family: 'Courier New', monospace;
            border: 1px solid #ddd;
        }

        .post-content pre {
            background-color: #f5f5f5;
            padding: 20px;
            border: 1px solid #000;
            margin: 20px 0;
            overflow-x: auto;
        }

        .back-link {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #000;
        }

        .back-link a {
            color: #000;
            text-decoration: none;
            font-weight: bold;
        }

        .back-link a:hover {
            text-decoration: underline;
        }

        footer {
            border-top: 1px solid #c3c3c3;
            margin-top: 60px;
            padding-top: 20px;
            text-align: center;
            color: #666;
        }

        @media (max-width: 768px) {
            body {
                padding: 15px;
            }
            
            .logo {
                font-size: 1em;
            }
            
            nav ul {
                flex-direction: column;
                gap: 15px;
            }
            
            .post-preview {
                padding: 20px;
            }
        }