/*Copied from https://github.com/1-2-3/remark-it/blob/master/css/*/
/*
 * Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com>
 * Copyright (c) 2016-present Sven Greb <development@svengreb.de>
 *
 * Project:    Nord
 * Version:    0.2.0
 * Repository: https://github.com/arcticicestudio/nord
 * License:    MIT
 * References:
 *   https://www.w3.org/TR/css-variables
 *   https://www.w3.org/TR/selectors/#root-pseudo
 *   https://drafts.csswg.org/css-variables
 *   https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
 *   http://warpspire.com/kss
 *   https://github.com/kss-node/kss-node
 */

/*
An arctic, north-bluish color palette.
Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax
highlighting and UI.
It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful
ambiance.

Styleguide Nord
*/

:root {
    /*
  Base component color of "Polar Night".

  Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.

  Markup:
  <div style="background-color:#2e3440; width=60; height=60"></div>

  Styleguide Nord - Polar Night
  */
    --nord0: #2e3440;

    /*
  Lighter shade color of the base component color.

  Used as a lighter background color for UI elements like status bars.

  Markup:
  <div style="background-color:#3b4252; width=60; height=60"></div>

  Styleguide Nord - Polar Night
  */
    --nord1: #3b4252;

    /*
  Lighter shade color of the base component color.

  Used as line highlighting in the editor.
  In the UI scope it may be used as selection- and highlight color.

  Markup:
  <div style="background-color:#434c5e; width=60; height=60"></div>

  Styleguide Nord - Polar Night
  */
    --nord2: #434c5e;

    /*
  Lighter shade color of the base component color.

  Used for comments, invisibles, indent- and wrap guide marker.
  In the UI scope used as pseudoclass color for disabled elements.

  Markup:
  <div style="background-color:#4c566a; width=60; height=60"></div>

  Styleguide Nord - Polar Night
  */
    --nord3: #4c566a;

    /*
  Base component color of "Snow Storm".

  Main color for text, variables, constants and attributes.
  In the UI scope used as semi-light background depending on the theme shading design.

  Markup:
  <div style="background-color:#d8dee9; width=60; height=60"></div>

  Styleguide Nord - Snow Storm
  */
    --nord4: #d8dee9;

    /*
  Lighter shade color of the base component color.

  Used as a lighter background color for UI elements like status bars.
  Used as semi-light background depending on the theme shading design.

  Markup:
  <div style="background-color:#e5e9f0; width=60; height=60"></div>

  Styleguide Nord - Snow Storm
  */
    --nord5: #e5e9f0;

    /*
  Lighter shade color of the base component color.

  Used for punctuations, carets and structuring characters like curly- and square brackets.
  In the UI scope used as background, selection- and highlight color depending on the theme shading design.

  Markup:
  <div style="background-color:#eceff4; width=60; height=60"></div>

  Styleguide Nord - Snow Storm
  */
    --nord6: #eceff4;

    /*
  Bluish core color.

  Used for classes, types and documentation tags.

  Markup:
  <div style="background-color:#8fbcbb; width=60; height=60"></div>

  Styleguide Nord - Frost
  */
    --nord7: #8fbcbb;

    /*
  Bluish core accent color.

  Represents the accent color of the color palette.
  Main color for primary UI elements and methods/functions.

  Can be used for
    - Markup quotes
    - Markup link URLs

  Markup:
  <div style="background-color:#88c0d0; width=60; height=60"></div>

  Styleguide Nord - Frost
  */
    --nord8: #88c0d0;

    /*
  Bluish core color.

  Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and
  punctuations like (semi)colons,commas and braces.

  Markup:
  <div style="background-color:#81a1c1; width=60; height=60"></div>

  Styleguide Nord - Frost
  */
    --nord9: #81a1c1;

    /*
  Bluish core color.

  Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).

  Markup:
  <div style="background-color:#5e81ac; width=60; height=60"></div>

  Styleguide Nord - Frost
  */
    --nord10: #5e81ac;

    /*
  Colorful component color.

  Used for errors, git/diff deletion and linter marker.

  Markup:
  <div style="background-color:#bf616a; width=60; height=60"></div>

  Styleguide Nord - Aurora
  */
    --nord11: #bf616a;

    /*
  Colorful component color.

  Used for annotations.

  Markup:
  <div style="background-color:#d08770; width=60; height=60"></div>

  Styleguide Nord - Aurora
  */
    --nord12: #f3ac50;

    /*
  Colorful component color.

  Used for escape characters, regular expressions and markup entities.
  In the UI scope used for warnings and git/diff renamings.

  Markup:
  <div style="background-color:#ebcb8b; width=60; height=60"></div>

  Styleguide Nord - Aurora
  */
    --nord13: #ebcb8b;

    /*
  Colorful component color.

  Main color for strings and attribute values.
  In the UI scope used for git/diff additions and success visualizations.

  Markup:
  <div style="background-color:#a3be8c; width=60; height=60"></div>

  Styleguide Nord - Aurora
  */
    --nord14: #a3be8c;

    /*
  Colorful component color.

  Used for numbers.

  Markup:
  <div style="background-color:#b48ead; width=60; height=60"></div>

  Styleguide Nord - Aurora
  */
    --nord15: #b48ead;
}

