/* Markdown */
:root {
  --maincolor: rgb(13, 180, 150);
  --secondarycolor: #8a4fff;
  --bordercl: rebeccapurple;
  --calloutcolor: dodgerblue;
  --hovercolor: #3f51b5;
  --darkMaincolor: #42d66b;
  --darkSecondarycolor: #bd93f9;
  --linkUnderline: #cccccc;
  --scroll-progress: 0%;
  --toc-bg: #f8f8f8;
  --toc-border: #e0e0e0;
  
  /* Layout variables */
  --content-max-width: 850px;
  --heading-spacing: 2.5em;
  --paragraph-spacing: 1.6em;

  /* Search variables */
  --background: #ffffff;
  --color: #232333;
  --border-color: #ddd;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --hover-background: rgba(0, 0, 0, 0.05);
  --secondary-color: #666;
  --highlight-background: rgba(255, 255, 0, 0.2);
  --highlight-color: inherit;
  --maincolor-alpha: rgba(13, 180, 150, 0.1);
}

[data-theme="dark"] {
  --background: #1a1a1a;
  --color: #ffffff;
  --border-color: #444;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --hover-background: rgba(255, 255, 255, 0.05);
  --secondary-color: #aaa;
  --highlight-background: rgba(255, 255, 255, 0.1);
  --highlight-color: inherit;
  --maincolor-alpha: rgba(66, 214, 107, 0.15);
}

/* Scroll Progress Indicator */
.scroll-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 1000;
  pointer-events: none;
}

.scroll-progress-indicator {
  height: 100%;
  width: var(--scroll-progress);
  background-image: linear-gradient(to right, transparent 50%, var(--maincolor) 50%);
  background-size: 10px 100%;
  transition: width 0.1s ease-out;
}

html {
  color: #232333;
  /* Primary font with fallbacks */
  font-family: 'Monaspace Neon', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 15px;
  line-height: 1.6em;
  font-weight: 300;
  font-feature-settings: 'cv02', 'liga', 'dlig', 'calt', 'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08', 'ss09', 'ss10', 'cv62', 'case';
}

body {
  display: block;
  margin: 8px;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@keyframes intro {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.content {
  animation: intro 0.3s both;
  animation-delay: 0.15s;
}

/* Links with improved styling */
a {
  color: inherit;
  text-decoration: none; 
  border-bottom: 2px solid var(--linkUnderline);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  padding: 0 2px;
}

/* Style for hover state with subtle background color */
a:hover {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--secondarycolor);
  background-color: rgba(138, 79, 255, 0.07);
}

/* Style for active (clicked) hyperlinks */
a:active {
  color: #cccccc;
  text-decoration: none;
}

/* Style for focus state for accessibility */
a:focus {
  outline: 2px solid var(--secondarycolor);
  outline-offset: 2px;
}


/*****/
/* Links */
/* a {
  border-bottom: 2px solid var(--linkUnderline);
  color: inherit;
  text-decoration: none;
}

a:hover {
  background-color: var(--hovercolor);
  color: #fff;
} */

/* End added */

::selection {
  background: var(--maincolor);
  color: #fff;
}

p {
  /* font-family: 'Fira Sans', sans-serif; */
  line-height: 1.5;
}

hr {
  border: 0;
  border-top: 3px dotted var(--bordercl);
  margin: 1em 0;
}

blockquote {
  border-left: 3px solid var(--bordercl);
  color: #737373;
  margin: 0.5em 0 1.5em 0;
  padding: 0.5em 0 0.5em 1em;
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 0 3px 3px 0;
}



ul {
  list-style: none;
  padding-left: 2ch;
}

ul li {
  text-indent: -2ch;
}

ul > li::before {
  content: "* ";
  font-weight: bold;
}

/* Images */
img {
  border: 3px solid #ececec;
  max-width: 100%;
}

figure {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  max-width: 100%;
}

figure img {
  max-height: 500px;
}

@media screen and (min-width: 600px) {
  figure {
    padding: 0 40px;
  }
}

figure h4 {
  font-size: 1rem;
  margin: 0;
  margin-bottom: 1em;
}

figure h4::before {
  content: "↳ ";
}

/* Code blocks */
code {
  background-color: #f1f1f1;
  padding: 0.1em 0.2em;
}

pre {
  background-color: #f3f3f3;
  line-height: 1.4;
  overflow-x: auto;
  padding: 1em;
  border-radius: 3px;
  margin: 1.5em 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.highlight pre ::selection {
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
}

pre code {
  background-color: transparent;
  color: inherit;
  font-size: 100%;
  padding: 0;
}

/* Containers */
.content {
  margin-bottom: 4em;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--content-max-width);
  padding: 0 2ch;
  word-wrap: break-word;
}

/* Header */
header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1em 0;
}

header .main {
  font-size: 1.5rem;
}

/* Header differentiation by size */
h1 {
  font-size: 1.7rem;
  margin-top: var(--heading-spacing);
  margin-bottom: 1em;
}

h2 {
  font-size: 1.5rem;
  margin-top: var(--heading-spacing);
  margin-bottom: 0.9em;
}

h3 {
  font-size: 1.3rem;
  margin-top: var(--heading-spacing);
  margin-bottom: 0.8em;
}

h4 {
  font-size: 1.2rem;
  margin-top: 2em;
  margin-bottom: 0.7em;
}

h5 {
  font-size: 1.1rem;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
}

