@import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');

[data-md-color-scheme="catppuccin-latte"] {
    --md-default-fg-color: var(--ctp-latte-text);
    --md-default-fg-color--light: var(--ctp-latte-text);
    --md-default-fg-color--lighter: var(--ctp-latte-overlay2);
    --md-default-fg-color--lightest: var(--ctp-latte-text);

    --md-default-bg-color: var(--ctp-latte-base);
    --md-default-bg-color--light: var(--ctp-latte-mantle);
    --md-default-bg-color--lighter: var(--ctp-latte-crust);
    --md-default-bg-color--lightest: var(--ctp-latte-crust);

    --md-primary-fg-color: var(--ctp-latte-mantle);
    --md-primary-fg-color--light: var(--ctp-latte-crust);
    --md-primary-fg-color--dark: var(--ctp-latte-base);

    --md-primary-bg-color: var(--ctp-latte-text);
    --md-primary-bg-color--light: var(--ctp-latte-text);
    --md-primary-bg-color--dark: var(--ctp-latte-text);

    --md-accent-fg-color: var(--ctp-latte-blue);
    --md-accent-fg-color--transparent: rgba(var(--ctp-latte-blue-rgb), 0.5);

    --md-typeset-color: var(--ctp-latte-text);
    --md-typeset-a-color: var(--ctp-latte-mauve);
    --md-typeset-mark-color: var(--ctp-latte-blue);
    --md-typeset-del-color: var(--ctp-latte-red);
    --md-typeset-ins-color: var(--ctp-latte-green);
    --md-typeset-table-color: var(--ctp-latte-mantle);

    --md-admonition-fg-color: var(--ctp-latte-text);
    --md-admonition-bg-color: var(--ctp-latte-mantle);

    --md-footer-fg-color: var(--ctp-latte-mauve);
    --md-footer-fg-color--light: var(--ctp-latte-text);
    --md-footer-fg-color--lighter: var(--ctp-latte-text);
    --md-footer-bg-color: var(--ctp-latte-mantle);
    --md-footer-bg-color--dark: var(--ctp-latte-mantle);

    --md-code-fg-color: var(--ctp-latte-text);
    --md-code-bg-color: var(--ctp-latte-mantle);

    --md-code-hl-color: var(--ctp-latte-red);
    --md-code-hl-number-color: var(--ctp-latte-peach);
    --md-code-hl-special-color: var(--ctp-latte-text);
    --md-code-hl-function-color: var(--ctp-latte-blue);
    --md-code-hl-constant-color: var(--ctp-latte-blue);
    --md-code-hl-keyword-color: var(--ctp-latte-mauve);
    --md-code-hl-string-color: var(--ctp-latte-green);
    --md-code-hl-name-color: var(--ctp-latte-text);
    --md-code-hl-operator-color: var(--ctp-latte-sky);
    --md-code-hl-punctuation-color: var(--ctp-latte-text);
    --md-code-hl-comment-color: var(--ctp-latte-overlay2);
    --md-code-hl-generic-color: var(--ctp-latte-text);
    --md-code-hl-variable-color: var(--ctp-latte-text);

    --ctp-rosewater: rgb(var(--ctp-latte-rosewater-rgb));
    --ctp-flamingo: rgb(var(--ctp-latte-flamingo-rgb));
    --ctp-pink: rgb(var(--ctp-latte-pink-rgb));
    --ctp-mauve: rgb(var(--ctp-latte-mauve-rgb));
    --ctp-red: rgb(var(--ctp-latte-red-rgb));
    --ctp-maroon: rgb(var(--ctp-latte-maroon-rgb));
    --ctp-peach: rgb(var(--ctp-latte-peach-rgb));
    --ctp-yellow: rgb(var(--ctp-latte-yellow-rgb));
    --ctp-green: rgb(var(--ctp-latte-green-rgb));
    --ctp-teal: rgb(var(--ctp-latte-teal-rgb));
    --ctp-sky: rgb(var(--ctp-latte-sky-rgb));
    --ctp-sapphire: rgb(var(--ctp-latte-sapphire-rgb));
    --ctp-blue: rgb(var(--ctp-latte-blue-rgb));
    --ctp-lavender: rgb(var(--ctp-latte-lavender-rgb));
    --ctp-text: rgb(var(--ctp-latte-text-rgb));
    --ctp-subtext1: rgb(var(--ctp-latte-subtext1-rgb));
    --ctp-subtext0: rgb(var(--ctp-latte-subtext0-rgb));
    --ctp-overlay2: rgb(var(--ctp-latte-overlay2-rgb));
    --ctp-overlay1: rgb(var(--ctp-latte-overlay1-rgb));
    --ctp-overlay0: rgb(var(--ctp-latte-overlay0-rgb));
    --ctp-surface2: rgb(var(--ctp-latte-surface2-rgb));
    --ctp-surface1: rgb(var(--ctp-latte-surface1-rgb));
    --ctp-surface0: rgb(var(--ctp-latte-surface0-rgb));
    --ctp-base: rgb(var(--ctp-latte-base-rgb));
    --ctp-mantle: rgb(var(--ctp-latte-mantle-rgb));
    --ctp-crust: rgb(var(--ctp-latte-crust-rgb));
    --whiteshadow: #00000090;
}

