/* Markdown */
:root{
--maincolor: red;
--bordercl:rebeccapurple;
--callouctcolor:dodgerblue;
--hovercolor:navy;
--darkMaincolor: #50fa7b;
}
html {
  color: #232333;
  font-family: 'Roboto Mono', monospace;
  font-size: 15px;
  line-height: 1.6em;
}
body{
  display: block;
  margin: 8px;
}
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

::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;
  padding-left: 1em;
}

a {
  border-bottom: 3px solid var(--maincolor);
  color: inherit;
  text-decoration: none;
}
a:hover {
    background-color: var(--hovercolor);
    color: #fff;
}

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: .1em .2em;
}

pre {
  background-color: #ececec;
  line-height: 1.4;
  overflow-x: auto;
  padding: 1em;
}

.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: 800px;
  padding: 0 1ch;
  word-wrap: break-word;
}

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

header .main {
  font-size: 1.5rem;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 1.2rem;
  margin-top: 2em;
}

h1::before { color: var(--maincolor); content: '# '; }
h2::before { color: var(--maincolor); content: '## '; }
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;
  border-bottom: none;
}
.border {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  border: 1px solid;
}
.footer-info {
  padding: var(--footer-padding);
}

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

time {
  color: grey;
}

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


/* Callout */
.callout {
  background-color: var(--callouctcolor);
  color: #fff;
  padding: 1em;
}

.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(--callouctcolor);
}

.site-description {
display: flex;
justify-content: space-between;
}
.tags li::before{
  content: "🏷 ";
}
.tags a{
  border-bottom: 3px 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;
}
.highlight {
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.highlight pre code[class*="language-"] {
  -webkit-overflow-scrolling: touch;
}
.highlight 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;
}

.highlight pre code[class=language-javaScript]::before,
.highlight pre code[class="language-js"]::before {
content: "js";
background: #f7df1e;
color: black;
}
.highlight pre code[class*='language-yml']::before,
.highlight pre code[class*='language-yaml']::before {
content: 'yaml';
background: #f71e6a;
color: white;
}
.highlight pre code[class*='language-shell']::before,
.highlight pre code[class*='language-bash']::before,
.highlight pre code[class*='language-sh']::before {
content: 'shell';
background: green;
color:white
}
.highlight pre code[class*='language-json']::before{
content: 'json';
background: dodgerblue;
 color: #000000
}
.highlight pre code[class*='language-python']::before,
.highlight pre code[class*='language-py']::before {
content: 'py';
background: blue;
color: yellow ;
}
.highlight pre code[class*='language-css']::before{
content: 'css';
background: cyan;
color: black ;
}
.highlight pre code[class*='language-go']::before{
content: 'Go';
background: cyan;
color: royalblue ;
}
.highlight pre code[class*='language-md']::before,
.highlight pre code[class*='language-md']::before{
content: 'Markdown';
background: royalblue;
color: whitesmoke ;
}

