body { background:none;  } .post-title{font-size: 2.5rem; font-weight: bold; margin-bottom: 1.5rem;} img { max-width: 100%; height: auto; display: block; } .post-meta{display: flex; flex-wrap: wrap; gap: 1rem; color: #6c757d; border-bottom: 1px solid #dee2e6; padding-bottom: 1rem; margin-bottom: 2rem; font-size: 0.875rem;} .publish-date, .category {display: inline-block;}  .blog-post-img {max-height: 500px; max-width: 100%;border-radius: 0.25rem; margin: 1rem auto; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);} .blog-post-img-div{margin-bottom: 2rem; text-align: center;} .blog-post-content p {margin-bottom: 1rem;} h2 { padding-top: 8px; color: var(--white-color); font-weight: bolder; padding-right: 8px; padding-bottom: 8px; padding-left: 12px; margin-top: var(--global-kb-spacing-xs, 1rem); margin-bottom: var(--global-kb-spacing-xs, 1rem); text-align: left; background-color: var(--btn-color); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); border-radius: 5px; } h3{margin-bottom: 1rem;} ul, ol { padding-left: 2.4rem; margin-bottom: 1rem; } .menu{margin-bottom: 0;} ul p {margin-bottom: 0.2rem;}  ul li, ol li { margin-bottom: 0.1rem; } .tag-pill {background-color: var(--card-form-color); color: var(--off-color); border: 1px solid #dee2e6; border-radius: 1rem; font-weight: 400; padding: 0.35em 0.65em; margin-right: 0.25rem; margin-bottom: 0.25rem; display: inline-block; font-size: 0.875rem;} .tag-pill:hover{ background-color: #e9ecef; color: #212529; text-decoration: none; } .social-sharing-div{text-align: center; background-color: var(--card-form-color); padding: 1rem; border-radius: 0.25rem; margin-bottom: 2rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);} .mb-2{margin-bottom: 0.5rem;} .mb-4{margin-bottom: 2rem;} .me-2{margin-right: 0.5rem;} .me-1{font-size: 0.75rem; margin-right: 0.25rem;} .my-4{margin-top: 2rem; margin-bottom: 2rem;} .mt-1{margin-top: 0.25rem !important;} .d-block{display: block;} .d-inline-block{display: inline-block;} .back-btn-div{text-align: center; margin-top: 2rem; margin-bottom: 3rem;} .back-btn {display: inline-block; padding: 0.25rem 0.75rem; font-size: 1rem; color: #6c757d; background-color: transparent; border: 1px solid #6c757d; border-radius: 2rem; text-decoration: none;}.row { display: flex; flex-wrap: wrap; } .col-lg-8, .col-lg-4 { padding-left: 3rem; padding-right: 3rem; box-sizing: border-box; } .col-lg-8, .col-lg-4 { width: 100%; }@media (min-width: 992px) { .col-lg-8 { width: 66.6666%; } .col-lg-4 { width: 33.3333%; }}
[data-theme="dark"] body {background:#212121}
[data-theme="dark"] .post-title {color:#ffff}
.sidebar { position: sticky; top: 40px; width: 100%; margin-left: auto; margin-right: 0; padding: 20px; background: var(--card-form-color); border-radius: 8px; margin-top: 11rem; } .recent-posts-sidebar { padding: 20px; border-radius: 8px; } .popular-posts-sidebar { padding: 20px; border-radius: 8px; } .recent-heading { font-size: 1.3rem; margin-bottom: 15px; color: var(--secondary-color); border-bottom: 2px solid var(--primary-color); padding-bottom: 5px; } .popular-heading { font-size: 1.3rem; margin-bottom: 15px; color: #f6b500; border-bottom: 2px solid #f6b500; padding-bottom: 5px; } .recent-posts-list { list-style: none; padding: 0; margin: 0; } .recent-post-item { display: flex; gap: 12px; margin-bottom: 15px; align-items: center; } .recent-post-thumb img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; } .recent-post-content { flex: 1; } .recent-post-title { display: block; font-weight: 600; color: var(--link-color); text-decoration: none; font-size: 0.95rem; margin-bottom: 4px; } .recent-post-title:hover { color: var(--btn-hover-color); } .recent-post-date { font-size: 0.8rem; color: #888; } .no-recent-posts { color: #666; font-size: 0.9rem; } table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-family: Arial, sans-serif; } th { background-color: #4CAF50; color: white; padding: 12px 15px; text-align: left; border: 1px solid #ddd; } td { padding: 10px 15px; border: 1px solid #ddd; } tbody tr:nth-child(even) { background-color: #f2f2f2; } tbody tr:hover { background-color: #ddd; cursor: pointer; } .table-responsive { overflow-x: auto; }
blockquote { margin: 1em 0; padding: 1em 2em; background-color: #f8f8f8; border-left: 5px solid #ccc; font-family: Georgia, serif; font-style: italic; color: #333; line-height: 1.6; position: relative; } blockquote p { margin-bottom: 0.5em; } blockquote cite { display: block; text-align: right; font-style: normal; font-size: 0.9em; color: #666; margin-top: 0.5em; } blockquote::before { content: "\201C"; font-size: 4em; color: #ccc; position: absolute; top: 0; left: 0; line-height: 1; } blockquote::after { content: "\201D"; font-size: 4em; color: #ccc; position: absolute; bottom: 0; right: 0.2em; line-height: 1; }