:root {
  --maincolor: #ff5a00;
  --bordercl: #ff5a00;
  --callouctcolor: #ff5a00;
  --hovercolor: #ff5a00;
  --darkMaincolor: #ff5a00;
  --bg: #151617;
  --bg-soft: #1b1c1d;
  --bg-muted: #242526;
  --fg: #d8d2c9;
  --fg-strong: #fff7ed;
  --fg-muted: #aaa39a;
  --fg-inverse: #ffffff;
  --border: #343536;
  --selection-bg: #ff5a00;
  --selection-fg: #ffffff;
  --alert-color: #ff5a00;
  --tip-color: #ff5a00;
  --warning-color: #ff5a00;
  --code-bg: #282828;
  --code-border: #3c3836;
  --code-fg: #ebdbb2;
  --code-label-bg: #fe8019;
  --code-label-fg: #282828;
}

html,
body {
  background-color: var(--bg);
  color: var(--fg);
}

::-moz-selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
  text-shadow: none;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
  text-shadow: none;
}

hr {
  border-top: 3px dotted var(--bordercl);
}

code {
  background-color: var(--code-bg);
  color: var(--code-fg);
  padding: 0.1em 0.2em;
}

pre {
  background-color: var(--code-bg);
  border: 1px solid var(--code-border);
  color: var(--code-fg);
  line-height: 1.4;
  overflow-x: auto;
  padding: 1em;
}

blockquote {
  border-color: var(--bordercl);
  color: var(--fg-muted);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--fg-strong);
}

.meta,
time {
  color: var(--fg-muted);
}

.toc {
  background-color: var(--bg-soft);
  color: var(--fg);
}

a {
  border-bottom: 3px solid var(--darkMaincolor);
  color: inherit;
}

a:hover {
  background-color: var(--darkMaincolor);
  color: var(--fg-inverse);
}

.site-description a {
  color: var(--fg-strong);
}

.site-description a:hover {
  color: var(--fg-inverse);
}

.tags a {
  border-bottom: 3px solid var(--darkMaincolor);
}

.tags a:hover {
  background-color: var(--darkMaincolor);
  color: var(--fg-inverse);
}

.site-title a {
  color: var(--fg-strong);
  text-decoration: none !important;
}

.header nav,
.footer {
  border-color: var(--border);
}

img {
  border-color: var(--border);
}

table th,
table td {
  border-color: var(--border);
}

.highlight {
  background-color: var(--bg-muted);
}

.soc:hover {
  color: var(--fg-inverse);
}

.draft-label {
  color: var(--fg-inverse);
  background-color: var(--bordercl);
}

.highlight pre code[class=language-javaScript]::before,
.highlight pre code[class="language-js"]::before {
  content: "js";
  background: var(--code-label-bg);
  color: var(--code-label-fg);
}

.highlight pre code[class*='language-yml']::before,
.highlight pre code[class*='language-yaml']::before {
  content: 'yaml';
  background: var(--code-label-bg);
  color: var(--code-label-fg);
}

.highlight pre code[class*='language-shell']::before,
.highlight pre code[class*='language-bash']::before,
.highlight pre code[class*='language-sh']::before {
  content: 'shell';
  background: var(--code-label-bg);
  color: var(--code-label-fg);
}

.highlight pre code[class*='language-json']::before {
  content: 'json';
  background: var(--code-label-bg);
  color: var(--code-label-fg);
}

.highlight pre code[class*='language-python']::before,
.highlight pre code[class*='language-py']::before {
  content: 'py';
  background: var(--code-label-bg);
  color: var(--code-label-fg);
}

.highlight pre code[class*='language-css']::before {
  content: 'css';
  background: var(--code-label-bg);
  color: var(--code-label-fg);
}

.highlight pre code[class*='language-go']::before {
  content: 'Go';
  background: var(--code-label-bg);
  color: var(--code-label-fg);
}

.highlight pre code[class*='language-md']::before,
.highlight pre code[class*='language-md']::before {
  content: 'Markdown';
  background: var(--code-label-bg);
  color: var(--code-label-fg);
}

.highlight pre code[class*='language-ts']::before {
  content: 'TS';
  background: var(--code-label-bg);
  color: var(--code-label-fg);
}

.callout-alert {
  color: var(--fg);
  background-color: transparent;
  border-width: 3px;
  border-style: solid;
  border-color: var(--alert-color);
}

.callout-custom {
  color: var(--fg);
}

.callout-tip {
  color: var(--fg);
  background-color: transparent;
  border-width: 3px;
  border-style: solid;
  border-color: var(--tip-color);
}

.callout-warning {
  color: var(--fg);
  background-color: transparent;
  border-width: 3px;
  border-style: solid;
  border-color: var(--warning-color);
}