/* 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;
}
/* Markdown */
:root {
    font-family: "Iosevka Aile";
    --bg-main: #fbf7f0;
    --bg-dim: #efe9dd;
    --fg-main: #000000;
    --fg-dim: #595959;
    --fg-alt: #193668;
    --bg-active: #c9b9b0;
    --bg-inactive: #dfd5cf;
    --border: #9f9690;
    --red: #a60000;
    --red-warmer: #972500;
    --red-cooler: #a0132f;
    --red-faint: #7f0000;
    --red-intense: #d00000;
    --green: #006800;
    --green-warmer: #316500;
    --green-cooler: #00663f;
    --green-faint: #2a5045;
    --green-intense: #008900;
    --yellow: #6f5500;
    --yellow-warmer: #884900;
    --yellow-cooler: #7a4f2f;
    --yellow-faint: #624416;
    --yellow-intense: #808000;
    --blue: #0031a9;
    --blue-warmer: #3548cf;
    --blue-cooler: #0000b0;
    --blue-faint: #003497;
    --blue-intense: #0000ff;
    --magenta: #721045;
    --magenta-warmer: #8f0075;
    --magenta-cooler: #531ab6;
    --magenta-faint: #7c318f;
    --magenta-intense: #dd22dd;
    --cyan: #005e8b;
    --cyan-warmer: #3f578f;
    --cyan-cooler: #005f5f;
    --cyan-faint: #005077;
    --cyan-intense: #008899;
    --rust: #8a290f;
    --gold: #80601f;
    --olive: #56692d;
    --slate: #2f3f83;
    --indigo: #4a3a8a;
    --maroon: #731c52;
    --pink: #7b435c;
    --bg-red-intense: #ff8f88;
    --bg-green-intense: #8adf80;
    --bg-yellow-intense: #f3d000;
    --bg-blue-intense: #bfc9ff;
    --bg-magenta-intense: #dfa0f0;
    --bg-cyan-intense: #a4d5f9;
    --bg-red-subtle: #ffcfbf;
    --bg-green-subtle: #b3fabf;
    --bg-yellow-subtle: #fff576;
    --bg-blue-subtle: #ccdfff;
    --bg-magenta-subtle: #ffddff;
    --bg-cyan-subtle: #bfefff;
    --bg-red-nuanced: #ffe8e8;
    --bg-green-nuanced: #e0f6e0;
    --bg-yellow-nuanced: #f8f0d0;
    --bg-blue-nuanced: #ecedff;
    --bg-magenta-nuanced: #f8e6f5;
    --bg-cyan-nuanced: #e0f2fa;
    --bg-clay: #f1c8b5;
    --fg-clay: #63192a;
    --bg-ochre: #f0e3c0;
    --fg-ochre: #573a30;
    --bg-lavender: #dfcdfa;
    --fg-lavender: #443379;
    --bg-sage: #c0e7d4;
    --fg-sage: #124b41;
    --bg-graph-red-0: #ef7969;
    --bg-graph-red-1: #ffaab4;
    --bg-graph-green-0: #45c050;
    --bg-graph-green-1: #75ef30;
    --bg-graph-yellow-0: #ffcf00;
    --bg-graph-yellow-1: #f9ff00;
    --bg-graph-blue-0: #7f90ff;
    --bg-graph-blue-1: #a6c0ff;
    --bg-graph-magenta-0: #e07fff;
    --bg-graph-magenta-1: #fad0ff;
    --bg-graph-cyan-0: #70d3f0;
    --bg-graph-cyan-1: #afefff;
    --bg-completion: #f0c1cf;
    --bg-hover: #b2e4dc;
    --bg-hover-secondary: #f5d0a0;
    --bg-hl-line: #f1d5d0;
    --bg-region: #c2bcb5;
    --fg-region: #000000;
    --bg-char-0: #7feaff;
    --bg-char-1: #ffaaff;
    --bg-char-2: #dff000;
    --bg-mode-line-active: #cab9b2;
    --fg-mode-line-active: #000000;
    --border-mode-line-active: #545454;
    --bg-mode-line-inactive: #dfd9cf;
    --fg-mode-line-inactive: #585858;
    --border-mode-line-inactive: #a59a94;
    --modeline-err: #7f0000;
    --modeline-warning: #5f0070;
    --modeline-info: #002580;
    --bg-tab-bar: #e0d4ce;
    --bg-tab-current: #fbf7f0;
    --bg-tab-other: #c8b8b2;
    --bg-added: #c3ebc1;
    --bg-added-faint: #dcf8d1;
    --bg-added-refine: #acd6a5;
    --bg-added-fringe: #6cc06c;
    --fg-added: #005000;
    --fg-added-intense: #006700;
    --bg-changed: #ffdfa9;
    --bg-changed-faint: #ffefbf;
    --bg-changed-refine: #fac090;
    --bg-changed-fringe: #c0b200;
    --fg-changed: #553d00;
    --fg-changed-intense: #655000;
    --bg-removed: #f4d0cf;
    --bg-removed-faint: #ffe9e5;
    --bg-removed-refine: #f3b5a7;
    --bg-removed-fringe: #d84a4f;
    --fg-removed: #8f1313;
    --fg-removed-intense: #aa2222;
    --bg-diff-context: #efe9df;
    --bg-paren-match: #7fdfcf;
    --fg-paren-match: #000000;
    --bg-paren-expression: #efd3f5;
    --underline-paren-match: #ffffff;
    --fringe: #efe9dd;
    --cursor: #d00000;
    --keybind: #a60000;
    --name: #721045;
    --identifier: #7a4f2f;
    --err: #a60000;
    --warning: #884900;
    --info: #005f5f;
    --underline-err: #d00000;
    --underline-warning: #808000;
    --underline-note: #008899;
    --bg-prominent-err: #ff8f88;
    --fg-prominent-err: #000000;
    --bg-prominent-warning: #f3d000;
    --fg-prominent-warning: #000000;
    --bg-prominent-note: #a4d5f9;
    --fg-prominent-note: #000000;
    --bg-active-argument: #f8f0d0;
    --fg-active-argument: #884900;
    --bg-active-value: #e0f2fa;
    --fg-active-value: #3f578f;
    --builtin: #8f0075;
    --comment: #7f0000;
    --constant: #0000b0;
    --docstring: #2a5045;
    --docmarkup: #7c318f;
    --fnname: #721045;
    --keyword: #531ab6;
    --preprocessor: #a0132f;
    --string: #3548cf;
    --type: #005f5f;
    --variable: #005e8b;
    --rx-construct: #00663f;
    --rx-backslash: #721045;
    --accent-0: #0031a9;
    --accent-1: #8f0075;
    --accent-2: #005e8b;
    --accent-3: #a60000;
    --fg-button-active: #000000;
    --fg-button-inactive: #595959;
    --bg-button-active: #c9b9b0;
    --bg-button-inactive: #efe9dd;
    --fg-completion-match-0: #0031a9;
    --fg-completion-match-1: #8f0075;
    --fg-completion-match-2: #005e8b;
    --fg-completion-match-3: #a60000;
    --bg-completion-match-0: #ffffff;
    --bg-completion-match-1: #ffffff;
    --bg-completion-match-2: #ffffff;
    --bg-completion-match-3: #ffffff;
    --date-common: #005e8b;
    --date-deadline: #a60000;
    --date-event: #193668;
    --date-holiday: #a0132f;
    --date-holiday-other: #0031a9;
    --date-now: #000000;
    --date-range: #193668;
    --date-scheduled: #884900;
    --date-weekday: #005e8b;
    --date-weekend: #7f0000;
    --fg-line-number-inactive: #595959;
    --fg-line-number-active: #000000;
    --bg-line-number-inactive: #efe9dd;
    --bg-line-number-active: #c9b9b0;
    --fg-link: #3548cf;
    --bg-link: #ffffff;
    --underline-link: #3548cf;
    --fg-link-symbolic: #005e8b;
    --bg-link-symbolic: #ffffff;
    --underline-link-symbolic: #005e8b;
    --fg-link-visited: #721045;
    --bg-link-visited: #ffffff;
    --underline-link-visited: #721045;
    --mail-cite-0: #003497;
    --mail-cite-1: #884900;
    --mail-cite-2: #005f5f;
    --mail-cite-3: #a0132f;
    --mail-part: #005e8b;
    --mail-recipient: #531ab6;
    --mail-subject: #8f0075;
    --mail-other: #7c318f;
    --bg-mark-delete: #ffcfbf;
    --fg-mark-delete: #a60000;
    --bg-mark-select: #bfefff;
    --fg-mark-select: #005e8b;
    --bg-mark-other: #fff576;
    --fg-mark-other: #6f5500;
    --fg-prompt: #005f5f;
    --bg-prompt: #ffffff;
    --bg-prose-block-delimiter: #efe9dd;
    --fg-prose-block-delimiter: #595959;
    --bg-prose-block-contents: #efe9dd;
    --bg-prose-code: #ffffff;
    --fg-prose-code: #005f5f;
    --bg-prose-macro: #ffffff;
    --fg-prose-macro: #531ab6;
    --bg-prose-verbatim: #ffffff;
    --fg-prose-verbatim: #8f0075;
    --prose-done: #006800;
    --prose-todo: #a60000;
    --prose-metadata: #595959;
    --prose-metadata-value: #193668;
    --prose-table: #193668;
    --prose-table-formula: #8f0075;
    --prose-tag: #7c318f;
    --rainbow-0: #000000;
    --rainbow-1: #dd22dd;
    --rainbow-2: #008899;
    --rainbow-3: #972500;
    --rainbow-4: #808000;
    --rainbow-5: #531ab6;
    --rainbow-6: #008900;
    --rainbow-7: #3548cf;
    --rainbow-8: #8f0075;
    --bg-search-current: #f3d000;
    --bg-search-lazy: #a4d5f9;
    --bg-search-replace: #ff8f88;
    --bg-search-rx-group-0: #bfc9ff;
    --bg-search-rx-group-1: #8adf80;
    --bg-search-rx-group-2: #ffcfbf;
    --bg-search-rx-group-3: #ffddff;
    --bg-space: #ffffff;
    --fg-space: #9f9690;
    --bg-space-err: #ff8f88;
    --bg-term-black: #000000;
    --fg-term-black: #000000;
    --bg-term-black-bright: #595959;
    --fg-term-black-bright: #595959;
    --bg-term-red: #a60000;
    --fg-term-red: #a60000;
    --bg-term-red-bright: #972500;
    --fg-term-red-bright: #972500;
    --bg-term-green: #006800;
    --fg-term-green: #006800;
    --bg-term-green-bright: #00663f;
    --fg-term-green-bright: #00663f;
    --bg-term-yellow: #6f5500;
    --fg-term-yellow: #6f5500;
    --bg-term-yellow-bright: #884900;
    --fg-term-yellow-bright: #884900;
    --bg-term-blue: #0031a9;
    --fg-term-blue: #0031a9;
    --bg-term-blue-bright: #3548cf;
    --fg-term-blue-bright: #3548cf;
    --bg-term-magenta: #721045;
    --fg-term-magenta: #721045;
    --bg-term-magenta-bright: #531ab6;
    --fg-term-magenta-bright: #531ab6;
    --bg-term-cyan: #005e8b;
    --fg-term-cyan: #005e8b;
    --bg-term-cyan-bright: #005f5f;
    --fg-term-cyan-bright: #005f5f;
    --bg-term-white: #a6a6a6;
    --fg-term-white: #a6a6a6;
    --bg-term-white-bright: #ffffff;
    --fg-term-white-bright: #ffffff;
    --fg-heading-0: #005f5f;
    --fg-heading-1: #000000;
    --fg-heading-2: #624416;
    --fg-heading-3: #193668;
    --fg-heading-4: #721045;
    --fg-heading-5: #2a5045;
    --fg-heading-6: #7f0000;
    --fg-heading-7: #3f578f;
    --fg-heading-8: #595959;
    --bg-heading-0: #ffffff;
    --bg-heading-1: #ffffff;
    --bg-heading-2: #ffffff;
    --bg-heading-3: #ffffff;
    --bg-heading-4: #ffffff;
    --bg-heading-5: #ffffff;
    --bg-heading-6: #ffffff;
    --bg-heading-7: #ffffff;
    --bg-heading-8: #ffffff;
    --overline-heading-0: #ffffff;
    --overline-heading-1: #ffffff;
    --overline-heading-2: #ffffff;
    --overline-heading-3: #ffffff;
    --overline-heading-4: #ffffff;
    --overline-heading-5: #ffffff;
    --overline-heading-6: #ffffff;
    --overline-heading-7: #ffffff;
    --overline-heading-8: #ffffff;
}