.nord-light {
    background-color: white;
}

.nord-light h1,
.nord-light h2,
.nord-light h3,
.nord-light h4,
.nord-light h5,
.nord-light h6,
.nord-light p,
.nord-light span,
.nord-light li {
    color: var(--nord3);
}

/* 文字下方显示横线 */
.nord-light .under-line {
    position: relative;
}

.nord-light .under-line::after {
    position: absolute;
    top: 1.65em;
    left: 0;
    width: 100%;
    height: 0px;
    overflow: hidden;
    white-space: nowrap;
    content: " ";
    border-top: 1px solid var(--nord3);
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
}

.nord-light small {
    color: var(--nord3);
    opacity: 0.6;
}

.nord-light a {
    color: var(--nord10);
    border-radius: 0.25em;
    transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    border-bottom-color: transparent;
}

.nord-light a:hover {
    color: var(--nord10);
    /* background-color: var(--nord3); */
    background-color: rgba(236, 239, 244, 0.45);
    border-bottom-color: transparent;
}

.nord-light pre {
    background: transparent;
    padding: 0px;
    border: 0px;
}

.nord-light code {
    color: var(--nord3);
    background-color: var(--nord6);
    padding: 0.2em 0.4em;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    transition: background-color 400ms ease-in-out 0s;
    font-family: "Cascadia Code", Consolas, "Courier New", monospace;
}

.nord-light .remark-inline-code {
    color: var(--nord3);
    background-color: var(--nord6);
    padding: 0.2em 0.4em;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    transition: background-color 400ms ease-in-out 0s;
    font: 300 0.92em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif,
        WenQuanYi Micro Hei, sans;
}

.nord-light .remark-code,
.nord-light .hljs-keyword {
    background-color: var(--nord6);
    color: var(--nord3);
}

.nord-light blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    padding-left: 1.5em;
    color: rgb(123, 136, 161);
    border-left: 0.2em solid rgba(94, 129, 172, 0.6);
    margin: 1em 0px;
    transition: border-left 400ms ease-in-out 0s, color 400ms ease-in-out 0s;
}

.nord-light blockquote>p {
    color: rgb(123, 136, 161);
    opacity: 0.65;
}

.nord-light ol,
.nord-light li ol {
    margin-left: 0em;
}

.nord-light ul,
.nord-light ol ul,
.nord-light ul li ul {
    list-style-type: none;
    margin: 0px 0px 1em;
    padding: 0px 0px 0px 1em;
}

.nord-light ul>li {
    position: relative;
    margin-left: 0.3em;
    margin-bottom: 0.7em;
    margin-top: 0.7em;
}

.nord-light ul>li::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    top: 0.7em;
    left: -20px;
    background-color: var(--nord3);
    border-radius: 50%;
    transition: background-color 400ms ease-in-out 0s;
}

.nord-light ol {
    margin: 0px 0px 1em;
    padding: 0px 0px 0px 1em;
}

.nord-light ol>li {
    padding-left: 0.3em;
}

.nord-dark {
    background-color: var(--nord0);
}

.nord-dark h1,
.nord-dark h2,
.nord-dark h3,
.nord-dark h4,
.nord-dark h5,
.nord-dark h6,
.nord-dark p,
.nord-dark span,
.nord-dark strong,
.nord-dark li {
    color: var(--nord6);
}

