.article-container h1{
    align-self: center;
}

h1.article-heading, .article-container h2, .article-container h3, .article-container h4, .article-container h5, .article-container h6{
    font-weight: bold;
    font-size: 1rem;
}

.article-container h2, .article-container h3, .article-container h4, .article-container h5, .article-container h6{
    margin-top: 1.5rem;
}

.article-container p, .article-container li{
    font-size: 0.85rem;
    line-height: 1.3rem;
}

.article-container figure{
    width: 100%;
    border-radius: 0.5rem;
    align-self: center;
}

.article-container figure img{
    width: 100% !important;
    border-radius: 0.5rem;
}

.article-container pre{
    align-self: stretch;
    direction: ltr;
    font-size: 0.9rem;
}

.article-container u{
    text-underline-offset: 0.4rem;
}

.article-container a{
    color: var(--color-main);
    text-decoration: underline;
    text-decoration-color: var(--color-main);
    text-decoration-thickness: 1px;
    font-size: 0.9rem;
    font-weight: bold;
    text-underline-offset: 0.4rem;
}

.article-container ul, .article-container ol{
    font-size: 0.9rem;
    list-style-position: inside;
}
.article-container ul{
    list-style-type: disc;
}
.article-container ol{
    list-style-type: decimal;
}

pre code *{
    font-family: monospace !important;
}

pre code , pre code *{
    font-weight: bold;
    font-size: 0.75rem;
}

pre code{
    border-radius: 0.5rem;
}

span.m{
    font-size: 105%;
    color: rgb(21, 170, 21);
}

pre:has(code.o){
    background-color: #282C34;
    color: white;
    padding: 1.4rem 0.7rem 0.7rem 0.7rem;
    border-radius: 0.5rem;
    position: relative;
    margin-top: 0.3rem;
}

pre code.o::before{
    content: 'output :';
    color: #CA9564;
    background-color: #282C34;
    padding: 0.4rem 0.7rem;
    border-radius: 0.5rem;
    position: absolute;
    left: 0;
    top: -0.5rem;
    font-weight: bold;
    display: inline-block;
}

pre .hljs-comment{
    font-family: vazir !important;
    font-style: normal !important;
}

.q::before{
    content: url('/icons/question.svg');
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    position: relative;
    top:7px;
    margin-left: 0.4rem;
}

.article-container h2:not(.q)::before, .article-container h3:not(.q)::before, .article-container h4:not(.q)::before, .article-container h5:not(.q)::before, .article-container h6:not(.q)::before{
    font-weight: bold;
    font-size: 2rem;
    display: inline-block;
    margin-left: 0.5rem;
    position: relative;
    top: 0.3rem;
    color: var(--color-main);
}
.article-container h2:not(.q)::before{
    content: '|';
}
.article-container h3:not(.q)::before{
    content: '||';
}
.article-container h4:not(.q)::before{
    content: '|||';
}
.article-container h5:not(.q)::before{
    content: '||||';
}
.article-container h6:not(.q)::before{
    content: '|||||';
}

@media screen and (min-width: 64rem) {
    .article-container figure{
        width: 46%;
    }

    .article-container p, .article-container li{
        font-size: 0.95rem;
        line-height: 1.5rem;
    }

    h1.article-heading, .article-container h2, .article-container h3, .article-container h4, .article-container h5, .article-container h6{
        font-size: 1.15rem;
    }

    .article-container h2, .article-container h3, .article-container h4, .article-container h5, .article-container h6{
        margin-top: 2rem;
    }

    pre code , pre code *{
        font-size: 0.9rem;
    }

    pre:has(code.o){
    margin-top: 0.6rem;
}

    .q::before{
        width: 2rem;
        height: 2rem;
        top:10px;
        margin-left: 0.5rem;
    }

    pre code.o::before{
        top: -0.8rem;
    }

    .article-container h2:not(.q)::before, .article-container h3:not(.q)::before, .article-container h4:not(.q)::before, .article-container h5:not(.q)::before, .article-container h6:not(.q)::before{
        top: 0.2rem;
    }
}