.articleContent {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-size: 24px;
    color: var(--text-light);
}

.articleContent img {
    width: 100%;
    border-radius: 6px;
}

.article_pageimg{
    height: auto;
    width: 100%;
    position: relative;
    margin-bottom: 50px;
}


.article_pageimg img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    margin: 0;
    border-radius: 0px 0 12px 12px;
}

.article_pageimg span{
margin-inline: auto;
width: fit-content;
position: absolute;
left: 50%;
bottom: -8px;
transform: translateX(-50%);
display: inline-block;
font-size: 20px;
font-weight: bold;
text-align: center;
padding: 3px 12px;
border-radius: 3px;
color: var(--TagText, var(--secondary-content));
background-color: var(--TagBackground, var(--secondary));
}
.PageInfo_Title{font-size: 40px; font-weight: bold; margin: 0; color: var(--text);}
.PageInfo_Rank{font-size: 20px; margin: 0; font-weight: normal; font-weight: 500;}
.PageInfo_Date{font-size: 20px; margin: 12px 0 0 0;color: var(--text-lighter);}
.PageInfo hr{width: 50%; margin: 5px 0 0 0;border: 2px solid var(--primary);}

.PageInfo_Author {
    font-size: 20px;
    font-weight: 600;
    margin: 6px 0 0;
    color: var(--text-light);
}

.PageInfo_Author span {
    position: relative; /* Create a positioning context */
}

.PageInfo_Author span:not(:last-child)::after {
    content: ',';
    margin-left: 0px;
    color: var(--text-light);
}


/* ----- Ranks ----- */

.ArticleTags {
    width: fit-content;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    margin-inline:auto;
    flex-wrap: wrap;
    justify-content: center;
}

.ArticleTags a{
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 6px 15px;
    border-radius: 6px;
    color: var(--TagText, var(--secondary-content));
    background-color: var(--TagBackground, var(--secondary));
    text-decoration: none;
    margin-inline: 5px;
    margin-bottom: 10px;
    transform: translate(0px, 0px) scale(1);
    transition: transform 0.3s ease-in-out;
}

.ArticleTags a:hover{
    transform: translate(0px, -6px) scale(1.1);
}

.SocialEmbed {
    width: fit-content;
    margin-inline: auto;
    max-width: 100vw;
  }

.PostsList *{text-decoration: none;}

.PostBit{background-color: var(--foreground); border-radius: 6px;border: 1px solid var(--border);margin: 10px; text-decoration: none;}

.PostsList{display: flex;flex-direction: row;flex-wrap: wrap;}
.PostsList div{max-width: 500px;}
.PostsList div div{width: fit-content;}
.PostsList img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 6px;
}
.PostsList h3{
    margin: 0;
    margin-top: 6px;
    font-size: 30px;
    font-weight: bold;
    color: var(--text);
}
.PostsList p{font-size: 20px;margin: 0;margin-top: 8px;color: var(--text-light);}
.PostInfo span{font-size: 16px; font-weight: 500;color: var(--text-light);}
.PostInfo{margin: 10px;}
.PostInfo i{margin-right: 5px;}