:root[color-mode="dark"] {
     --Primary-Color: #2c2c2c;
     --Secondary-Color: #323438;
     --Tertiary-Color: #292a2e;
     --info-icon-bg: hsl(220 6% 13% / 1);
     --info-content-bg: #323438;
     --Post-Tags-Section-Color: hsl(228 6% 16% / 1);
     --hyperlink-decoration-color: hsl(0deg 0% 100% / 20%);
     --sidebar-item-box-header-bg: #262626;
     --sidebar-item-box-header-text: #ffffffde;
     --sidebar-item-box-content-bg: hsl(0 0% 21% / 1);
     --TextColor: #ffffff;
     --MainBoxShadowColor: #00000080;
     --SideBarTitleShodow: inset 0 3px 6px -5px #00000080;
     --SelectedBGColor: #48433d;
     --CommentFormFocusOutlineColor: #606060;
     .prettyprint > span {
         filter: invert(1);
    }
     .comment-form input {
         color: var(--TextColor);
    }
     body::before {
         filter: invert(1);
    }
}
 pre, code {
     font-family: "Vazir Code", "Vazir Code Hack", monospaced;
}
 :root {
     --Primary-Color: oklch(0.95 0 0);
     --Secondary-Color: oklch(0.97 0 0 / 1);
     --Tertiary-Color: #ffffff;
     --info-icon-bg: hsl(0 0% 90% / 1);
     --info-content-bg: hsl(0 0% 95% / 1);
     --Post-Tags-Section-Color: hsl(0deg 0% 95%);
     --hyperlink-decoration-color: hsl(0deg 0% 0% / 20%);
     --sidebar-item-box-header-bg: oklch(0.75 0.04 248.98 / 1);
     --sidebar-item-box-header-text: #ffffff;
     --sidebar-item-box-content-bg: #ffffff;
     --SelectedBGColor: oklch(0.9 0.02 248.4 / 1);
     --TextColor: oklch(0.5 0.02 248.4 / 1);
     --CommentFormFocusOutlineColor: #ededed;
     --MainBorderColor: #707070;
     --SideBorderColor: #70707033;
     --Font: sahel, sans-serif;
     --BorderRadius: 30px;
     --BorderImage:  url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%2370707080' stroke-width='4' stroke-dasharray='9%2c 9' stroke-dashoffset='9' stroke-linecap='butt'/%3e%3c/svg%3e") 1 round;
     --SideBarCommentAvatarSize: 35px;
     --MainBoxShadowColor: #707070;
     --SideBarTitleShodow: inset 0 3px 6px -5px;
     --search-bg-image: url( data:image/svg + xml, %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"width="18"height="18"%3E%3Cpathd="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"fill="rgba(255,255,255,1)"%3E%3C/path%3E%3C/svg%3E );
     --transition: all 0.3s ease-in-out;
}
 body::before {
     content: "";
     background: url(https://bayanbox.ir/view/5294501647348575202/stars-bg.jpg);
     background-size: auto;
     background-attachment: fixed;
     inset: 0;
     position: absolute;
     z-index: -1;
}
 body {
     font-family: var(--Font);
     transition: var(--transition);
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
}
 body, a {
     color: var(--TextColor);
}
 a {
     text-decoration-color: var(--hyperlink-decoration-color);
}
 a:hover {
     text-decoration: none;
}
 h1, h2, h3, h4 {
     font-family: inherit;
}
 hr {
     width: 30%;
     margin-block-start: 4em;
     margin-block-end: 4em;
     border-image: var(--BorderImage);
}
 iframe {
     width: 100%;
}
 #header {
     display: flex;
     justify-content: center;
     align-items: baseline;
     flex-direction: row;
     font-size: 15px;
     text-align: center;
     margin: 0 20px 0 20px;
     gap: 0.5rem;
}
 h1 {
     font-weight: 900;
}
 #title a, #sidebar a, .iconandtitle a, .likeanddis a {
     text-decoration: none;
}
 .iconandtitle i {
     font-size: 16px;
}
 .iconandtitle {
     display: flex;
     align-items: center;
}
 #main-box {
     background: var(--Secondary-Color);
     border-radius: 30px;
     box-shadow: 0px 3px 99px -35px var(--MainBoxShadowColor);
     margin: 15px;
}
 img {
     max-width: 100%;
     height: auto !important;
}
 img:not(#ads img) {
     border-radius: 15px;
}
 #sidebar h2 {
     text-align: center;
     margin: 0;
}
 #children-category {
     margin-right: 15px;
     display: flex;
     align-items: baseline;
     flex-direction: row;
     gap: 0.5rem;
}
 #children-category-names {
     width: 100%;
}
 #tag-cloud {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
}
 #sidebar #tag-cloud li {
     background-color: var(--Post-Tags-Section-Color);
     border-radius: var(--BorderRadius);
     padding: 0.1rem 0.5rem;
}
 #sidebar #tag-cloud li.selected {
     background-color: var(--SelectedBGColor);
}
 #info .sidebar-item-box-header:has(#srchBx) + .sidebar-item-box-content {
     border-radius: 0 0 1rem 1rem;
}
 #info .sidebar-item-box-header:not(:has(#srchBx)) + .sidebar-item-box-content {
     border-radius: 1rem;
}
/* ================================================== */
/* Code For Modify Bayan.ir Default Styles*/
 audio {
     width: 100%;
     max-width: 20rem;
}
 .first-flex:has(audio) {
     width: 100%;
}
 textarea {
     background-color: var(--Secondary-Color);
}
 select {
     background-color: var(--Secondary-Color);
}
 pre.prettyprint {
     border: none;
     border-radius: var(--BorderRadius);
     padding: 5px;
     max-width: 60vw;
}
 pre {
     background-color: var(--Secondary-Color);
}
 .bComForm .sendbutton.hasCheckbox, .bComForm .sendbutton {
     margin: 5px 40% 10px 40%;
     padding: 5px 0;
     width: -webkit-fill-available;
     width: -moz-available;
     border-width: 1px;
     border-color: #767676;
     border-style: solid;
}
 input[type="submit"] {
     background: var(--Secondary-Color);
     color: var(--TextColor);
}
 .bComForm .sendbutton.hasCheckbox:hover, select, input[type="submit"]:hover {
     cursor: pointer;
}
 .formField2 label {
     cursor: text;
}
 textarea:focus-visible, select:focus-visible, .inputFix input:focus-visible, input[type="password"]:focus-visible {
     outline: var(--CommentFormFocusOutlineColor) solid 3px;
}
 .item_wrn, .item_err, .item_success {
     margin: 15px 15px 0 15px;
}
 .bComForm .commentAvatar span {
     margin: -19px 0 0;
     border-radius: 0 0 12px 12px;
     font-size: 12px;
}
 .bComForm .commentAvatar img {
     border: none;
}
 input[type="button"], input[type="text"], input[type="password"], input[type="submit"], button, textarea, select, .inputBox, input.text, a.btn, a.btn:hover, a.btn:visited {
     border-radius: 10px;
}
 div.inputFix input.text, .fldcontent input.text {
     border-style: solid;
     border-width: 1px;
}
/* -------------------------------------------------- */
/* Search Box */
 .search-box.dark .submit, .search-box.dark .submit:hover, .search-box.dark .submit:focus, .search-box .submit, .search-box .submit:hover, .search-box .submit:focus {
     cursor: pointer;
     background-color: unset;
     background: none;
     background-repeat: no-repeat;
     background-image: var(--search-bg-image);
     background-position: center;
}
 .search-box, .search-box.dark, .search-box.light, .search-box.white {
     border-radius: 30px;
     margin: 0;
     padding: 0.3rem;
     border: unset;
}
 #info .sidebar-item-box-header > .search-box {
     background: none;
}
 #info .sidebar-item-box-content > .search-box {
     background-color: rgba(0, 0, 0, 0.06);
}
/* -------------------------------------------------- */
 #info input, .followBx, .followThis, .comment-form select, .comment-form input {
     font-family: inherit;
}
 .followBx {
     border-radius: 15px;
}
 #followThis {
     border-radius: var(--BorderRadius);
}
 #followInBx a {
     text-decoration: revert;
}
 #followInBx.dark {
     color: var(--TextColor);
}
 .formField2 .fldcontent {
     margin-right: 8em;
}
 .formField2 label {
     width: 7em;
}
 .comment-form input {
     background: var(--Secondary-Color);
     border-radius: var(--BorderRadius);
     padding: 0 10px 0 10px;
}
 .comment-form {
     background: var(--Tertiary-Color);
     border-radius: var(--BorderRadius);
     padding: 10px;
}
/* ================================================== */
 .post-page-content-section {
     background: var(--Tertiary-Color);
     border-radius: 30px;
     margin-bottom: 25px;
}
 .other-than-image {
     display: flex;
     align-items: baseline;
}
 .post-icon {
     margin: 0 10px 0 10px;
}
 .other-than-icon {
     padding: 0 0 25px 25px;
     width: -webkit-fill-available;
}
 .thumbnail {
     padding: 25px 25px 0 25px;
}
 .post-page {
     padding: 15px 15px 15px 15px;
     overflow-wrap: anywhere;
}
 .text-content div {
     margin-block-start: 1rem;
}
 .one-comment {
     background: var(--Tertiary-Color);
     border-radius: var(--BorderRadius);
     padding: 15px;
     margin-bottom: 30px;
}
 .avatar-and-name, .comment-reply {
     display: flex;
     flex-direction: row;
     align-items: center;
}
 .comment-reply-body {
     background: var(--Secondary-Color);
     border-radius: var(--BorderRadius);
     padding: 15px;
     width: -webkit-fill-available;
     width: -moz-available;
}
 .comment-reply {
     margin-right: 30px;
}
 .comment-raply-avatar {
     margin-left: 15px;
}
 .avatar-and-name img {
     margin-left: 15px;
}
 .comment-body {
     margin: 15px 0 15px 0;
}
 #sidebar {
     background: var(--Primary-Color);
     border-top: dashed 1px;
     border-image: var(--BorderImage);
     border-radius: 0 0 30px 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2rem;
}
 #sidebar ul {
     list-style-type: none;
     padding-inline-start: 0px;
}
 #sidebar li {
     padding: 5px 0 5px 0;
}
 #sidebar li:not(:first-child), .sidebar-item-box-content > ul > ul {
     border-top: dashed 1px;
     border-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%2370707033' stroke-width='4' stroke-dasharray='5%2c 5' stroke-dashoffset='5' stroke-linecap='butt'/%3e%3c/svg%3e") 1 round;
}
 #sidebar #tag-cloud li {
     border: none;
}
 #sidebar > div {
     width: 250px;
}
 #menu, #blog-image, #ads {
     text-align: center;
}
 #description, #footer {
     font-weight: 300;
}
 #footer {
     text-align: center;
     font-size: 15px;
     margin: 30px 0 30px 0;
}
 #blog-image img {
     max-width: 70px;
}
 #pagination-section {
     display: flex;
     justify-content: center;
     margin-bottom: 30px;
     align-items: center;
}
 .pagination-button, #page-numbers a {
     background-color: var(--Tertiary-Color);
     border-radius: var(--BorderRadius);
     padding: 5px;
}
 #pagination-section :not(:last-of-type) {
     margin-left: 5px;
}
 #post-list-title {
     margin-bottom: 15px;
}
 textarea, input, select {
     font-family: var(--Font);
     color: var(--TextColor);
}
 #sidebar {
     padding-bottom: 20px;
}
 .comments-section-title {
     margin: 25px 0 25px 0;
     text-align: center;
}
 #rss-icon {
     text-decoration: none;
}
 .first-and-last:not(:first-child) {
     margin-right: 10px;
}
 .first-and-last:not(:last-child) {
     margin-left: 15px !important;
}
 #menu .selected {
     background-color: var(--SelectedBGColor);
}
 #page-numbers .current {
     background-color: var(--SelectedBGColor);
}
 .sidebar-list .selected {
     background-color: var(--SelectedBGColor);
}
 #comment-profile img {
     width: var(--SideBarCommentAvatarSize);
}
 .detail, .likeanddis {
     margin-bottom: 15px;
}
 .read-more, .likeanddis {
     margin-top: 15px;
}
 .likeanddis i {
     margin-left: 5px;
}
 .likeanddis {
     display: flex;
     flex-direction: row;
     gap: 0.3rem;
}
 .clickable {
     background: var(--Secondary-Color);
     padding: 0.3rem 1rem;
     border-radius: var(--BorderRadius);
     display: flex;
     flex-direction: row;
     align-items: center;
     transition: var(--transition);
}
 .clickable:hover {
     padding: 0.3rem 1.5rem;
}
 .post_tags {
     background: var(--Post-Tags-Section-Color);
     border-radius: 0 0 30px 30px;
     margin-bottom: 25px;
     padding: 1rem;
     display: flex;
     gap: 0.7rem;
     flex-direction: row;
     flex-wrap: wrap;
}
 #post-detail-content-box {
     background: var(--Tertiary-Color);
     border-radius: 30px;
     margin-bottom: 0;
}
 #post-detail-content-box:has(+ .post_tags) {
     border-radius: 30px 30px 0 0;
}
 .sidebar-item-box-content {
     background-color: var(--sidebar-item-box-content-bg);
     border-radius: 0 0 1rem 1rem;
     padding: 1rem;
     display: flex;
     flex-direction: column;
     gap: 1rem;
}
 .sidebar-item-box-header {
     background-color: var(--sidebar-item-box-header-bg);
     border-radius: 1rem 1rem 0 0;
     color: var(--sidebar-item-box-header-text);
}
/* -------------------------------------------------- */
/* Post/Page Info boxes */
 span.post-page-info-box {
     display: flex;
}
 span.post-page-info-icon {
     background-color: var(--info-icon-bg);
     padding: 0.1rem 0.5rem;
     border-radius: 0 0.5rem 0.5rem 0;
     display: flex;
     align-items: center;
     flex-direction: row;
}
 span.post-page-info-content {
     background-color: var(--info-content-bg);
     padding: 0.1rem 0.5rem;
     border-radius: 0.5rem 0 0 0.5rem;
     display: flex;
     flex-wrap: wrap;
}
 span.post-page-info-content > a {
     transition: var(--transition);
}
/* TODO: We can add the padding for hyperlink, or we can just add a padding to span itself... */
 span.post-page-info-content > a:hover {
     padding: 0 0.8rem;
}
 .detail {
     display: flex;
     flex-direction: row;
     gap: 0.5rem;
     flex-wrap: wrap;
}
 #avatar-wrapper {
     position: absolute;
     top: -66px;
     left: clamp(200px, 53dvw, 270px);
}
 #main-box {
     position: relative;
}
/* -------------------------------------------------- */
/* Desktop Version */
 @media (min-width: 1200px) {
     #main-box {
         display: flex;
         margin: 0 16% 0 16%;
    }
     #sidebar {
         border-radius: 30px 0 0 30px;
         border-right: dashed 1px;
         border-image: var(--BorderImage);
         border-top: none;
         padding: 0 70px 20px 70px;
         width: 20%;
    }
     #footer {
         margin: 30px 0 30px 0;
    }
     .post-page {
         padding: 30px 30px 15px 30px;
    }
     textarea, input, select, body {
         font-size: unset;
    }
     #content-section {
         width: -webkit-fill-available;
         width: -moz-available;
    }
}