@font-face {
    font-family: "ubuntu-mono";
    src: url("../assets/fonts/ubuntu-mono.ttf") format("truetype");
  }

.header-desc {
    padding: 180px 2rem 120px 2rem;
    row-gap: 12px; width: fit-content;
    .article-title-ar-page {
        margin-bottom: 1.5rem;
    }
    .article-date-ar-page {
        font-weight: 500;
        color: #FDFBD4;
        display: flex; flex-direction: row; column-gap: 6px;
        align-items: center;
    }

    .article-tags-ar-page {
        display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap;
        div {
            background-color: #FDFBD4; opacity: 0.9;
            color: #2e6f40;
            font-weight: 400;
            padding: 8px 12px;
            border-radius: 4px;
        }
    }
}

.main-b {
    max-width: 800px; width: 800px;
}

article {
    margin: 2.5rem 0;
    display: flex; flex-direction: column; row-gap: 1rem;
    * {
        color: rgb(36, 36, 35);
        line-height: 1.7rem;
        font-weight: 350;
        font-size: 20px;
        list-style-position: outside;
        overflow-wrap: break-word;
    }
    strong {
        font-weight: 600;
        font-size: revert;
    }

    li {
        margin-left: 20px;
        list-style-type: circle;
    }
    
    code, code * {
        font-size: 20px; font-weight: 500;
        color: rgb(88, 110, 117);
        font-family: "ubuntu-mono", monospace;
    }

    code {
        display: grid; grid-template-columns: 0.1fr 1.8fr; gap:6px 1rem;
        background-color: rgb(221, 221, 221);
        color: #2e6f40;
        padding: 2rem 1rem;
        border-radius: 8px;
        margin: 1rem 0;
    }

    .highlight-text {
        background-color: rgb(225, 225, 225);
        padding: 1px 3px; border-radius: 4px; font-weight: 400;
    }

    .link-text {
        color: #2e6f40; font-weight: 400;
        text-decoration: underline;
    }

}

.read-more-articles-link {
    background-color: #2e6f40;
    color: #FDFBD4; padding: 12px 20px;
    font-family: "2", "1"; font-weight: 500;
    width: fit-content; align-self: center;
    margin-bottom: 2rem; margin-top: 2rem;
    transition: background-color 0.3s ease-in-out;
}

.read-more-articles-link:hover {
    background-color: #275e37;
}