.nord-dark small {
    color: var(--nord4);
    opacity: 0.6;
}

.nord-dark a {
    color: var(--nord8);
    border-radius: 0.25em;
    transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    border-bottom-color: transparent;
}

.nord-dark a:hover {
    color: var(--nord8);
    background-color: var(--nord3);
    opacity: 0.8;
    border-bottom-color: transparent;
}

.nord-dark pre {
    padding: 0px;
    border: 0px;
    background: transparent;
}

.nord-dark code {
    color: var(--nord6);
    background-color: var(--nord1);
    padding: 0.2em 0.4em;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    transition: background-color 400ms ease-in-out 0s;
}

.nord-dark .remark-inline-code {
    color: var(--nord6);
    background-color: var(--nord1);
    padding: 0.2em 0.4em;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    transition: background-color 400ms ease-in-out 0s;
    font: 300 0.92em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif,
        WenQuanYi Micro Hei, sans;
}

.nord-dark .remark-code,
.nord-dark .hljs-keyword {
    color: var(--nord6);
    background-color: var(--nord1);
    border-radius: 4px;
    transition: background-color 400ms ease-in-out 0s;
}

.nord-dark blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    padding-left: 1.5em;
    color: var(--nord9);
    border-left: 0.2em solid rgba(136, 192, 208, 0.6);
    margin: 1em 0px;
    transition: border-left 400ms ease-in-out 0s, color 400ms ease-in-out 0s;
}

.nord-dark blockquote>p {
    color: var(--nord4);
    opacity: 0.65;
}

.nord-dark ol,
.nord-dark li ol {
    margin-left: 0em;
}

.nord-dark ul,
.nord-dark ol ul,
.nord-dark ul li ul {
    list-style-type: none;
    margin: 0px 0px 1em;
    padding: 0px 0px 0px 1em;
}

.nord-dark ul>li {
    position: relative;
    margin-left: 0.3em;
    margin-bottom: 0.7em;
    margin-top: 0.7em;
}

.nord-dark ul>li::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    top: 0.7em;
    left: -20px;
    background-color: rgb(76, 86, 106);
    border-radius: 50%;
    transition: background-color 400ms ease-in-out 0s;
}

.nord-dark ol {
    margin: 0px 0px 1em;
    padding: 0px 0px 0px 1em;
}

.nord-dark ol>li {
    padding-left: 0.3em;
}

.nord-dark .column-2,
.nord-dark .column-3,
.nord-dark .column-4,
.nord-dark .column-5,
.nord-dark .column-6 {
    column-rule: 0.2px solid rgba(216, 222, 233, 0.5);
}

/* 
 *适用于 nord dark 主题的沉浸式图片效果 
 */
.nord-dark-steep-img {
    position: relative;
    padding: 2px;
}

.nord-dark-steep-img::after {
    background: linear-gradient(rgba(46, 52, 64, 1) 1%, rgba(46, 52, 64, 0), rgba(46, 52, 64, 0), rgba(46, 52, 64, 1) 85%),
        linear-gradient(to right,
            rgba(46, 52, 64, 1) 0%,
            rgba(46, 52, 64, 0),
            rgba(46, 52, 64, 0),
            rgba(46, 52, 64, 1) 100%);
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
}

/* 代码框滚动条 */
.nord-dark .remark-code::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.nord-dark .remark-code::-webkit-scrollbar-thumb {
    background-color: var(--oc-gray-2);
    outline: 1px solid #333;
    border-radius: 4px;
}

.nord-dark .remark-code::-webkit-scrollbar-thumb {
    background-color: var(--nord3);
}

.nord1,
.nord1 h1,
.nord1 h2,
.nord1 h3,
.nord1 h4,
.nord1 h5,
.nord1 h6,
.nord1 p,
.nord1 span,
.nord1 strong {
    color: var(--nord1) !important;
}

.nord2,
.nord2 h1,
.nord2 h2,
.nord2 h3,
.nord2 h4,
.nord2 h5,
.nord2 h6,
.nord2 p,
.nord2 span,
.nord2 strong {
    color: var(--nord2) !important;
}

