:root > * {
  --md-hue: 225deg;

  /* Code block colors */
  /* --md-code-fg-color: #e0e0e0;
  --md-code-bg-color: #1a1a1a;
  --md-code-hl-color: rgba(159, 239, 0, 0.15);

  /* Syntax highlighting colors
  --md-code-hl-number-color: #9fef00;
  --md-code-hl-special-color: #ff5252;
  --md-code-hl-function-color: #5af78e;
  --md-code-hl-constant-color: #ff79c6;
  --md-code-hl-keyword-color: #42a5f5;
  --md-code-hl-string-color: #ffd866;
  --md-code-hl-name-color: #e0e0e0;
  --md-code-hl-operator-color: #89ddff;
  --md-code-hl-punctuation-color: #89ddff;
  --md-code-hl-comment-color: #6c7a89;
  --md-code-hl-generic-color: #e0e0e0;
  --md-code-hl-variable-color: #f78c6c; */

  --md-code-fg-color: #f8f8f2; /* Color del texto */
  --md-code-bg-color: #282a36; /* Fondo del bloque de código */
  --md-code-hl-color: rgba(98, 114, 164, 0.3); /* Resaltado de línea */

  /* Colores para la sintaxis */
  --md-code-hl-number-color: #bd93f9; /* Números */
  --md-code-hl-special-color: #ff5555; /* Caracteres especiales */
  --md-code-hl-function-color: #50fa7b; /* Funciones */
  --md-code-hl-constant-color: #ff79c6; /* Constantes */
  --md-code-hl-keyword-color: #ff79ce; /* Palabras clave */
  --md-code-hl-string-color: #f1fa8c; /* Strings */
  --md-code-hl-name-color: #f8f8f2; /* Nombres genéricos */
  --md-code-hl-operator-color: #ffb86c; /* Operadores */
  --md-code-hl-punctuation-color: #6272a4; /* Puntuación */
  --md-code-hl-comment-color: #6272a4; /* Comentarios */
  --md-code-hl-generic-color: #f8f2f2; /* Elementos genéricos */
  --md-code-hl-variable-color: #8bb9fd; /* Variables */

  /* Typeset color shades */
  --md-typeset-color: var(--md-default-fg-color);

  /* Typeset `a` color shades */
  --md-typeset-a-color: var(--md-primary-fg-color);

  /* Typeset `del` and `ins` color shades */
  --md-typeset-del-color: hsla(6, 90%, 60%, 0.15);
  --md-typeset-ins-color: hsla(108, 100%, 50%, 0.15);

  /* Typeset `kbd` color shades */
  --md-typeset-kbd-color: hsla(220, 13%, 18%, 1);
  --md-typeset-kbd-accent-color: hsla(108, 100%, 50%, 1);
  --md-typeset-kbd-border-color: hsla(210, 25%, 88%, 0.3);

  /* Typeset `mark` color shades */
  --md-typeset-mark-color: hsla(108, 100%, 50%, 0.3);

  /* Typeset `table` color shades */
  --md-typeset-table-color: hsla(0, 0%, 100%, 0.12);
  --md-typeset-table-color--light: hsla(0, 0%, 100%, 0.035);

  /* Admonition color shades */
  --md-admonition-fg-color: var(--md-default-fg-color);
  --md-admonition-bg-color: var(--md-default-bg-color);

  /* Warning color shades */
  --md-warning-fg-color: hsla(0, 0%, 0%, 0.87);
  --md-warning-bg-color: hsla(45, 100%, 50%, 1);

  /* Footer color shades */
  --md-footer-fg-color: hsla(0, 0%, 100%, 1);
  --md-footer-fg-color--light: hsla(0, 0%, 100%, 0.7);
  --md-footer-fg-color--lighter: hsla(0, 0%, 100%, 0.45);
  --md-footer-bg-color: hsla(220, 13%, 18%, 1);
  --md-footer-bg-color--dark: hsla(220, 13%, 10%, 1);

  /* Shadow depth 1 */
  --md-shadow-z1: 0 4px 10px hsla(0, 0%, 0%, 0.2), 0 0 1px hsla(0, 0%, 0%, 0.3);

  /* Shadow depth 2 */
  --md-shadow-z2: 0 4px 10px hsla(0, 0%, 0%, 0.3), 0 0 1px hsla(0, 0%, 0%, 0.4);

  /* Shadow depth 3 */
  --md-shadow-z3: 0 4px 10px hsla(0, 0%, 0%, 0.4), 0 0 1px hsla(0, 0%, 0%, 0.5);

  /* Default color shades */
  --md-default-fg-color: #a4b1cd;
  --md-default-fg-color--light: #a4b1cd;
  --md-default-fg-color--lighter: #9fef00;
  --md-default-fg-color--lightest: hsl(108, 100%, 50%);
  --md-default-bg-color: #111927;
  --md-default-bg-color--light: hsla(220, 13%, 18%, 0.7);
  --md-default-bg-color--lighter: hsla(220, 13%, 18%, 0.3);
  --md-default-bg-color--lightest: hsla(220, 13%, 18%, 0.12);

  --md-primary-fg-color: #9fef00;
  --md-primary-fg-color--light: #b1ff26;
  --md-primary-fg-color--dark: #8cdc00;
  --md-primary-bg-color: #111927;
  --md-primary-bg-color--light: #1a2331;

  --md-accent-fg-color: #9fef00;
  --md-accent-fg-color--transparent: rgba(159, 239, 0, 0.2);
  --md-accent-bg-color: #111927;
  --md-accent-bg-color--light: #1a2331;
}
/* BEGIN  */

