:root {
    --main-bg: #f2f2f2; /* Light gray instead of dark */
    --secondary-bg: #e5e5e5; /* Slightly darker than background, but lighter than in dark theme */
    --context-bg: #ffffff; /* White for context elements */
    --border-color: #dcdcdc; /* Light gray border */
    --main-color: #333333; /* Dark gray for text, softer than black */
    --secondary-color: #505050; /* Medium gray for secondary text */
    --text-color: #666666; /* Light gray for regular text */
    --text-color-highlight: #888888; /* Even lighter gray for highlighted text */
    --highlight-color: #eb861d; /* #ffab53; /* Warm orange instead of bright red */
    --placeholder: #a0a0a0; /* Standard gray for placeholders */
    --tag-bg: #ededed; /* Light gray tag background */
    --category-bg: #ffd5ff; /* Light version of purple */
    --category-bg2: #a6e6fd; /* Light version of blue */
    --comment-color: #606060; /* Dark gray for comments */
    --comment-border-color: #cccccc; /* Light gray comment border */
    --border-right-color: #ebebeb; /* Light gray for right borders */
    --active-tab-bg: #f0f0f0; /* Light gray for active tabs */
    --reactions-color: #797979; /* Gray for reactions */
    --btn-color: #626262; /* Gray for button text */
    --btn-bgc: #e8e8e8; /* Light gray button background */
    --tab-bdc: #c0c0c0; /* Light gray tab border */
    --tab-color: #454545; /* Gray for tab text */
    --btn-bdc: #bebebe; /* Light gray button border */
    --reactions-color-hover: #505050; /* Dark gray for reaction hover */
    --hr-color: #d6d6d6; /* Light gray horizontal line color */
    --href-color: inherit; /* Gray for links */
    
    /* Code block theme - Light mode */
    --code-block-bg: #f8f8f8;
    --code-block-border: #e1e4e8;
    --code-block-text: #24292e;
    --inline-code-color: #c7254e;
    --inline-code-bg: #f9f2f4;
    --code-lang-bg: rgba(0, 0, 0, 0.05);
    --code-lang-color: #666666;
    --line-number-color: #999999;
    --copy-btn-color: #666666;
    --copy-btn-bg: rgba(255, 255, 255, 0.9);
    --copy-btn-border: rgba(0, 0, 0, 0.1);
    --copy-btn-hover-bg: rgba(255, 255, 255, 1);
    --copy-btn-hover-border: rgba(0, 0, 0, 0.2);
    --copy-btn-success: #28a745;
}


html.dark-mode {
    --main-bg: #1c1c1c;
    --secondary-bg: #282828;
    --context-bg: #282828;
    --border-color: #343434;
    --main-color: #ededed;
    --text-color: #7e7e7e;
    --text-color-highlight: #a0a0a0;
    --highlight-color: #ffcf53;
    --tag-bg: #2e2e2e;
    --reactions-color: #949494;
    --comment-border-color: #343434;
    --border-right-color: #202020;
    --btn-bgc: #131313;
    --btn-bdc: #fff26;
    --btn-color: #586069;
    --tab-bdc: #0000;
    --active-tab-bg: #181818;
    --comment-color: #c0c0c0;
    --tab-color: silver;
    --hr-color: #343434;
    --href-color: hsla(0,0%,100%,.9);
    
    /* Code block theme - Dark mode */
    --code-block-bg: #1e1e1e;
    --code-block-border: rgba(255, 255, 255, 0.1);
    --code-block-text: #d4d4d4;
    --inline-code-color: #f97583;
    --inline-code-bg: rgba(110, 118, 129, 0.2);
    --code-lang-bg: rgba(255, 255, 255, 0.1);
    --code-lang-color: #959da5;
    --line-number-color: #5a5a5a;
    --copy-btn-color: #959da5;
    --copy-btn-bg: rgba(255, 255, 255, 0.1);
    --copy-btn-border: rgba(255, 255, 255, 0.2);
    --copy-btn-hover-bg: rgba(255, 255, 255, 0.15);
    --copy-btn-hover-border: rgba(255, 255, 255, 0.3);
    --copy-btn-success: #4ade80;
}