.nord3,
.nord3 h1,
.nord3 h2,
.nord3 h3,
.nord3 h4,
.nord3 h5,
.nord3 h6,
.nord3 p,
.nord3 span,
.nord3 strong {
    color: var(--nord3) !important;
}

.nord4,
.nord4 h1,
.nord4 h2,
.nord4 h3,
.nord4 h4,
.nord4 h5,
.nord4 h6,
.nord4 p,
.nord4 span,
.nord4 strong {
    color: var(--nord4) !important;
}

.nord5,
.nord5 h1,
.nord5 h2,
.nord5 h3,
.nord5 h4,
.nord5 h5,
.nord5 h6,
.nord5 p,
.nord5 span,
.nord5 strong {
    color: var(--nord5) !important;
}

.nord6,
.nord6 h1,
.nord6 h2,
.nord6 h3,
.nord6 h4,
.nord6 h5,
.nord6 h6,
.nord6 p,
.nord6 span,
.nord6 strong {
    color: var(--nord6) !important;
}

.nord7,
.nord7 h1,
.nord7 h2,
.nord7 h3,
.nord7 h4,
.nord7 h5,
.nord7 h6,
.nord7 p,
.nord7 span,
.nord7 strong {
    color: var(--nord7) !important;
}

.nord8,
.nord8 h1,
.nord8 h2,
.nord8 h3,
.nord8 h4,
.nord8 h5,
.nord8 h6,
.nord8 p,
.nord8 span,
.nord8 strong {
    color: var(--nord8) !important;
}

.nord9,
.nord9 h1,
.nord9 h2,
.nord9 h3,
.nord9 h4,
.nord9 h5,
.nord9 h6,
.nord9 p,
.nord9 span,
.nord9 strong {
    color: var(--nord9) !important;
}

.nord10,
.nord10 h1,
.nord10 h2,
.nord10 h3,
.nord10 h4,
.nord10 h5,
.nord10 h6,
.nord10 p,
.nord10 span,
.nord10 strong {
    color: var(--nord10) !important;
}

.nord11,
.nord11 h1,
.nord11 h2,
.nord11 h3,
.nord11 h4,
.nord11 h5,
.nord11 h6,
.nord11 p,
.nord11 span,
.nord11 strong {
    color: var(--nord11) !important;
}

.nord12,
.nord12 h1,
.nord12 h2,
.nord12 h3,
.nord12 h4,
.nord12 h5,
.nord12 h6,
.nord12 p,
.nord12 span,
.nord12 strong {
    color: var(--nord12) !important;
}

.nord13,
.nord13 h1,
.nord13 h2,
.nord13 h3,
.nord13 h4,
.nord13 h5,
.nord13 h6,
.nord13 p,
.nord13 span,
.nord13 strong {
    color: var(--nord13) !important;
}

.nord14,
.nord14 h1,
.nord14 h2,
.nord14 h3,
.nord14 h4,
.nord14 h5,
.nord14 h6,
.nord14 p,
.nord14 span,
.nord14 strong {
    color: var(--nord14) !important;
}

.nord15,
.nord15 h1,
.nord15 h2,
.nord15 h3,
.nord15 h4,
.nord15 h5,
.nord15 h6,
.nord15 p,
.nord15 span,
.nord15 strong {
    color: var(--nord15) !important;
}

.bg-nord1 {
    background-color: var(--nord1) !important;
}

.bg-nord2 {
    background-color: var(--nord2) !important;
}

.bg-nord3 {
    background-color: var(--nord3) !important;
}

.bg-nord4 {
    background-color: var(--nord4) !important;
}

.bg-nord5 {
    background-color: var(--nord5) !important;
}

.bg-nord6 {
    background-color: var(--nord6) !important;
}

.bg-nord7 {
    background-color: var(--nord7) !important;
}

.bg-nord8 {
    background-color: var(--nord8) !important;
}

.bg-nord9 {
    background-color: var(--nord9) !important;
}

.bg-nord10 {
    background-color: var(--nord10) !important;
}

.bg-nord11 {
    background-color: var(--nord11) !important;
}

.bg-nord12 {
    background-color: var(--nord12) !important;
}

.bg-nord13 {
    background-color: var(--nord13) !important;
}

.bg-nord14 {
    background-color: var(--nord14) !important;
}

.bg-nord15 {
    background-color: var(--nord15) !important;
}