/* The plan is to look as much as possible to https://academy.hackthebox.com/ and to HTB vscode theme  */
/* i will be skipping some css to do later or that i do not find interesting  */
/* background color  */
.theme-dark {
  color: #a4b1cd;

  /* color of text normal */
  --htb-text-color: #a4b1cd;

  /* theme bg and secondery bg  */
  --background-primary: #141d2b;
  --background-secondary: #1a2331;
  /* main color to grab attention  */
  --htb-lime: #9fef00;
  --htb-lime-opacity: rgba(159, 239, 0, 0.2);

  /* heading */
  --htb-heading: #cad2e2;
  /* drivider */
  --htb-divider-color: #1a2332;
}

/* same color copy paste from dark because htb has no light theme  */
.theme-light {
  color: #a4b1cd;

  --htb-text-color: #a4b1cd;
  /* theme bg and secondery bg  */
  --background-primary: #1a2331;
  --background-secondary: #141d2b;
  --htb-lime: #9fef00;
  --htb-heading: #cad2e2;
  --htb-divider-color: #1a2332;
}

body {
  /* --radius-s: 0px;
	--radius-m: 0px;
	--radius-l: 0px;
	--input-radius: 0px;
	--tab-radius-active: 0px;
	--checkbox-radius: 0px;
	--toggle-radius: 0px;
	--toggle-thumb-radius: 0px;
	--slider-thumb-radius: 0px; */
  /* font family  */
  font-family: Helvetica, Arial, sans-serif;
}

.workspace-tab-header.is-active::before,
.workspace-tab-header.is-active::after {
  display: none;
}

svg * {
  stroke-linecap: square;
  stroke-linejoin: miter;
  /* rx: 0;
	ry: 0; */
  /* supress warning  */
}

.menu {
  padding: var(--size-2-1);
}

.menu-item {
  padding: var(--size-4-1) var(--size-4-2);
}

.menu-separator {
  margin: var(--size-2-1) calc(var(--size-2-1) * -1);
}

/* basically the same but swapped the bg primary and secondery */

/* ======================================================================================================= */
/* ======================================================================================================= */
/* =============================================COMPONENTS================================================ */
/* ======================================================================================================= */
/* ======================================================================================================= */
/* button  */
body {
  --button-radius: 4px;
}

/* button {
  color: white !important;
} */

/* .theme-light .setting-item button {
  --text-on-accent: white !important;
  --interactive-normal: var(--code-comment) !important;
  color: var(--text-on-accent) !important;
} */

/* .theme-light {
  --interactive-hover: var(--background-primary);
  --interactive-normal: var(--code-comment);
} */

/* .setting-item button.mod-cta {
  color: black !important;
} */