html {
    color: #232333;
    background-color: var(--bg-main);
    font-family: "Iosevka Aile";
    font-size: 16px;
    line-height: 1.6em;
}
body {
    display: block;
    margin-left: 60px;
    margin-right: 60px;
    line-height: 2em;
}
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

::selection {
    background: var(--border);
}

p {
    font-family: "Iosevka Aile";
    line-height: 2em;
}

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

blockquote {
    border-left: 3px solid var(--bordercl);
    color: #737373;
    margin: 0;
    padding-left: 1em;
}

a {
    border-bottom: 2px solid var(--maincolor);
    color: inherit;
    text-decoration: none;
}
a:hover {
    background-color: var(--hovercolor);
    color: #fff;
}
n ul {
    list-style: none;
    padding-left: 2ch;
}
ul li {
    text-indent: 0ch;
}
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: var(--bg-dim); */
    font-family: "Iosevka Fixed";
    text-emphasis: bold;
    color: var(--magenta-warmer);
    padding: 0.1em 0.2em;
}


.highlight pre ::selection {
    color: inherit;
}



/* Containers */
.content {
    margin-bottom: 4em;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
    padding: 0 1ch;
    word-wrap: break-word;
}

/* Header */
header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 2em 0;
    line-height: 2.5em;
    background: var(--bg-dim);
    border-radius: 5px;
    border: solid var(--yellow);
    padding: 10px;
    color: var(--header);
}

