body {
  --pink: rgb(255, 167, 196);
  background-color: var(--bg);
}

body.light {
  --bg: #ffffff;
  --header: var(--pink);
  --textNormal: #222;
  --textTitle: #222;
  --textLink: #d23669;
  --hr: hsla(0, 0%, 0%, 0.2);
  --inlineCode-bg: rgba(255, 229, 100, 0.2);
  --inlineCode-text: #1a1a1a;
}

body.dark {
  -webkit-font-smoothing: antialiased;

  --bg: #282c35;
  --header: #ffffff;
  --textNormal: rgba(255, 255, 255, 0.88);
  --textTitle: #ffffff;
  --textLink: var(--pink);
  --hr: hsla(0, 0%, 100%, 0.2);
  --inlineCode-bg: hsl(222, 14%, 25%);
  --inlineCode-text: #e6e6e6;
}

/*
  RTL layout
*/
body:lang(fa) article,
body:lang(ar) article {
  direction: rtl;
}

body:lang(fa) article pre,
body:lang(ar) article pre,
body:lang(fa) article .translations,
body:lang(ar) article .translations,
body:lang(fa) .language-text,
body:lang(ar) .language-text {
  direction: ltr;
}

/* Fixing parentheses issue in text */
body:lang(fa) .language-text,
body:lang(ar) .language-text {
  display: inline-block;
}

body:lang(fa) blockquote,
body:lang(ar) blockquote {
  border-left: unset;
  border-right: 0.32813rem solid hsla(0, 0%, 0%, 0.9);
  padding-right: 1.42188rem;
  padding-left: unset;
  margin-left: 0.75rem;
  margin-right: -1.75rem;
}

/* styles for Persian language */
body:lang(fa) article,
body:lang(fa) header > h1 {
  font-family: 'Vazir';
}
/* styles for Arabic language */
body:lang(ar) article,
body:lang(ar) header > h1 {
  font-family: 'Cairo', sans-serif;
}

body:lang(ko) header,
body:lang(ko) article {
  word-break: keep-all;
}

/**
 * Based on copypasta from Remy Bach and Sarah Drasner
 */
code[class*='language-'],
pre[class*='language-'] {
  color: white;
  background: none;
  font-family: Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace;
  font-feature-settings: normal;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  margin-bottom: 0;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*='language-'] {
  overflow: auto;
  padding: 1.3125rem;
}

pre[class*='language-']::-moz-selection {
  /* Firefox */
  background: hsl(207, 4%, 16%);
}

pre[class*='language-']::selection {
  /* Safari */
  background: hsl(207, 4%, 16%);
}

/* Text Selection colour */
pre[class*='language-']::-moz-selection,
pre[class*='language-'] ::-moz-selection {
  text-shadow: none;
  background: hsla(0, 0%, 100%, 0.15);
}

pre[class*='language-']::selection,
pre[class*='language-'] ::selection {
  text-shadow: none;
  background: hsla(0, 0%, 100%, 0.15);
}

/* Inline code */
:not(pre) > code[class*='language-'] {
  border-radius: 0.3em;
  background: var(--inlineCode-bg);
  color: var(--inlineCode-text);
  padding: 0.15em 0.2em 0.05em;
  white-space: normal;
}

.token.attr-name {
  color: rgb(173, 219, 103);
  font-style: italic;
}

.token.comment {
  color: rgb(128, 147, 147);
}

.token.string,
.token.url {
  color: rgb(173, 219, 103);
}

.token.variable {
  color: rgb(214, 222, 235);
}

.token.number {
  color: rgb(247, 140, 108);
}

.token.builtin,
.token.char,
.token.constant,
.token.function {
  color: rgb(130, 170, 255);
}

.token.punctuation {
  color: rgb(199, 146, 234);
}

.token.selector,
.token.doctype {
  color: rgb(199, 146, 234);
  font-style: 'italic';
}

.token.class-name {
  color: rgb(255, 203, 139);
}

.token.tag,
.token.operator,
.token.keyword {
  color: #ffa7c4;
}

.token.boolean {
  color: rgb(255, 88, 116);
}

.token.property {
  color: rgb(128, 203, 196);
}

.token.namespace {
  color: rgb(178, 204, 214);
}

pre[data-line] {
  padding: 1em 0 1em 3em;
  position: relative;
}

.gatsby-highlight-code-line {
  background-color: hsla(207, 95%, 15%, 1);
  display: block;
  margin-right: -1.3125rem;
  margin-left: -1.3125rem;
  padding-right: 1em;
  padding-left: 1.25em;
  border-left: 0.25em solid #ffa7c4;
}

.gatsby-highlight {
  margin-bottom: 1.75rem;
  margin-left: -1.3125rem;
  margin-right: -1.3125rem;
  border-radius: 10px;
  background: #011627;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}

@media (max-width: 672px) {
  .gatsby-highlight {
    border-radius: 0;
  }
}

.gatsby-highlight pre[class*='language-'] {
  float: left;
  min-width: 100%;
}