/* checkbox */
body {
  --checkbox-radius: 3px;
}

/* color input(skip) */
/* Dialog (skip)*/
/* Dragging*/
body {
  --drag-ghost-background: var(--htb-lime);
  --drag-ghost-text-color: black;
}

/* when dargging a new small window appears that shows name  */

/* dropdown  */
body {
  --dropdown-background: var(--code-comment);
  --dropdown-background-hover: var(--background-secondary);
}

.dropdown {
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 4px;
  color: var(--htb-heading);
  /* color: white; */
}

/* Indentation skip  */
/* modal*/
body {
  --modal-radius: 10px;
}

/* Multi-select skip  */
/* navigation*/
body {
  --nav-item-color: var(--htb-text-color);
  /* --nav-indentation-guide-color:var(--htb-lime); */
}

/* Popover skip  */
/* propmt skip  */
/* slider skip  */
/* tabs  */
body {
  --tab-text-color: var(--htb-heading);
  --tab-radius-active: 5px 5px 0px 0px;
  --tab-text-color-focused: var(--code-comment);
}

/* text input  */
body {
  --input-radius: 5px;
}

/* toggle  */
body {
  --toggle-radius: 999px;
  --toggle-thumb-radius: 999px;
}

/* ======================================================================================================= */
/* ======================================================================================================= */
/* =============================================EDITOR==================================================== */
/* ======================================================================================================= */
/* ======================================================================================================= */

/* editor  */
/* block  (skip) */
/* blockquote */
body {
  --blockquote-background-color: var(--background-secondary);
  --blockquote-border-thickness: 2px;
  --blockquote-border-color: var(--htb-lime);
  --blockquote-font-style: normal;
  --blockquote-color: inherit;
}

/* .mod-empty-attachment {
	background-color: var(--background-secondary);
	color: #ff8484 !important;
} */

/* callout  */
body {
  --callout-border-width: 2px;
  --callout-padding: 10px 20px 20px 20px;
  /*top already has padding*/
  --callout-radius: 10px;
  --callout-blend-mode: normal;
  /* --callout-title-color: var(--htb-lime); */
  --callout-title-padding: 5px;
  --callout-title-size: 1.2em;
  --callout-title-weight: bold;
  --callout-content-padding: 0px 15px 0px 15px;
  /*only in x axis*/
  --callout-content-background: var(--background-secondary);
}

.callout-content {
  border-radius: 7px;
}

/* code  */
body {
  /* htb vscode theme  */
  --code-background: var(--background-secondary);
  /* now look we can't give it the same bg as vscode has because then it wont stand out  */
  /* so i am using seconder one  */
  /* if you have better ideas do tell me  */
  --code-normal: #a4b1cd;
  --code-comment: #4a5466;
  --code-function: #ffcc5c;
  --code-important: #ffaf00;
  --code-keyword: #cf8dfb;
  --code-operator: #ff8484;
  --code-property: #a4b1cd;
  --code-punctuation: #a4b1cd;
  --code-string: #c5f467;
  --code-tag: #ffaf00;
  --code-value: #5cb2ff;
  --code-white-space: pre;
  --code-size: var(--code-size);
}

.cm-comment {
  font-style: italic;
}

/* embed  */
body {
  --embed-background: var(--background-secondary);
}

/* file skkip */
/* footnote skip */
/* heading  */
body {
  /* htb academy headings all same color */
  --h1-color: var(--htb-heading);
  --h2-color: var(--htb-heading);
  --h3-color: var(--htb-heading);
  --h4-color: var(--htb-heading);
  --h5-color: var(--htb-heading);
  --h6-color: var(--htb-heading);
  /* size */
  --h1-size: 2em;
  --h2-size: 1.6em;
  --h3-size: 1.37em;
  --h4-size: 1.25em;
  --h5-size: 1.12em;
  --h6-size: 1.12em;
  /* weight  */
  --h1-weight: 800;
  --h2-weight: 700;
  --h3-weight: 700;
  --h4-weight: 700;
  --h5-weight: 700;
  --h6-weight: 700;
}

/* horizontal rule  */

body {
  --hr-color: var(--htb-divider-color);
}

/* inline title  */
body {
  --inline-title-color: var(--htb-heading);
}

