:root {
    --md-primary-fg-color: #161f38;
    --md-primary-fg-color--light: #efefef;
    --md-primary-fg-color--dark: #575861;
    --md-default-fg-color: var(--md-primary-fg-color);
    --md-footer-bg-color: var(--md-primary-fg-color);
    --c-colour-Skip-Shade-Gradient1-1: #161f38;
    --c-colour-Skip-Shade-Gradient1-2: #006184;
    --c-colour-Skip-Shade-Gradient1-3: #00adba;
    --c-colour-Skip-Shade-Gradient1-4: #6ffacc;
    --c-colour-Skip-Shade-Gradient1-2-2: #374955;
    --c-colour-Skip-Shade-Gradient1-2-3: #9baebc;
    --c-button-text: var(--c-white);
    --md-typeset-a-color: var(--c-colour-Skip-Shade-Gradient1-2);
    --size-n-1: 4px;
    --size-n-2: 8px;
    --size-n-3: 16px;
    --size-n-4: 24px;
    --c-gray-light: #efefef;

    :not(pre)>code {
        background-color: var(--c-gray-light);
        border-radius: var(--size-n-1);
        border: 1.5px solid var(--c-colour-Skip-Shade-Gradient1-2);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-body-bg: #272935;
        --c-text-main: #f9f9fa;
        --c-gray-light: #454854;
        --c-gray-lighter: #303340;
        --c-border: #35394b;
        --c-border-light: var(--c-gray-light);
        --c-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
        background-color: var(--c-body-bg);
        --md-primary-fg-color: #4051b5;
        --md-primary-fg-color--light: #5d6cc0;
        --md-primary-fg-color--dark: #303fa1;
        --md-primary-bg-color: #fff;
        --md-primary-bg-color--light: #ffffffb3 --md-hue: 232;
        --md-default-fg-color: hsla(var(--md-hue), 75%, 95%, 1);
        --md-default-fg-color--light: hsla(var(--md-hue), 75%, 90%, 0.62);
        --md-default-fg-color--lighter: hsla(var(--md-hue), 75%, 90%, 0.32);
        --md-default-fg-color--lightest: hsla(var(--md-hue), 75%, 90%, 0.12);
        --md-default-bg-color: hsla(var(--md-hue), 15%, 21%, 1);
        --md-default-bg-color--light: hsla(var(--md-hue), 15%, 21%, 0.54);
        --md-default-bg-color--lighter: hsla(var(--md-hue), 15%, 21%, 0.26);
        --md-default-bg-color--lightest: hsla(var(--md-hue), 15%, 21%, 0.07);
        --md-code-fg-color: hsla(var(--md-hue), 18%, 86%, 1);
        --md-code-bg-color: hsla(var(--md-hue), 15%, 15%, 1);
        --md-code-hl-color: #4287ff26;
        --md-code-hl-number-color: #e6695b;
        --md-code-hl-special-color: #f06090;
        --md-code-hl-function-color: #c973d9;
        --md-code-hl-constant-color: #9383e2;
        --md-code-hl-keyword-color: #6791e0;
        --md-code-hl-string-color: #2fb170;
        --md-code-hl-name-color: var(--md-code-fg-color);
        --md-code-hl-operator-color: var(--md-default-fg-color--light);
        --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
        --md-code-hl-comment-color: var(--md-default-fg-color--light);
        --md-code-hl-generic-color: var(--md-default-fg-color--light);
        --md-code-hl-variable-color: var(--md-default-fg-color--light);
        --md-typeset-color: var(--md-default-fg-color);
        --md-typeset-a-color: #2f81f7;
        --md-typeset-mark-color: #4287ff4d;
        --md-typeset-kbd-color: hsla(var(--md-hue), 15%, 94%, 0.12);
        --md-typeset-kbd-accent-color: hsla(var(--md-hue), 15%, 94%, 0.2);
        --md-typeset-kbd-border-color: hsla(var(--md-hue), 15%, 14%, 1);
        --md-typeset-table-color: hsla(var(--md-hue), 75%, 95%, 0.12);
        --md-typeset-table-color--light: hsla(var(--md-hue), 75%, 95%, 0.035);
        --md-admonition-fg-color: var(--md-default-fg-color);
        --md-admonition-bg-color: var(--md-default-bg-color);
        --md-navystack-color: #161f38;

        .md-header {
            background-color: var(--md-navystack-color);
        }

        .md-tabs {
            background-color: var(--md-navystack-color);
        }

        --md-footer-bg-color--dark: var(--md-navystack-color);
        color-scheme: dark
    }
}