/* 

███████╗ ██████╗ ██╗      ██████╗ ██╗███╗   ██╗ ██████╗ 
██╔════╝██╔═══██╗██║     ██╔═══██╗██║████╗  ██║██╔════╝ 
███████╗██║   ██║██║     ██║   ██║██║██╔██╗ ██║██║  ███╗
╚════██║██║   ██║██║     ██║   ██║██║██║╚██╗██║██║   ██║
███████║╚██████╔╝███████╗╚██████╔╝██║██║ ╚████║╚██████╔╝
╚══════╝ ╚═════╝ ╚══════╝ ╚═════╝ ╚═╝╚═╝  ╚═══╝ ╚═════╝ 
*/

:root {
    --white: #FCFCFC;
    --raisin-black: #1B1825;
    --rich-black: #121019;
    --dark-purple: #242032;
    /* --tropical-indigo: #8B80F9; original, below darker*/
    --tropical-indigo: #685fce;
    --tropical-indigo-light: #A69EFA; 
    --robin-egg-blue: #19D8D5;
    --cool-gray: #7C809B;
    --cool-gray-light: #cbcdd3;
    --french-gray : #D1D2DC; /*cool gray light*/
    --white-smoke: #F5F5F5;
    --ylmn-blue: #375BA9; 
    --mint: #13C4A3; 
    --mint-light: #9af6e5; 
    --anti-flash-white: #EBEBEB;
    --folly-dark: #c7204a; 
    --folly: #FF3366; 
    --gold-light: #e8e08b;
    --gold: rgb(253, 233, 9);
    --line-width: 850px;
    --light-sea-green: #00BFB3; /* accent color*/
    --floral-white:#FFF8F0;  /* try it for the text */
    --bittersweet:#F05D5E;   /* try it for the separator lines */
    --lime: #C3F73A;
    --lime-dark: #92cb00;
    --light-mint: #3fc570; /*original*/
    --dark-mint: #2f9b56; /* modded */
    --bright-green: #5AFF15;
    /* --mint: #68B684; /*original*/ 
    /* --mint: #4ea76e; /*darker*/
    
    /* --- DARK --- */
    --background-1st-dark: #1a1c25;
    --background-2nd-dark: #20212b;
    --dark-background-primary: var(--background-1st-dark);
    --dark-background-secondary: var(--background-2nd-dark);
    --dark-divider-color: #2f3144;
    --dark-hr-color: var(--bright-green);
    --dark-hr-color: #6e8166; 
    --dark-accent: var(--bright-green);
    --dark-code: var(--lime);
    --dark-link: var(--mint);
    --dark-code-background: #292c3a;
    
    /* --- LIGHT ---  */
    --background-1st-light: #f6f6fc;
    --background-2nd-light: #eceff5;
    --light-divider:#dbe1f0; 
    --light-background-primary: var(--background-1st-light);
    --light-background-secondary: var(--background-2nd-light);
    --light-divider-color: var(--light-divider);
    --light-hr-color: var(--light-divider);
    --light-accent: var(--light-mint);
    --light-code: var(--dark-mint);
    --light-link: var(--light-mint);
    --light-code-background:#dee1e7;
  }
  
  
  .theme-dark {
    --checklist-done-decoration: none;
    --checklist-done-color: var(--cool-gray);
    --file-line-width: var(--line-width);
    --background-primary: var(--dark-background-primary);
    --background-secondary: var(--dark-background-secondary);
    --background-primary-alt: var(--dark-background-secondary);
    --background-secondary-alt: var(--dark-background-secondary);
    --tab-divider-color: var(--dark-divider-color);
    --tab-outline-color: var(--dark-divider-color);
    --interactive-accent: var(--dark-accent);
    --color-accent: var(--dark-accent);
    /* --bold-color: var(--dark-code);
    --italic-color: var(--dark-link); */
    --bold-color: var(--dark-link);
    --link-color: var(--dark-link);
    --highlight-bg-color: var(--dark-link);
    --highlight-text-color: var(--rich-black);
    
    /* Checkboxes  */
    --checkbox-color: var(--dark-link);
    --checkbox-color-hover: var(--dark-accent);
    --checkbox-border-color-hover: var(--dark-accent);
    
    /* Code block*/
    --codeblock-background: var(--dark-code-background);
    --codeblock-color: var(--white);
    --inline-code-background: var(--dark-code-background);
    /* --inline-code-color: var(--bright-green); */
    --code-variable-color: var(--white);
    --code-function-color: var(--mint);
    --code-builtin-color: var(--tropical-indigo-light);
    --code-string-color: var(--gold-light);
    --code-operator-color: var(--mint);
    --code-comment-color: var(--cool-gray);
    --code-text-size: 0.9em;
    --code-size: 0.9rem;
    
    /* Quotes */
    --blockquote-background-color: var(--dark-code-background);
    --blockquote-border-color: var(--dark-accent);
    --blockquote-border-thickness: 5px;

    --hr-color: var(--dark-hr-color) !important;
    
    /* Text Formatting */
    .cm-strong {
      color: var(--bold-color) !important;
    }
    
    /* Inline Code */
    .cm-s-obsidian span.cm-inline-code  {
      color: var(--dark-code) !important;
    }
    .markdown-rendered code {
      color: var(--dark-code);
    }
    
    /* Links */
    .cm-s-obsidian span.cm-link {
      color: var(--dark-link) !important;
    }
    .cm-s-obsidian span.cm-formatting-link.cm-url, .cm-s-obsidian span.cm-url {
      color: var(--dark-link) !important;
    }
    --links-color: var(--dark-link);
    /* Tags */
    .cm-hashtag {
      color: var(--dark-link) !important;
    }
    .tag {
      color: var(--dark-link) !important;
    }
    
    /* Explorer */
    --folder-title-color: var(--floral-white);
    --file-title-color: var(--floral-white);
    --file-content: '📄 ';
    --folder-filter: invert(51%) sepia(51%) saturate(596%) hue-rotate(89deg) brightness(89%) contrast(84%)

  }
  
  .theme-light {
    --checklist-done-decoration: none;
    --checklist-done-color: var(--cool-gray);
    --file-line-width: var(--line-width);
    --background-primary: var(--light-background-primary);
    --background-secondary: var(--light-background-secondary);
    --background-primary-alt: var(--light-background-secondary);
    --background-secondary-alt: var(--light-background-secondary);
    --tab-divider-color: var(--light-divider-color);
    --tab-outline-color: var(--light-divider-color);
    --divider-color: var(--light-divider-color);
    --interactive-accent: var(--light-accent);
    --color-accent: var(--light-accent);
    --bold-color: var(--light-code);
    /* --italic-color: var(--light-link); */
    --link-color: var(--light-link);
    --highlight-bg-color: var(--light-link);
    --highlight-text-color: var(--rich-black);
    
    /* Checkboxes  */
    --checkbox-color: var(--light-link);
    --checkbox-color-hover: var(--light-accent);
    --checkbox-border-color-hover: var(--light-accent);
    
    /* Code block */
    --codeblock-background: var(--light-code-background);
    --codeblock-color: var(--rich-black);
    --inline-code-background: var(--light-code-background);
    --code-variable-color: var(--rich-black);
    --code-string-color: var(--tropical-indigo);
    --code-builtin-color: var(--mint);
    --code-function-color: var(--bittersweet);
    --code-operator-color: var(--mint);
    --code-comment-color: var(--cool-gray);
    --code-text-size: 0.9em;
    --code-size: 0.9rem;

    --hr-color: var(--light-hr-color) !important;

    
    /* Inline Code */
    .cm-s-obsidian span.cm-inline-code  {
      color: var(--light-code) !important;
    }
    .markdown-rendered code {
      color: var(--light-code);
    }
    
    /* Links */
    .cm-s-obsidian span.cm-link {
      color: var(--light-link) !important;
    }
    .cm-s-obsidian span.cm-formatting-link.cm-url, .cm-s-obsidian span.cm-url {
      color: var(--light-link) !important;
    }
    --links-color: var(--light-link);
    
    /* Tags */
    .cm-hashtag {
      color: var(--light-link) !important;
    }
    .tag {
      color: var(--light-link) !important;
    }
    
    /* Quotes */
    --blockquote-background-color: var(--light-code-background);
    --blockquote-border-color: var(--light-accent);
    --blockquote-border-thickness: 5px;
    
    /* Explorer */
    --folder-title-color: var(--rich-black);
    --file-title-color: var(--rich-black);
    --folder-filter: invert(55%) sepia(89%) saturate(330%) hue-rotate(89deg) brightness(99%) contrast(88%);
    --file-content: '📄 ';
    
  }
  
  /* ----------- Links ----------- */
  
