html {
    /* Go to https://catppuccin.com/palette/ and choose your favourite primary colour from the Latte theme for the Light theme I chose my fav blue*/
    --primary-color: #04a5e5;
    --primary-dark-color: #7287fd;
    --primary-light-color: #1e66f5;

    /* Don't touch these colours please. They are what makes Catppuccin Catppuccin. And sorry if I got them wrong. */
    --page-background-color: #eff1f5;
    --page-foreground-color: #4c4f69;
    --page-secondary-foreground-color: #9ca0b0;
    --fragment-background: #dce0e8;
    --fragment-foreground: #5c5f77;

    --warning-color-dark: #df8e1d;
    --warning-color-darker: #99600f;
    --note-color-dark: #04a5e5;
    --note-color-darker: #076c94;
    --todo-color-dark: #8839ef;
    --todo-color-darker: #52199c;
    --deprecated-color: #ced0de;
    --deprecated-color-dark: #4c4f69;
    --deprecated-color-darker: #3c3d4d;
    --bug-color: #f8d1cc;
    --bug-color-dark: #d20f39;
    --bug-color-darker: #ab0e30;
    --invariant-color-dark: #40a02b;
    --invariant-color-darker: #29691b;

    --searchbar-background: #94e2d5;

    /* This has nothing to do with catppuccin I just like this. Keeps the nav bar arrow always visible. */
    --side-nav-arrow-opacity: 0.8;
    --search-color: #4c4f69;

    --span-mlabel: #1e66f5;
}

html.dark-mode {
    /* Go to https://catppuccin.com/palette/ and choose your favourite primary colour from the Frappe/Mocha/Macchiato theme for the Dark theme I chose my fav blue*/
    /* There's a problem here... I made it Mocha only if you want Frappe or Macchiato then you have to change all the later variables. But! no one will ever notice if you just change the background and foreground colours and you'll be good to go :) */
    --primary-color: #89b4fa;
    --primary-dark-color: #74c7ec;
    --primary-light-color: #89dceb;

    --page-background-color: #1e1e2e;
    --page-foreground-color: #cdd6f4;
    --page-secondary-foreground-color: #6c7086;

    --warning-color: #3f2d03;
    --warning-color-dark: #f9e2af;
    --warning-color-darker: #d9ba77;
    --note-color-dark: #89dceb;
    --note-color-darker: #5ca1ad;
    --todo-color-dark: #cba6f7;
    --todo-color-darker: #a077d1;
    --deprecated-color-dark: #9399b2;
    --deprecated-color-darker: #6c7086;
    --bug-color: #870937;
    --bug-color-dark: #f38ba8;
    --bug-color-darker: #d1587a;
    --invariant-color-dark: #a6e3a1;
    --invariant-color-darker: #6aa865;

    --searchbar-background: #11111b;

    --side-nav-background: #181825;
    --separator-color: #2d394d;

    --fragment-background: #181825;
    --fragment-foreground: #bac2de;
    --fragment-keyword: #cba6f7;
    --fragment-keywordtype: #f9e2af;
    --fragment-keywordflow: #cba6f7;
    --fragment-token: #438a59;
    --fragment-comment: #9399b2;
    --fragment-link: #89b4fa;
    --fragment-preprocessor: #cba6f7;
    --fragment-linenumber-color: #7f849c;
    --search-color: #fff;
    --span-mlabel: #313244;
}

#MSearchField {
    color: var(--search-color);
}

#MSearchBox {
    background: transparent;
}

#MSearchBox.dark-mode {
    background: #11111b;
    border-color: transparent;
}

#MSearchBox.MSearchBoxActive {
    border-color: transparent;
}

span.mlabel {
    background: var(--span-mlabel);
}