/* links  */
body {
  /* this is for notes that exist on obsidian as in resolved */
  /* the method here is obsidian links are lime as in other htb notes */
  /* links that dont exist are blue because academy colors them blue */
  /* unresolved links are red (from the code) because they dont exist (like wikipedia) */
  /* added hover color because it changes othewise and there is no unresolve hover that uses default */
  /* on hover it sometimes is overwritten hence !important */
  --link-color: var(--htb-lime);
  --link-color-hover: var(--htb-lime) !important;
  --link-decoration: normal;
  --link-decoration-hover: underline !important;
  /* non existing note as in unresolved */
  --link-unresolved-color: #ff8484;
  /* non obsidian links as in external  */
  --link-external-color: #007bff !important;
  --link-external-color-hover: #007bff !important;
  --link-external-decoration-hover: underline !important;
  --link-external-decoration: normal;
}

/* lists  */
body {
  /* confused here if i follow academy or just do lime */
  --list-marker-color: var(--htb-lime);
  --list-marker-color-collapsed: #cad2e2;
  --list-bullet-transform: none;
  --list-numbered-style: decimal;
  --list-spacing: 2px;
  --list-bullet-size: 7px;
}

.cm-formatting-list-ul {
  margin: 2px;
}

.cm-formatting.cm-formatting-list.cm-formatting-list-ul.cm-list-2 {
  margin-left: 10px;
}

/* weird fix but the ul items were looking bad so i fix with manual css since no docs for it  */

/* metadata as in properties */
body {
  --metadata-background: inherit;
  --metadata-label-text-color: var(--htb-heading);
  --metadata-input-background-active: var(--background-secondary);
  --background-modifier-form-field: var(--background-secondary);
}

.metadata-property-icon {
  color: var(--htb-lime);
  /* icons on metadata*/
}

.metadata-add-button.text-icon-button {
  color: var(--htb-lime);
  /* this is add property button  */
}

/*.metadata-properties-title {
	color:var(--htb-lime); not sure  if i do lime or not 
	color: var(--htb-lime);
	this is the property text  
	did not combine them 3 for readability 
} */

/* table  */
body {
  --table-border-width: 2px;
  --table-header-color: var(--htb-heading);
  --table-text-color: var(--htb-text-color);
  /* --table-border-color: var(--htb-text-color) !important; */
  --table-border-color: var(--code-comment) !important;

  /* i mean for real i was expectine padding property but it does not exist	 */
  --table-row-alt-background: var(--background-secondary);
  --table-column-alt-background: var(var(--background-secondary));
}

/* Fix the borders and add a radius variable */
:root table {
  --table-border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
}

/* Add the radius */
th:first-child {
  border-top-left-radius: var(--table-border-radius);
}

th:last-child {
  border-top-right-radius: var(--table-border-radius);
}

tr:last-child td:first-child {
  border-bottom-left-radius: var(--table-border-radius);
}

tr:last-child td:last-child {
  border-bottom-right-radius: var(--table-border-radius);
}

/* Redo the borders */
:root :is(td, th) {
  border-width: 0 var(--table-border-width) var(--table-border-width) 0;
}

/* tags  */
body {
  /* --tag-color: var(--htb-lime); */
  /* imo looks good enough skip */
}

/* ======================================================================================================= */
/* ======================================================================================================= */
/* =============================================FOUNDATIONS=============================================== */
/* ======================================================================================================= */
/* ======================================================================================================= */

/* border  */
body {
  --border-width: 2px;
}

/*colors*/
body {
  --accent-h: 80;
  --accent-s: 100%;
  --accent-l: 47%;
  --accent-a: 1;
  /* this thing resolved to the htb lime color  */
  --background-primary-alt: var(--background-secondary);
  --background-modifier-border: var(--code-comment);
  --background-modifier-border-hover: var(--code-comment);
  --background-modifier-border-focus: none;
  --background-modifier-error: var(--code-operator);
  --background-modifier-success: var(--code-string);
  --background-modifier-message: var(--background-primary);
  /* interactive  */
  --interactive-normal: var(--code-comment) !important;
  --interactive-hover: var(--background-secondary);
  /* --interactive-accent: ;no need because of hsl */
  /* text colors  */
  --text-normal: #a4b1cd;
  --text-muted: var(--htb-text-color);
  --text-faint: var(--htb-heading);
  --text-on-accent: var(--background-primary);
  /* search results highlighted for example if u search x then it will highlight x  */
  --text-highlight-bg: var(--htb-lime-opacity) !important;
  /* when you highlight or select text inside editor then its BG */
  --text-selection: var(--htb-lime) !important;
  /* cursor color */
  --caret-color: var(--htb-lime);
}