.external-link {
  color: var(--links-color);
}

/* ----------- Highlight ----------- */

.cm-s-obsidian span.cm-highlight, .markdown-rendered mark {
  background-color: var(--highlight-bg-color);
  color: var(--highlight-text-color);
  padding: 2px 2px 2px 2px;
}

/* ----------- Quotes ----------- */

.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote, .markdown-rendered blockquote {
  font-style: var(--quote-style);
  font-size: 0.9em;
  background-color: var(--quote-background);
  padding-top: 0.3em;
  padding-bottom: 0.4em;
}

/* ----------- Tables ----------- */

table {
  margin-left: auto;
  margin-right: auto;
}
.markdown-preview-view table {
  margin-left: auto;
  margin-right: auto;
}

/* ----------- Images ----------- */

img {display:block;
  margin-left:auto;
  margin-right:auto;}

.markdown-preview-view img {
 display: block;
 margin-top: 20pt;
 margin-bottom: 20pt;
 margin-left: auto;
 margin-right: auto;
 width: 40%;  /* experiment with values */
 transition:transform 0.25s ease;
}

.markdown-preview-view img:hover {
   -webkit-transform:scale(1); /* experiment with values */
   transform:scale(1.4);
}

/* ----------- Code - Code Block ----------- */

pre code { 
    background-color: var(--codeblock-background) !important;
    border: var(--codeblock-background) !important;
    color: var(--codeblock-color)!important;
}