header .main {
    font-size: 1.75rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1.2rem;
    margin-top: 2em;
    color: var(--header);
}

h1::before {
    color: var(black);
    content: "* ";
}
h2::before {
    color: var(--yellow);
    content: "✱✱ ";
}

h2 {
    color: var(--yellow);
}

h3::before {
    color: var(--fg-alt);
    content: "*** ";
}
h3 {
    color: var(--fg-alt);
}

h4::before {
    color: var(--magenta);
    content: "**** ";
}
h4 {
    color: var(--magenta);
}

h5::before {
    color: var(--green);
    content: "****** ";
}
h5 {
    color: var(--green);
}
h6::before {
    color: var(--red);
    content: "******* ";
}
h6 {
    color: var(--red);
}

.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;
    border-bottom: none;
}
.border {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border: 1px solid;
}
.footer-info {
    padding: var(--footer-padding);
}

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

time {
    color: var(--green);
}

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

/* Callout */
.callout {
    background-color: var(--callouctcolor);
    color: #fff;
    padding: 1em;
}

.callout p {
    font-family: "IBM Plex Mono", monospace;
    margin: 0;
}
.callout a {
    border-bottom: 3px solid #fff;
}
.callout a:hover {
    background-color: var(--bg-dim);
    color: var(--callouctcolor);
}

