body {
    color: var(--dark-color);
    font-family: 'Roboto Mono', monospace;
    background-color: inherit;
    background-image: inherit;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Comic Neue', cursive;
    font-weight: 700 !important;
    letter-spacing: 0.10rem;
}

code {
    display: block;
    margin: 0.5rem 0 0.5rem 1.5rem;
    padding: 0.75rem 1.125rem;
    font-family: 'Roboto Mono', monospace;
    background-color: white;
    border-radius: 0.25rem;
    white-space: pre;
    overflow-x: auto;

    @media (max-width: 600px) {margin: 0.25rem 0 0.25rem 1rem;}
}

.txt-blog-logo i {
    color: var(--dark-color);
    text-transform: none;
}

.blog-nav {
    padding: 2rem;
}

.blog-banner {
    display: flex;
    align-items: center;
    padding: 0 4%;
    @media (max-width: 600px) {flex-direction: column}
    .blog-banner-txt {
        flex: 0 0 60%;
        h1 {
            font-size: 3rem;
            @media (max-width: 600px) {font-size: 1.25rem;}
        }
        span {color: var(--primary-color);}
    }
    .blog-side-banner {
        flex: 0 0 40%;
        margin-top: -2rem;
        @media (max-width: 600px) {display: none}
    }
}

.blog-list-container {
    margin: 2% 10%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    @media (max-width: 600px) {margin: 2% 5%;}

    .list-item {
        display: flex;
        justify-content: center;
        background-color: var(--secondary-color);
        border-radius: 6px;
        cursor: pointer;
        @media (max-width: 600px) {flex-direction: column;}

        .item-poster-area {
            @media (max-width: 600px) {padding: 0.5rem 1.25rem;}
            .item-poster {
                width: 15rem;
                border-radius: 6px;     /* same as list-item */
                height: 100%;
            }
        }

        .item-main {
            padding: 0.5rem 1.25rem;
            overflow: hidden;
            @media (max-width: 600px) {font-size: 0.9rem;}

            .item-title {
                font-size: 2rem;
                @media (max-width: 600px) {font-size: 1.2rem;}
            }
            .item-author {
                color: gray;
                margin-bottom: 1rem;
                @media (max-width: 1100px) {margin-bottom: 0.5rem;}
            }
            .item-text {
                margin-bottom: 0.5rem;
                height: 3lh;
                text-align: justify;
                display: -webkit-box;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                @media (max-width: 600px) {height: 6lh; -webkit-line-clamp: 6;}
            }
        }
    }
}

.blog-details {
    margin: 2% 10%;
    padding: 2% 5%;
    background-color: var(--secondary-color);
    border-radius: 1rem;

    .blog-title {
        font-size: 2rem;
        font-weight: 800;
        @media (max-width: 600px) {font-size: 1.5rem;}
    }
    .blog-title, .blog-author {text-align: center;}

    .blog-poster-area {
        margin: 2rem;
        text-align: center;
        @media (max-width: 600px) {margin: 0.5rem;}
        .blog-poster {width: 100%;}
    }

    .blog-content {
        margin: 1rem 0;
        /*text-align: justify;*/
        font-size: 1.1rem;
        font-family: 'Inter', sans-serif;
        overflow-wrap: break-word;
        @media (max-width: 600px) {font-size: 1rem;}

        .heading {
            margin: 1.75rem 0 1.5rem 0;
            font-size: 1.75rem;
            font-weight: 800;
            @media (max-width: 600px) {font-size: 1.5rem;}
        }
        .heading-2 {
            margin: 1.5rem 0 1rem 0;
            font-size: 1.5rem;
            font-weight: 700;
            @media (max-width: 600px) {font-size: 1.25rem;}
        }
        .sub-heading {
            margin: 1.125rem 0 0.75rem 0;
            font-size: 1.2rem;
            font-weight: 600;
            @media (max-width: 600px) {font-size: 1.125rem;}
        }
    }
}