button {
  --text-normal: var(--htb-heading) !important;
  /* --text-normal: white; */
}

.is-flashing {
  color: black;
}

/* Highlight or slects text font color meaning inside the highlighted part  */
::selection {
  color: var(--text-on-accent);
}

/* so this is for text inside the selection i was starting to think why no css class for it  */

span.search-result-file-matched-text {
  --text-normal: black;
}

.search-result-file-match:hover {
  --text-normal: black;
}

div.search-result-hover-button > svg {
  fill: black;
}

/* cursor*/
/* icons */
body {
  --icon-color: var(--htb-text-color);
  --icon-color-active: red !important;
  --icon-color-focused: var(--htb-lime);
  --icon-color-hover: var(--htb-heading);
}

.mod-left-split .mod-top-left-space .workspace-tab-header.tappable.is-active {
  background-color: var(--htb-lime);
}

.mod-top-left-space .workspace-tab-header.tappable.is-active svg {
  font-weight: 700;
  stroke: black;
  stroke-width: 2;
}

/* layer skip as well  */
/* radius  */
body {
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
}

/* spacing skip  */
/* Typography   skip TODO later */

/* ======================================================================================================= */
/* ======================================================================================================= */
/* =============================================PLUGINS=================================================== */
/* ======================================================================================================= */
/* ======================================================================================================= */
/* canvas    */
body {
  --canvas-background: (--background-secondary);
}

/* file explorer */
body {
  --vault-name-color: var(--htb-lime);
}

/* graph  */
body {
  --graph-line: #4a5466;
  --graph-node-focused: var(--htb-lime);
  --graph-text: var(--htb-text-color);
  --graph-node: var(--htb-heading);
  --graph-node-unresolved: var(--code-normal);
}

/* search  */
body {
  --search-icon-color: var(--htb-text-color) !important;
  --search-clear-button-color: var(--htb-text-color);
  --search-result-background: var(--background-primary);
}

/* sync skip  */

/* ======================================================================================================= */
/* ======================================================================================================= */
/* =============================================WINDOW==================================================== */
/* ======================================================================================================= */
/* ======================================================================================================= */

/* divider  */
body {
  /* --divider-color: var(--background-secondary); */
  --divider-color: var(--code-comment);
  /* will need to come back to this */
  --divider-color-hover: var(--htb-lime);
  --divider-width: 1px;
  --divider-width-hover: 3px;
}

/* ribbon  skip*/
/* scrllbar  */
body {
  --scrollbar-active-thumb-bg: var(--htb-lime);
}

/* sidebar  skip*/
/* status bar  */
body {
  --status-bar-background: var(--background-secondary);
  --status-bar-text-color: var(--htb-text-color);
}

/* vault profile skip  */

/* window frame  */
/* Settings → Appearance → Window frame style to Obsidian frame. */
body {
  --titlebar-background: var(--background-secondary);
  --titlebar-background-focused: var(--background-secondary);
  --titlebar-text-color: var(--htb-heading);
  --titlebar-text-color-focused: var(--htb-heading);
}

/* Workspace skip */

/* ======================================================================================================= */
/* ======================================================================================================= */
/* =============================================PUBLISH(skip)============================================= */
/* ======================================================================================================= */
/* ======================================================================================================= */

/* some manual corrections  */
body {
  --color-base-25: var(--background-secondary) !important;
  --color-base-40: transparent !important;

  --color-base-35: transparent !important;
  --color-base-50: var(--htb-heading) !important;
}

.vertical-tab-header-group-title {
  color: var(--htb-lime);
}

/* animation  */
/* todo later */
.md-grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 100vw;
}