.site-description {
    display: flex;
    justify-content: space-between;
}
.tags li::before {
    content: "🏷 ";
}
.tags a {
    border-bottom: 3px 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: var(--bg-red-subtle);
}

highlight {
    position: relative;
    background: var(--bg-dim);
    -webkit-overflow-scrolling: touch;
}

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

}
.highlight pre code[class*="language-"]::before {
    border-radius: 0 0 0.0rem 0.0rem;
    color: var(--fg-main);
    font-size: 12px;
    letter-spacing: 0.025rem;
    padding: 0.1rem 0.5rem;
    position: absolute;
    right: 1rem;
    text-align: right;
    text-transform: lowercase;
    top: 0;
}
.highlight pre code[class="language-emacs-lisp"]::before {
    content: "emacs-lisp";
    background: var(--bg-lavender);
    color: var(--fg-main)

}

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

.highlight pre code[class*="language-yml"]::before,
.highlight pre code[class*="language-yaml"]::before {
    content: "yaml";
    background: #f71e6a;
    color: white;
}
.highlight pre code[class*="language-haskell"]::before,
.highlight pre code[class*="language-haskell"]::before {
    content: "haskell";
    background: var(--magenta-faint);
    color: var(--bg-main);
}
.highlight pre code[class*="language-shell"]::before,
.highlight pre code[class*="language-bash"]::before,
.highlight pre code[class*="language-sh"]::before {
    content: "shell";
    background: green;
    color: white;
}
.highlight pre code[class*="language-json"]::before {
    content: "json";
    background: dodgerblue;
    color: #000000;
}
.highlight pre code[class*="language-python"]::before,
.highlight pre code[class*="language-py"]::before {
    content: "py";
    background-color: var(--cyan-faint);
    color: var(--bg-main);
}
.highlight pre code[class*="language-css"]::before {
    content: "css";
    background: cyan;
    color: black;
}
.highlight pre code[class*="language-go"]::before {
    content: "Go";
    background: cyan;
    color: royalblue;
}
.highlight pre code[class*="language-md"]::before,
.highlight pre code[class*="language-md"]::before {
    content: "Markdown";
    background: royalblue;
    color: whitesmoke;
}



/* table */
table {
    border-spacing: 0;
    border-collapse: collapse;
}
p table th {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
    font-size: large;
}

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