html.dark-mode * {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*:before,
*:after {
    box-sizing: border-box;
}

html,
body,
div,
span,
object,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
code,
del,
em,
img,
ins,
kbd,
s,
small,
strong,
sub,
sup,
var,
b,
u,
i,
center,
dd,
ol,
ul,
li,
form,
label,
table,
caption,
tbody,
thead,
tr,
th,
td,
article,
aside,
details,
figure,
footer,
header,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
video {
    font: inherit;
    font-size: 100%;

    margin: 0;
    padding: 0;

    vertical-align: baseline;

    border: 0;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figure,
footer,
header,
main,
menu,
nav,
section {
    display: block;
}

/* HTML5 hidden-attribute fix for newer browsers */

*[hidden] {
    display: none;
}

body {
    line-height: 1;
}

menu,
ol,
ul {
    list-style: none;
}

blockquote {
    quotes: none;
}

blockquote:before,
blockquote:after {
    content: '';
    content: none;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

/*---------------
    Main styles
---------------*/

:root {
    --scroll_width: 17px;
}

button {
    font-family: 'Roboto', sans-serif;
}

.clear {
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}

html {
    height: 100%;

    background: var(--main-bg);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font: 400 16px 'Roboto', sans-serif;

    color: var(--main-color);

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-overflow-scrolling: touch;
    text-rendering: optimizeLegibility;
    -webkit-text-decoration-skip: objects;
    text-decoration-skip: objects;
}

body.lock {
    overflow: hidden;
}

.wrap {
    position: relative;

    display: flex;
    overflow: hidden;
    flex-direction: column;

    min-height: 100%;
    padding-bottom: 80px;
}

.main {
    flex: 1 0 auto;
}

.cont {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1rem;
}

.flex {
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-start;
}

::-webkit-input-placeholder {
    color: var(--placeholder);
}

.input {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;

    display: block;

    width: 100%;
    height: 35px;
    padding: .5rem 1.25rem;

    border: none;
    border-radius: 1rem;
    outline-style: none;
    background-color: var(--secondary-bg);
}

h1,
.h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: 500;

    color: var(--main-color);
}

* + h1,
* + .h1 {
    margin-top: 1.1em;
}

h2,
.h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.75rem;

    color: var(--main-color);
}

* + h2,
* + .h2 {
    margin-top: 1.1em;
}

h3,
.h3 {
    font-family: 'Roboto', sans-serif;
    /*font-size: 1.5em;*/
    font-weight: 600;
    line-height: 1.3;

    margin-bottom: .5em;

    color: var(--main-color);
}

* + h3,
* + .h3 {
    margin-top: 1.5em;
}

hr {
    display: block;
    width: 100%;
    height: 1px;
    margin: 40px 0;
    border: none;
    background-color: var(--hr-color);
}


a {
    text-decoration: none;

    color: var(--comment-color);
}

/* Enhanced copy button */
.code-copy-button {
    position: absolute;
    top: 0.75em;
    right: 0.75em;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0.75em;
    font-size: 0.875em;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    opacity: 0;
    color: var(--copy-btn-color);
    background: var(--copy-btn-bg);
    border: 1px solid var(--copy-btn-border);
    border-radius: 6px;
    backdrop-filter: blur(10px);
}

.text-block pre:hover .code-copy-button {
    opacity: 1;
}

.code-copy-button:hover {
    background: var(--copy-btn-hover-bg, rgba(255, 255, 255, 0.15));
    border-color: var(--copy-btn-hover-border, rgba(255, 255, 255, 0.3));
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.code-copy-button:active {
    transform: translateY(0);
    box-shadow: none;
}

.code-copy-button svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: currentColor;
}

.code-copy-button span {
    display: none;
    font-size: 0.875em;
}

.code-copy-button.copied {
    color: var(--copy-btn-success, #4ade80);
    border-color: var(--copy-btn-success, #4ade80);
}

.code-copy-button.copied svg {
    display: none;
}

.code-copy-button.copied span {
    display: block;
}

.text-block {
    color: var(--main-color);
}

.text-block a {
    /*transition: border-color .2s linear;*/
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    overflow-wrap: break-word;
    color: var(--href-color);
    opacity: 0.7;
}

.text-block a:hover {
    border-color: var(--href-color);
    opacity: 1;
}

.text-block b {
    font-weight: bold;
}

.text-block p {
    margin-bottom: 20px;
    line-height: 1.6; /* Improve readability */
}

.text-block blockquote {
    font-style: italic;
    color: var(--comment-color); /* Slightly gray color for quotes */
    margin-bottom: 20px;
    padding-left: 20px;
    border-left: 5px solid var(--highlight-color);
    word-break: break-word; /* Added to prevent overflow */
    overflow-wrap: break-word; /* Added to prevent overflow */
}

.text-block img {
    display: block;
    max-width: 100%;
    margin-bottom: 20px;
    border-radius: 20px;
}

.text-block li img {
    margin-top: 20px;
}

.text-block figure {
    margin-bottom: 20px;
}

.text-block ul {
    margin-bottom: 20px;
    padding-left: 20px; /* Added for indentation */
}

.text-block ul li {
    position: relative;
    list-style-type: disc; /* Use standard discs */
    margin-bottom: 10px; /* Reduce spacing for better compactness */
}

.text-block ol {
    list-style: none;
    padding-left: 30px; /* Added for indentation */
    counter-reset: li;
}

.text-block ol li {
    position: relative;
    margin-bottom: 10px; /* Similar to unordered lists */
}

.text-block ol li:before {
    content: counters(li, '.') '. ';
    counter-increment: li;
    color: var(--main-color); /* Improved number display */
}

.text-block code {
    font-family: 'JetBrains Mono', SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
    font-size: 0.875em;
    padding: 0.125em 0.25em;
    border-radius: 4px;
    color: var(--inline-code-color, #eb5757);
    background: var(--inline-code-bg, rgba(135, 131, 120, .15));
    font-weight: 500;
}

.text-block pre {
    position: relative;
    font-family: 'JetBrains Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 0.875em;
    line-height: 1.6;
    border-radius: 8px;
    overflow: hidden;
    margin: 1.5em 0;
    padding: 0;
    background: var(--code-block-bg, #1e1e1e);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--code-block-border, rgba(255, 255, 255, 0.1));
}

.text-block pre code {
    display: block;
    padding: 1.5em;
    background: transparent;
    color: var(--code-block-text, #d4d4d4);
    font-size: inherit;
    overflow-x: auto;
    font-weight: normal;
}

/* Code block header with language label */
.text-block pre[data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.25em 0.75em;
    background: var(--code-lang-bg, rgba(255, 255, 255, 0.1));
    color: var(--code-lang-color, #a0a0a0);
    font-size: 0.75em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom-left-radius: 4px;
    z-index: 1;
}

/* Line numbers */

.text-block > *:last-child {
    margin-bottom: 0;
}

/* Headers from H1 to H6 */
.text-block h1, .text-block h2, .text-block h3, .text-block h4, .text-block h5, .text-block h6 {
    margin-top: 20px;
    margin-bottom: 10px;
    /*font-weight: bold;*/
}

/*.text-block h1 {*/
/*    font-size: 1.75em; !* Reduced size for h1 *!*/
/*}*/

/*.text-block h2 {*/
/*    font-size: 1.4em; !* Reduced size for h2 *!*/
/*}*/

/*.text-block h3 {*/
/*    font-size: 1.2em; !* Reduced size for h3 *!*/
/*}*/

/*.text-block h4 {*/
/*    font-size: 1.1em; !* Slightly larger for h4 for readability *!*/
/*}*/

/*.text-block h5 {*/
/*    font-size: 1em; !* Slightly larger for h5 *!*/
/*}*/

/*.text-block h6 {*/
/*    font-size: 0.85em; !* Slightly larger for h6 *!*/
/*}*/


/* Horizontal lines (hr) */
.text-block hr {
    border: 0;
    height: 1px;
    background-color: var(--hr-color); /* Use color from your palette */
    margin: 24px 0;
}

/* Support for italic and bold text */
.text-block em {
    font-style: italic;
}

.text-block strong {
    font-weight: bold;
}

/* Additional styles for code elements */
.text-block kbd {
    padding: 0.1em 0.6em;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-bg);
    font-size: 0.87em;
    font-family: monospace;
    border-radius: 3px;
}

/* Highlight style */

/* Additional styles for elements that may appear in Markdown */
.text-block del {
    text-decoration: line-through;
}

.text-block ins {
    text-decoration: underline;
}

/*---------------
   Header
---------------*/

.theme-mode-switcher {
    font-family: 'Noto Color Emoji', sans-serif;
    font-size: 1rem;
    font-style: normal;
    cursor: pointer;
    border: none;
    background: none;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem;
}

.header__search-toggle {
    font-family: 'Noto Color Emoji', sans-serif;
    font-size: 1rem;
    font-style: normal;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0.25rem;
    margin-right: 0.5rem;
}

.header__search-icon {
    display: inline-block;
    transition: transform 0.2s ease;
}

.header__search-toggle:hover .header__search-icon {
    transform: scale(1.1);
}

.theme-mode-switcher__icon {
    display: inline-block;
    line-height: 1;
}

.theme-mode-switcher[data-mode=dark] .theme-mode-switcher__icon.icon-dark {
    display: none;
}

.theme-mode-switcher[data-mode=dark] .theme-mode-switcher__icon.icon-light {
    display: inline-block;
}

.theme-mode-switcher[data-mode=light] .theme-mode-switcher__icon.icon-dark {
    display: inline-block;
}

.theme-mode-switcher[data-mode=light] .theme-mode-switcher__icon.icon-light {
    display: none;
}

.header {
    position: sticky;
    z-index: 30;
    top: 0;

    background-color: var(--main-bg);
    box-shadow: rgba(0, 0, 0, .05) 0 1px 2px 0;
}

.header .cont {
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;

    height: 3rem;
}

.header__nav {
    display: flex;
    align-items: center;

    gap: .75rem;
}

.header__text-logo {
    color: var(--main-color);
}

.header__theme-mode-switcher {
    margin-left: 15px;
}

.header__link {
    margin-left: 1rem;
}

/* Mobile menu toggle */
.header__menu-toggle {
    display: none;
    font-family: 'Noto Color Emoji', sans-serif;
    font-size: 1.1rem;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0.25rem;
    margin-left: 0.5rem;
    color: var(--main-color);
}

.header__menu-icon {
    display: block;
    line-height: 1;
}

/* Mobile menu */
.mobile-menu {
    position: fixed;
    top: 3rem;
    left: 0;
    right: 0;
    background: var(--main-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 50;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.mobile-menu.active {
    max-height: 200px;
    transition: max-height 0.3s ease-in;
}

.mobile-menu__nav {
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-menu__link {
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--main-color);
    border-radius: 8px;
    transition: background-color 0.2s ease;
    font-size: 1rem;
    display: block;
}

.mobile-menu__link:hover {
    background-color: var(--secondary-bg);
}

/* Mobile styles */
@media (max-width: 768px) {
    .header__link--desktop {
        display: none;
    }
    
    .header__menu-toggle {
        display: block;
    }
    
    /* Adjust spacing on mobile */
    .header__search-toggle {
        margin-right: 0.25rem;
    }
    
    .header__theme-mode-switcher {
        margin-left: 0;
    }
}

.content {
    display: grid;

    padding: 2rem 0;

    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
}

.aside {
    height: calc(100vh - 73px);
}

.aside--left {
    position: sticky;
    top: 63px;

    display: none;
    overflow: scroll;

    grid-column: span 2/span 2;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.content-center {
    grid-column: span 12/span 12;
}

.aside--right {
    position: sticky;
    top: 63px;

    display: none;
    overflow: scroll;

    scrollbar-width: none;
    -ms-overflow-style: none;
    grid-column: span 3/span 3;
}

.tags--desktop {
    display: none;
}

.tags__top {
    display: none;

    margin-bottom: .75rem;
    padding: .25rem;
}

.tags__top .icon {
    font-family: 'Noto Color Emoji', sans-serif;
    font-weight: 400;
    font-style: normal;
}

.tags__list {
    display: flex;
    overflow: scroll;

    margin-bottom: 1.5rem;

    gap: .25rem;
    scrollbar-width: none;
}

.tags a {
    font-size: .875rem;
    line-height: 1.25rem;

    display: block;
    flex-shrink: 0;

    margin-top: .25rem;
    margin-bottom: .25rem;
    padding: .25rem 1rem;

    cursor: pointer;

    color: var(--text-color);
    border-radius: .75rem;
}

.tags a[data-active=true] {
    color: var(--main-color);
    background-color: var(--secondary-bg);
}

.tags a:hover {
    background-color: var(--secondary-bg);
}

.search {
    margin-bottom: 1rem;
    transition: all 0.3s ease-in-out;
}

.search.hidden {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-bottom: 0;
}

.search__top {
    margin-bottom: .75rem;
    padding: .25rem;
}

.search__top-icon {
    font-family: 'Noto Color Emoji', sans-serif;
}

.categories {
    position: relative;
}

.categories__wrapper {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;

    display: flex;
    align-items: center;

    margin-top: .5rem;
    margin-bottom: .5rem;

    /*cursor: pointer;*/

    gap: .25rem;
}

.categories__description {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: var(--text-color-highlight);
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
    opacity: 0.9;
}

.categories__content {
    position: absolute;
    z-index: 40;

    display: none;

    padding: .25rem;

    color: var(--text-color);
    border-radius: .75rem;
    background-color: var(--main-bg);
    box-shadow: rgba(0, 0, 0, .1) 0 4px 6px -1px, rgba(0, 0, 0, .06) 0 2px 4px -1px;
}

.categories__content-item {
    font-size: .875rem;
    line-height: 1.25rem;

    padding: .25rem .5rem;

    cursor: pointer;
    white-space: nowrap;

    border-radius: .75rem;
}

.categories__content-item:hover {
    background-color: var(--secondary-bg);
}

.filter {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 1rem;

    border-bottom: 1px solid var(--border-color);
}

.filter__order {
    font-size: .875rem;
    line-height: 1.25rem;

    display: flex;

    gap: .5rem;
}

.filter__order a {
    cursor: pointer;

    color: var(--text-color);
}

.filter__order a[data-active=true] {
    font-weight: 700;

    color: var(--main-color);
}

.category__item {
    font-size: .875rem;
    line-height: 1.25rem;

    width: -moz-fit-content;
    width: fit-content;
    padding: .25rem .5rem;

    cursor: pointer;

    opacity: .9;
    color: var(--secondary-color);
    border-radius: 9999px;
    background-color: var(--category-bg);
}

.category__item--light-blue {
    background-color: var(--category-bg2);
}

.date__item--light-blue {
    background-color: var(--tab-color);
    color: var(--main-bg);
}

.post {
    position: relative;

    display: block;
    overflow: hidden;

    margin-bottom: 1.5rem;

    border-radius: 1rem;
    background-color: var(--context-bg);
    box-shadow: rgba(0, 0, 0, .1) 0 4px 6px -1px, rgba(0, 0, 0, .06) 0 2px 4px -1px;
}

.post:last-child {
    margin-bottom: 0;
}

.post__category {
    position: absolute;
    z-index: 10;
    top: 1rem;
    right: 1rem;
}

.post__date_right {
    position: absolute;
    z-index: 10;
    top: 1rem;
    left: 1rem;
}

.post__thumbnail {
    position: relative;

    width: 100%;
    padding-bottom: 66%;

    background-color: var(--main-bg);
}

.post__thumbnail img {
    position: absolute;

    width: 100%;
    height: 100%;

    color: transparent;

    inset: 0;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: center top;
    filter: brightness(95%);
}

.post__thumbnail img:hover {
    filter: brightness(100%);
}

.post__content {
    padding: 1rem;
}

.post__content[data-thumb=false] {
    padding-top: 3.5rem;
}

.post__title {
    margin-bottom: .5rem;
}

.post__date {
    font-size: .875rem;
    line-height: 1.25rem;

    margin-bottom: 1rem;
}

.post__summary {
    line-height: 2rem;

    display: none;

    margin-bottom: 1rem;

    color: var(--text-color-highlight);
}

.post__tags {
    display: flex;

    gap: .5rem;
}

.post__tag {
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;

    padding: .25rem .5rem;

    cursor: pointer;

    border-radius: 50px;
    background-color: var(--tag-bg);
}

.posts-list {
    display: flex;
    align-content: center;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 2rem;
}

.title {
    padding: .25rem;
}

.title .icon {
    font-family: 'Noto Color Emoji', sans-serif;
    font-weight: 400;
    font-style: normal;
}

.profile__title {
    margin-bottom: .75rem;
}

.profile__content {
    display: flex;
    align-items: center;

    width: 100%;
    margin-bottom: 1rem;
    padding: .5rem;

    border-radius: 1rem;
    background-color: var(--context-bg);

    gap: .5rem;
}

.profile__content-top {
    position: relative;

    flex-shrink: 0;

    width: 90px;
    height: 90px;
}

.profile__content-top img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    transition: opacity 0.3s ease;
}


.profile__content-mid {
    height: -moz-fit-content;
    height: fit-content;
}

.profile__name {
    font-size: 1.25rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1.75rem;
}

.profile__role {
    font-size: .875rem;
    line-height: 1.25rem;

    margin-bottom: .5rem;

    color: var(--text-color-highlight);
}

.profile__text {
    font-size: .875rem;
    line-height: 1.25rem;
}

.box-links {
    display: flex;
    flex-direction: column;

    padding: .25rem;

    border-radius: 1rem;
    background-color: var(--context-bg);
}

.box-links__link {
    display: flex;
    align-items: center;

    padding: .75rem;

    cursor: pointer;

    color: var(--text-color-highlight);
    border-radius: 1rem;

    gap: .75rem;
}

.box-links__link svg {
    font-size: 1.5rem;
    line-height: 2rem;
}

.box-links__link:hover {
    color: var(--main-color);
    background-color: var(--tag-bg);
}

.box-links__link-name {
    font-size: .875rem;
    line-height: 1.25rem;
}

.service__title {
    margin-bottom: .75rem;
}

.service__box-links {
    margin-bottom: 2.25rem;
}

.contact__title {
    margin-bottom: .75rem;
}

.sect404 {
    max-width: 56rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;

    border-radius: 1.5rem;
}

.sect404__wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;

    padding-top: 5rem;
    padding-bottom: 5rem;

    gap: 2.5rem;
}

.sect404__top {
    font-size: 3.75rem;
    line-height: 1;

    display: flex;
    align-items: center;
}

.sect404__top .icon {
    font-family: 'Noto Color Emoji', sans-serif;
    font-weight: 400;
    font-style: normal;
}

.sect404__text {
    font-size: 1.875rem;
    line-height: 2.25rem;

    color: var(--text-color-highlight);
}

.author {
    display: flex;
    align-items: center;

    gap: .5rem;
}

.author__photo {
    position: relative;

    flex-shrink: 0;

    width: 24px;
    height: 24px;
}

.author__photo img {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    min-width: 10px;
    height: 100%;
    min-height: 10px;

    border-radius: 50%;

    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
}

.article {
    font-family: ui-sans-serif, system-ui, apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';

    max-width: 56rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;

    border-radius: 1.5rem;
    background-color: var(--context-bg);
    box-shadow: rgba(0, 0, 0, .1) 0 4px 6px -1px, rgba(0, 0, 0, .06) 0 2px 4px -1px;
}

.article article {
    max-width: 42rem;
    margin: 0 auto;
}

.article h1,
.article .h1 {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.25rem;
}

.article h3,
.article .h3 {
    font-family: ui-sans-serif, system-ui, apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
}

.article-wrap {
    padding: 2rem 0;
}

.article__category {
    margin-bottom: .5rem;
}

.article__nav {
    margin-top: 1.5rem;
    color: var(--text-color-highlight);
}

.article__nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Equal distribution of elements */
    margin-bottom: .75rem;
    gap: .75rem;
}

.article__nav-top > * {
    flex: 1;
    text-align: center;
}

.article__nav-top > *:nth-child(1) {
    text-align: left; /* First element on the left */
}

.article__nav-top > *:nth-child(3) {
    text-align: right; /* Third element on the right */
}

.article__nav-top > *:nth-child(2) {
    text-align: center; /* Second element in the center */
}

.article__date {
    margin-right: .5rem;
}

.article__text-block {
    margin-top: 1.5em;
}


.post-navigation {
    font-weight: 500;

    display: flex;
    justify-content: space-between;

    margin-top: 3em;

    color: var(--text-color);
}

.post-navigation a {
    color: currentColor;
}

.post-navigation a:hover {
    color: var(--main-color);
}

.comments {
    margin: 16px 0;
}

.comment {
    font-size: 14px;

    display: flex;
    align-items: flex-start;

    margin: 16px 0;

    color: var(--comment-color);
}

.comment b,
.comment strong {
    font-weight: 600;
}

.comment a:hover {
    text-decoration: underline;
}

.footer {
    padding-bottom: 2rem;
}

.footer__copy {
    font-size: .875rem;
    line-height: 1.25rem;

    color: var(--text-color);
}

.footer__heart {
    display: inline-block;
    color: #e74c3c;
    animation: heartbeat 1.5s ease-in-out infinite;
    transition: transform 0.2s ease;
}

.footer__copy:hover .footer__heart {
    transform: scale(1.3);
    animation-play-state: paused;
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}

@media screen and (min-width: 544px) {
    .comments {
        padding: 0 4px;
    }
}

@media (min-width: 768px) {
    .search {
        margin-bottom: 2rem;
    }

    .post {
        margin-bottom: 2rem;
    }

    .post__summary {
        display: block;
    }

    .article__date {
        margin-left: 0;
    }
}

@media (min-width: 1024px) {
    .aside--left {
        display: block;
    }

    .content-center {
        grid-column: span 7/span 7;
    }

    .aside--right {
        display: block;
    }

    .tags--mob {
        display: none;
    }

    .tags--desktop {
        display: block;
    }

    .tags__top {
        display: block;
    }

    .tags__list {
        display: block;
    }

    .post__thumbnail {
        padding-bottom: 50%;
    }

    .profile--mob {
        display: none;
    }

    .profile__content {
        display: block;

        margin-bottom: 2.25rem;
        padding: 1rem;
    }

    .profile__content-top {
        width: 100%;
        height: auto;
    }

    .profile__content-top::after {
        display: block;

        padding-bottom: 100%;

        content: '';
    }

    .profile__content-mid {
        display: flex;
        align-items: center;
        flex-direction: column;

        padding: .5rem;
    }

    .profile__role {
        margin-bottom: 1rem;
    }

    .profile__text {
        font-size: 1rem;
        line-height: normal;
    }

    .comments {
        margin-left: -4rem;
    }

    .footer {
        padding-top: 1rem;
        padding-bottom: 0;
    }

    .footer--mob {
        display: none;
    }
}

@media (max-width: 768px) {
    .content {
        display: block;

        padding: .5rem 0;
    }
}

@media (any-hover: hover) {
    .text-block a:hover {
        border-color: transparent;
    }
}

.text-block img {
    cursor: zoom-in;
}

.text-block em {
    font-style: italic;
}

.pagination {
    display: flex;
    justify-content: space-between; /* Elements align with equal spacing between them */
    align-items: center;
    padding: 1rem 0;
    margin: 20px 0;
}

.pagination__link {
    display: block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--main-color);
    background-color: var(--context-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: background-color 0.2s ease-in-out;
}

.pagination__link:hover {
    background-color: var(--highlight-color);
    color: var(--context-bg);
}

.pagination__link.disabled {
    color: var(--btn-color);
    background-color: var(--btn-bgc);
    cursor: default;
}

.pagination__text {
    flex-grow: 1; /* Takes all available space in the middle */
    text-align: center;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    /* Display aside--right only for .contact block */
    .aside--right {
        display: contents; /* Enable display */
        position: relative; /* Change positioning if necessary */
        top: 0; /* Remove top offset */
        margin-top: 0; /* Remove top margin if present */
        margin-bottom: 0; /* Remove bottom margin if present */
    }

    /* Display only .contact block inside .aside--right */
    .aside--right > *:not(.contact) {
        display: none; /* Hide all elements except .contact */
    }

    /* Additional styles for .contact block */
    .contact {
        padding: 10px;
        background-color: var(--context-bg); /* Use background color variable */
        border-radius: 8px; /* Round corners */
    }
    .footer__copy {
        text-align: center;
    }
}

.no-posts {
    color: var(--text-color);
    font-weight: 300;
    font-style: italic;
}

.no-posts:after {
    content: '...';
}


/* Scrollable table wrapper */

/* Table styles */
table {
    width: 100%; /* Full-width tables */
    margin-top: 20px; /* Space above the table */
    margin-bottom: 20px; /* Space below the table */
    background-color: var(--context-bg); /* Background color for readability */
    border-collapse: separate; /* Separate borders for better rounding */
    border-spacing: 0; /* No extra spacing between cells */
    text-align: left; /* Aligns text to the left */
    border-radius: 10px; /* Rounded corners for the table */
    overflow: hidden; /* Ensure content fits within the rounded corners */
    word-break: break-word; /* Prevents overflow of text */
}

th,
td {
    padding: 12px; /* Padding inside cells */
    border: 1px solid var(--border-color); /* Border color from your palette */
    text-align: left; /* Ensures text is left-aligned */
    vertical-align: top; /* Aligns content to the top of the cell */
    word-break: break-word; /* Prevents overflow of text */
}

th {
    background-color: var(--secondary-bg); /* Background for headers for distinction */
    color: var(--main-color); /* Text color for headers */
    font-weight: bold; /* Makes header text bold */
}

tr:nth-child(odd) {
    background-color: var(--tag-bg); /* Alternating row background */
}

tr:hover {
    /*background-color: var(--highlight-color); !* Row hover background *!*/
    /*color: var(--main-color); !* Text color on hover *!*/
}

/* Specific link styles within table cells */
tr td a {
    color: var(--comment-color); /* Link color */
    text-decoration: none; /* No underline for links */
}

tr:hover td a {
    color: var(--main-color); /* Link color on hover */
    text-decoration: none; /* Still no underline on hover */
}

.text-block tr td a {
    text-decoration: none;
    border-bottom: none !important;
    color: var(--highlight-color);
}

caption {
    margin-top: 10px; /* Space above the caption */
    margin-bottom: 5px; /* Larger text for emphasis */
    text-align: center; /* Centers caption text */
    color: var(--main-color); /* Text color */
}

/* Sticky priority column */

/* Scrollable table on smaller screens */
@media (max-width: 768px) {
    th,
    td {
        padding: 8px; /* Smaller padding in smaller screens */
    }

    table {
        display: block;
        overflow-x: auto; /* Enables horizontal scrolling */
    }
}



/*.private-content {*/
/*    display: none;*/
/*}*/

/* Highlight.js theme - Theme-aware */
.hljs {
    color: var(--code-block-text);
    background: transparent;
}

/* Ensure code blocks use appropriate theme colors */
.text-block pre {
    background: var(--code-block-bg) !important;
}

.text-block pre code {
    color: var(--code-block-text) !important;
}

/* Dark mode syntax highlighting (default) */
html.dark-mode .hljs-comment,
html.dark-mode .hljs-quote {
    color: #608b4e;
    font-style: italic;
}

html.dark-mode .hljs-keyword,
html.dark-mode .hljs-selector-tag,
html.dark-mode .hljs-built_in,
html.dark-mode .hljs-name,
html.dark-mode .hljs-tag {
    color: #569cd6;
}

html.dark-mode .hljs-string,
html.dark-mode .hljs-title,
html.dark-mode .hljs-section,
html.dark-mode .hljs-attribute,
html.dark-mode .hljs-literal,
html.dark-mode .hljs-template-tag,
html.dark-mode .hljs-template-variable,
html.dark-mode .hljs-type,
html.dark-mode .hljs-addition {
    color: #ce9178;
}

html.dark-mode .hljs-deletion,
html.dark-mode .hljs-selector-attr,
html.dark-mode .hljs-selector-pseudo,
html.dark-mode .hljs-meta {
    color: #d16969;
}

html.dark-mode .hljs-doctag {
    color: #608b4e;
}

html.dark-mode .hljs-attr {
    color: #9cdcfe;
}

html.dark-mode .hljs-symbol,
html.dark-mode .hljs-bullet,
html.dark-mode .hljs-link {
    color: #569cd6;
}

html.dark-mode .hljs-emphasis {
    font-style: italic;
}

html.dark-mode .hljs-strong {
    font-weight: bold;
}

/* Language specific - Dark mode */
html.dark-mode .hljs-function {
    color: #dcdcaa;
}

html.dark-mode .hljs-class {
    color: #4ec9b0;
}

html.dark-mode .hljs-number {
    color: #b5cea8;
}

html.dark-mode .hljs-regexp {
    color: #d16969;
}

html.dark-mode .hljs-variable,
html.dark-mode .hljs-params {
    color: #9cdcfe;
}

/* Light mode overrides - Vibrant theme */
html:not(.dark-mode) .hljs-comment,
html:not(.dark-mode) .hljs-quote {
    color: #008000;
    font-style: italic;
}

html:not(.dark-mode) .hljs-keyword,
html:not(.dark-mode) .hljs-selector-tag,
html:not(.dark-mode) .hljs-built_in,
html:not(.dark-mode) .hljs-name,
html:not(.dark-mode) .hljs-tag {
    color: #0000ff;
    font-weight: 600;
}

html:not(.dark-mode) .hljs-string,
html:not(.dark-mode) .hljs-title,
html:not(.dark-mode) .hljs-section,
html:not(.dark-mode) .hljs-attribute,
html:not(.dark-mode) .hljs-literal,
html:not(.dark-mode) .hljs-template-tag,
html:not(.dark-mode) .hljs-template-variable,
html:not(.dark-mode) .hljs-type,
html:not(.dark-mode) .hljs-addition {
    color: #a31515;
}

html:not(.dark-mode) .hljs-deletion,
html:not(.dark-mode) .hljs-selector-attr,
html:not(.dark-mode) .hljs-selector-pseudo,
html:not(.dark-mode) .hljs-meta {
    color: #bc2020;
}

html:not(.dark-mode) .hljs-attr {
    color: #ff0000;
}

html:not(.dark-mode) .hljs-function {
    color: #795e26;
    font-weight: 600;
}

html:not(.dark-mode) .hljs-class {
    color: #267f99;
    font-weight: 600;
}

html:not(.dark-mode) .hljs-number {
    color: #098658;
}

html:not(.dark-mode) .hljs-variable,
html:not(.dark-mode) .hljs-params {
    color: #001080;
}

/* Scrollbar styling for code blocks */
.text-block pre code::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.text-block pre code::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.text-block pre code::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.text-block pre code::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Firefox scrollbar */
.text-block pre code {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}