.markdown-rendered pre {
  background-color: var(--codeblock-background);
}

pre[class*="language-"], 
code[class*="language-"]
{
    font-size: var(--code-text-size)!important;
    background: var(--codeblock-background)!important;
    color: var(--codeblock-color)!important;
}

.cm-s-obsidian div.HyperMD-codeblock-begin-bg, 
.cm-s-obsidian div.HyperMD-codeblock-end-bg {
    background-color: var(--codeblock-background);
}

.cm-s-obsidian div.HyperMD-codeblock-bg {
    left: 0;
    right: 0;
    background-color: var(--codeblock-background);
}

.cm-inline-code{
    background-color: var(--inline-code-background)!important;
    color: var(--inline-code-color)!important;
    font-size: var(--code-text-size)!important;
    padding: 3px 4px;
    border-radius: 5px;
}

.markdown-rendered code {
    background-color: var(--codeblock-background)!important;
    /* color: var(--white); */
    color: var(--inline-code-color);
    font-size: var(--code-text-size)!important;
    padding: 3px 4px;
    border-radius: 5px;
}

/* ----------- Code Styling ----------- */

.cm-link, .cm-variable, .cm-variable-2, .cm-variable-3 {color: var(--code-variable-color)!important;} /* variable */
.cm-def.cm-hmd-codeblock, .token.function, .token.class-name{
  color: var(--code-function-color)!important;
  text-emphasis: italic;
} /* function name in declaration */
.cm-builtin, .cm-property, .cm-attribute, .cm-type, .cm-keyword, .token.keyword, .token.builtin, .token.property {color: var(--code-builtin-color)!important;} /* built-in functions, methods */
.cm-hmd-codeblock.cm-string, .token.string {color: var(--code-string-color)!important;} /* strings */
.cm-hmd-codeblock.cm-number, .token.number {color: var(--code-operator-color)!important} /* numbers */
.cm-operator, .token.operator {color: var(--code-operator-color)!important;} /* operators */
.cm-hmd-codeblock {color: var(--codeblock-color);} /* codeblock */
.cm-comment, .token.comment {color: var(--code-comment-color)!important;} /* comment */