h6 {
  font-size: 1rem;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

h1::before {
  color: var(--maincolor);
  content: "# ";
  font-weight: bold;
}

h2::before {
  color: var(--maincolor);
  content: "## ";
  font-weight: bold;
}

h3::before {
  color: var(--maincolor);
  content: "### ";
}

h4::before {
  color: var(--maincolor);
  content: "#### ";
}

h5::before {
  color: var(--maincolor);
  content: "##### ";
}

h6::before {
  color: var(--maincolor);
  content: "###### ";
}

.meta {
  color: #999;
  letter-spacing: -0.5px;
}

/* Footer */
footer {
  display: flex;
  align-items: center;
  border-top: 0.4rem dotted var(--bordercl);
  padding: 2rem 0rem;
  margin-top: 2rem;
}

.soc {
  display: flex;
  align-items: center;
  padding-right: 1rem;
  margin-right: 1rem;
  border-right: 2px solid;
  border-bottom: none;
}

.footer-info {
  padding: var(--footer-padding);
}

#main_title {
  margin-bottom: 10px;
}

/* Common */
.title h1 {
  margin-bottom: 0;
}

time {
  color: grey;
}

span {
  color: grey;
}

/* Posts */
article .title {
  margin-bottom: 1em;
}

/* Callout */
.callout {
  background-color: var(--calloutcolor);
  color: #fff;
  padding: 1em;
  border-radius: 3px;
  margin: 1.5em 0;
}

.callout p {
  /* font-family: 'IBM Plex Mono', monospace; */
  margin: 0;
}

.callout a {
  border-bottom: 3px solid #fff;
}

.callout a:hover {
  background-color: #fff;
  color: var(--calloutcolor);
}

.site-description {
  display: flex;
  justify-content: space-between;
}

.tags li::before {
  content: "🏷 ";
}

.tags a {
  border-bottom: 2px solid var(--maincolor);
}

.tags a:hover {
  color: white;
  background-color: var(--hovercolor);
}

svg {
  max-height: 15px;
}

.soc:hover {
  color: white;
}

.draft-label {
  color: var(--bordercl);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
  margin-left: 6px;
  background-color: #f9f2f4;
}

pre {
  font-family: "Roboto Mono", monospace;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

pre code[class*="language-"] {
  -webkit-overflow-scrolling: touch;
}

pre code[class*="language-"]::before {
  background: black;
  border-radius: 0 0 0.25rem 0.25rem;
  color: white;
  font-size: 12px;
  letter-spacing: 0.025rem;
  padding: 0.1rem 0.5rem;
  position: absolute;
  right: 1rem;
  text-align: right;
  text-transform: uppercase;
  top: 0;
}

pre code[class="language-javaScript"]::before,
pre code[class="language-js"]::before {
  content: "js";
  background: #f7df1e;
  color: black;
}

pre code[class="language-typescript"]::before,
pre code[class="language-ts"]::before {
  content: "ts";
  background: dodgerblue;
  color: black;
}

pre code[class*="language-yml"]::before,
pre code[class*="language-yaml"]::before {
  content: "yaml";
  background: #f71e6a;
  color: white;
}

pre code[class*="language-shell"]::before,
pre code[class*="language-bash"]::before,
pre code[class*="language-sh"]::before {
  content: "shell";
  background: green;
  color: white;
}

pre code[class*="language-json"]::before {
  content: "json";
  background: dodgerblue;
  color: #000000;
}

pre code[class*="language-python"]::before,
pre code[class*="language-py"]::before {
  content: "py";
  background: blue;
  color: yellow;
}

pre code[class*="language-css"]::before {
  content: "css";
  background: cyan;
  color: black;
}

pre code[class*="language-go"]::before {
  content: "Go";
  background: cyan;
  color: royalblue;
}

pre code[class*="language-md"]::before,
pre code[class*="language-md"]::before {
  content: "Markdown";
  background: royalblue;
  color: whitesmoke;
}

pre code[class*="language-rust"]::before,
pre code[class*="language-rs"]::before {
  content: "rust";
  background: #fff8f6;
  color: #ff4647;
}

pre code[class*="language-cpp"]::before,
pre code[class*="language-c++"]::before {
  content: "cpp";
  background: #5e97d0;
  color: #044f88;
}

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

table th {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
  font-size: large;
}

table td {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

.footnote-definition {
  display: flex;
  align-items: center;
  grid-column-gap: 10px;
}

/* Table of Contents Styles */
.toc-container {
  background-color: var(--toc-bg);
  border: 1px solid var(--toc-border);
  border-radius: 4px;
  margin: 1.5em 0;
  padding: 0;
  overflow: hidden;
}

.toc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75em 1em;
  cursor: pointer;
  border-bottom: 1px solid var(--toc-border);
  transition: background-color 0.2s ease;
}

.toc-header:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.toc-title {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
}

.toc-title::before {
  content: none;
}

.toc-toggle-icon {
  font-size: 0.8em;
  color: var(--maincolor);
  transition: transform 0.3s ease;
}

.toc-content {
  padding: 0.5em 1em;
  max-height: 500px;
  overflow-y: auto;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.toc-content.collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.toc-list {
  margin: 0;
  padding-left: 0.5em;
  list-style: none;
}

.toc-list li {
  margin: 0.5em 0;
  text-indent: 0;
}

.toc-list li::before {
  content: "";
}

.toc-list ul {
  padding-left: 1.5em;
  list-style: none;
}

.toc-hash {
  color: var(--maincolor);
  font-weight: bold;
  margin-right: 0.3em;
}

.toc-item.toc-h2 .toc-hash {
  color: var(--secondarycolor);
}

.toc-item.toc-h3 .toc-hash {
  opacity: 0.8;
}

.toc-list a {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
  display: inline-block;
  line-height: 1.3;
}

.toc-list a:hover {
  border-bottom-color: var(--maincolor);
}