/* menu */
@media only screen and (max-width: 850px) {
  .site-name {
    display: initial;
  }
}

/* header */
.post-date, .post-tags, .post-author { 
	color: color-mix(in srgb,var(--font-color) 70%,transparent);
	}

.post-reading-time {
	color: color-mix(in srgb,var(--font-color) 50%,transparent); 
	}

/* body */

body, body p {
	color: color-mix(in srgb,var(--font-color) 90%,transparent);
	}

.post h2 {
	display: inline-block; /* Ensures underline matches text width */
	color: var(--font-color);
	border-bottom: 3px solid var(--font-color); /* Adjust thickness and color */
	padding-bottom: 5px; /* Adds spacing between text and underline */
	margin-bottom: 20px;
	}

.post h2.date {
	border: none;
	}

.post h3 {
	margin-top: 10px;
	display: block;
	width: max-content;  /* Makes the block only as wide as the text */
	border-bottom: 1px solid var(--font-color); /* Adjust thickness and color */
	padding-bottom: 5px; /* Adds spacing between text and underline */
	}

ol, ul {
	margin-top: -20px;
	}

.table-of-contents {
	margin-bottom: 30px;
	padding: 20px 0 0;
	}

.table-of-contents h2 {
	margin-bottom: 30px;
	}

.table-of-contents nav {
	}

/* code aesthetics */
pre {
	background-color: var(--background-color) !important;
	}

.highlight pre, .highlight code {
	border-color: color-mix(in srgb,var(--primary-color) 35%,transparent);
	}

:not(.highlight) .post-description code, .terminal p code, .terminal li code, .terminal h2 code, .terminal h3 code {
	background-color: color-mix(in srgb,var(--primary-color) 35%,transparent);
	padding: 0 10px; 
	}
	
:not(.highlight) code::before, code::after {
	content: none;
	}

/* for chat */
img {
	width: initial !important;
	max-width: 100%;
	}

/* for index */
.post img {
	width: 100% !important;
	}