/* ----------- File Explorer ----------- */

.nav-folder-children .nav-file-title-content:first-child::before 
{ 
    content: var(--file-content);  
    
}

.nav-folder-children .nav-folder-title-content::before 
{ 
    content: '📁 '; /*FCD53F*/
    margin-right: 0px !important;
}

.nav-folder-title-content
{
    color: var(--folder-title-color);
}

.nav-file-title-content
{
    color: var(--file-title-color);
}

/* how to get CSS filter ? 
0, open website: https://www.zhangxinxu.com/sp/filter.html
1, first: image original color this is :  #FCD53F folder color
2, second: display color   i want : #D6FFF1
3, CSS filter trans btn clik:  the result is :
  filter: invert(99%) sepia(90%) saturate(382%) hue-rotate(69deg) brightness(106%) contrast(102%);
4, pause👇  : OK ✌️;
*/

.nav-folder-title-content::before {
    font-size: 13px;
    
    filter: var(--folder-filter);
  
    /*
      /* If you want to change the icon, you only need to modify this code.you can only change d=''
    */
  
    /* Master folder icon */
    content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 100 100' width='17' height='17'><path  fill='currentColor' stroke='currentColor'  d='M6.1,8c-3.3,0-6,2.7-6,6v73.8c-0.1,0.5-0.1,0.9,0.1,1.4c0.6,2.7,3,4.8,5.9,4.8h78c3,0,5.4-2.2,5.9-5.1 c0-0.1,0.1-0.2,0.1-0.4c0,0,0-0.1,0-0.1l0.1-0.3c0,0,0,0,0-0.1l9.9-53.6l0.1-0.2V34c0-3.3-2.7-6-6-6v-6c0-3.3-2.7-6-6-6H36.1 c0,0,0,0-0.1,0c-0.1,0-0.2-0.2-0.6-0.6c-0.5-0.6-1.1-1.5-1.7-2.5c-0.6-1-1.3-2.1-2.1-3C30.9,9,29.7,8,28.1,8L6.1,8z M6.1,12h22 c-0.1,0,0.1,0,0.6,0.6c0.5,0.6,1.1,1.5,1.7,2.5c0.6,1,1.3,2.1,2.1,3c0.8,0.9,1.9,1.9,3.6,1.9h52c1.1,0,2,0.9,2,2v6h-74 c-3.1,0-5.7,2.5-5.9,5.6h-0.1L10.1,34l-6,32.4V14C4.1,12.9,4.9,12,6.1,12z M16.1,32h78c1.1,0,2,0.9,2,2l-9.8,53.1l-0.1,0.1 c0,0.1,0,0.2-0.1,0.2c0,0.1,0,0.2-0.1,0.2c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1c0,0.1,0,0.2-0.1,0.3c0,0.1,0,0.1,0,0.2 c0,0.1,0,0.2,0,0.2c-0.3,0.8-1,1.4-1.9,1.4h-78c-1.1,0-2-0.9-2-2L14,34.4l0.1-0.2V34C14.1,32.9,14.9,32,16.1,32L16.1,32z'/></svg>"); 

    margin-right: 7px !important;
  }