[data-md-color-scheme="catppuccin-mocha"] {
    --md-default-fg-color: var(--ctp-mocha-text);
    --md-default-fg-color--light: var(--ctp-mocha-text);
    --md-default-fg-color--lighter: var(--ctp-mocha-overlay2);
    --md-default-fg-color--lightest: var(--ctp-mocha-text);

    --md-default-bg-color: var(--ctp-mocha-base);
    --md-default-bg-color--light: var(--ctp-mocha-mantle);
    --md-default-bg-color--lighter: var(--ctp-mocha-crust);
    --md-default-bg-color--lightest: var(--ctp-mocha-crust);

    --md-primary-fg-color: var(--ctp-mocha-mantle);
    --md-primary-fg-color--light: var(--ctp-mocha-crust);
    --md-primary-fg-color--dark: var(--ctp-mocha-base);

    --md-primary-bg-color: var(--ctp-mocha-text);
    --md-primary-bg-color--light: var(--ctp-mocha-text);
    --md-primary-bg-color--dark: var(--ctp-mocha-text);

    --md-accent-fg-color: var(--ctp-mocha-blue);
    --md-accent-fg-color--transparent: rgba(var(--ctp-mocha-blue-rgb), 0.5);

    --md-typeset-color: var(--ctp-mocha-text);
    --md-typeset-a-color: var(--ctp-mocha-mauve);
    --md-typeset-mark-color: var(--ctp-mocha-blue);
    --md-typeset-del-color: var(--ctp-mocha-red);
    --md-typeset-ins-color: var(--ctp-mocha-green);
    --md-typeset-table-color: var(--ctp-mocha-mantle);

    --md-admonition-fg-color: var(--ctp-mocha-text);
    --md-admonition-bg-color: var(--ctp-mocha-mantle);

    --md-footer-fg-color: var(--ctp-mocha-mauve);
    --md-footer-fg-color--light: var(--ctp-mocha-text);
    --md-footer-fg-color--lighter: var(--ctp-mocha-text);
    --md-footer-bg-color: var(--ctp-mocha-mantle);
    --md-footer-bg-color--dark: var(--ctp-mocha-mantle);

    --md-code-fg-color: var(--ctp-mocha-text);
    --md-code-bg-color: var(--ctp-mocha-mantle);

    --md-code-hl-color: var(--ctp-mocha-red);
    --md-code-hl-number-color: var(--ctp-mocha-peach);
    --md-code-hl-special-color: var(--ctp-mocha-text);
    --md-code-hl-function-color: var(--ctp-mocha-blue);
    --md-code-hl-constant-color: var(--ctp-mocha-blue);
    --md-code-hl-keyword-color: var(--ctp-mocha-mauve);
    --md-code-hl-string-color: var(--ctp-mocha-green);
    --md-code-hl-name-color: var(--ctp-mocha-text);
    --md-code-hl-operator-color: var(--ctp-mocha-sky);
    --md-code-hl-punctuation-color: var(--ctp-mocha-text);
    --md-code-hl-comment-color: var(--ctp-mocha-overlay2);
    --md-code-hl-generic-color: var(--ctp-mocha-text);
    --md-code-hl-variable-color: var(--ctp-mocha-text);

    --ctp-rosewater: rgb(var(--ctp-mocha-rosewater-rgb));
    --ctp-flamingo: rgb(var(--ctp-mocha-flamingo-rgb));
    --ctp-pink: rgb(var(--ctp-mocha-pink-rgb));
    --ctp-mauve: rgb(var(--ctp-mocha-mauve-rgb));
    --ctp-red: rgb(var(--ctp-mocha-red-rgb));
    --ctp-maroon: rgb(var(--ctp-mocha-maroon-rgb));
    --ctp-peach: rgb(var(--ctp-mocha-peach-rgb));
    --ctp-yellow: rgb(var(--ctp-mocha-yellow-rgb));
    --ctp-green: rgb(var(--ctp-mocha-green-rgb));
    --ctp-teal: rgb(var(--ctp-mocha-teal-rgb));
    --ctp-sky: rgb(var(--ctp-mocha-sky-rgb));
    --ctp-sapphire: rgb(var(--ctp-mocha-sapphire-rgb));
    --ctp-blue: rgb(var(--ctp-mocha-blue-rgb));
    --ctp-lavender: rgb(var(--ctp-mocha-lavender-rgb));
    --ctp-text: rgb(var(--ctp-mocha-text-rgb));
    --ctp-subtext1: rgb(var(--ctp-mocha-subtext1-rgb));
    --ctp-subtext0: rgb(var(--ctp-mocha-subtext0-rgb));
    --ctp-overlay2: rgb(var(--ctp-mocha-overlay2-rgb));
    --ctp-overlay1: rgb(var(--ctp-mocha-overlay1-rgb));
    --ctp-overlay0: rgb(var(--ctp-mocha-overlay0-rgb));
    --ctp-surface2: rgb(var(--ctp-mocha-surface2-rgb));
    --ctp-surface1: rgb(var(--ctp-mocha-surface1-rgb));
    --ctp-surface0: rgb(var(--ctp-mocha-surface0-rgb));
    --ctp-base: rgb(var(--ctp-mocha-base-rgb));
    --ctp-mantle: rgb(var(--ctp-mocha-mantle-rgb));
    --ctp-crust: rgb(var(--ctp-mocha-crust-rgb));
    --whiteshadow: #ffffff90;
}

.md-footer a {
    color: var(--md-primary-bg-color);
}

.md-footer a:hover {
    color: var(--md-typeset-a-color);
    opacity: 1 !important;
}

.md-typeset .md-button {
    background-color: var(--ctp-crust);
    border: .1rem solid var(--ctp-text);
    box-shadow: 0 0rem 1rem var(--ctp-crust);
    border-radius: 10px;
    transition: scale 0.3s ease;
}

.md-typeset .md-button:focus,
.md-typeset .md-button:hover {
    background-color: var(--ctp-crust);
    border-color: var(--ctp-text);
    color: var(--ctp-text);
    scale: 1.1;
}

.md-typeset .md-button:active {
    background-color: var(--ctp-crust);
    border-color: var(--ctp-text);
    color: var(--ctp-text);
    scale: 0.9;
}

.button-left-margin {
    margin-left: 15px;
}

.md-banner {
    color: var(--md-primary-bg-color);
    background-color: transparent;
    backdrop-filter: blur(1rem);

    display: flex;
    align-items: center;
    justify-content: center;
}

.md-banner a {
    text-shadow: 0 0rem 1rem rgba(198, 160, 246, .25);
}

.md-banner a span svg {
    filter: drop-shadow(0 0rem .5rem rgba(198, 160, 246, .25));
}

.md-search-result__meta {
    background-color: var(--md-default-bg-color--light);
}

.md-tabs__link {
    opacity: 1;
}

.md-tabs__link:focus,
.md-tabs__link:hover {
    color: var(--md-accent-fg-color);
}

.md-tabs__item--active .md-tabs__link {
    color: var(--md-typeset-a-color);
    text-shadow: 0 0rem 1rem rgba(198, 160, 246, .1);
}

.md-header {
    background-color: transparent;
    backdrop-filter: blur(1rem);
}

.md-header--shadow {
    border-bottom: 1px solid var(--md-default-fg-color);
}

.md-tabs {
    border-bottom: 1px solid var(--md-default-fg-color);
    background-color: transparent;
    backdrop-filter: blur(1rem);
}

/* Admonitions */
.md-typeset .admonition,
.md-typeset details {
    box-shadow: 0 0 8px var(--admonition-color) !important;
    border-radius: 0.25rem;
    border-width: 0.1rem !important;
    border-color: var(--admonition-color) !important;
    overflow: hidden;
}

.md-typeset details:has(summary:hover),
.md-typeset details:focus {
    box-shadow: 0 0 12px var(--admonition-color) !important;
}

.admonition .admonition-title,
.admonition:not(:has(.admonition-title)),
.md-typeset details summary {
    background: var(--ctp-crust) !important;
}

.admonition-title::before,
.admonition-title::after,
summary::before,
summary::after {
    color: var(--admonition-color) !important;
    background-color: var(--admonition-color) !important;
}

.note {
    --admonition-color: var(--ctp-blue);
}

.abstract {
    --admonition-color: var(--ctp-sapphire);
}

.info {
    --admonition-color: var(--ctp-sky);
}

.tip {
    --admonition-color: var(--ctp-teal);
}

.success {
    --admonition-color: var(--ctp-green);
}

.question {
    --admonition-color: var(--ctp-peach);
}

.warning {
    --admonition-color: var(--ctp-yellow);
}

.failure {
    --admonition-color: var(--ctp-maroon);
}

.danger {
    --admonition-color: var(--ctp-red);
}

.bug {
    --admonition-color: var(--ctp-red);
}

.example {
    --admonition-color: var(--ctp-mauve);
}

.quote {
    --admonition-color: var(--ctp-overlay0);
}