[data-md-color-scheme="cccda"] {
    --md-hue: 27deg;

    --md-primary-fg-color: hsl(27, 100%, 43%);
    --md-primary-fg-color--light: hsl(27, 100%, 63%);
    --md-primary-fg-color--dark: hsl(27, 100%, 33%);
    --md-primary-bg-color: hsla(0, 0%, 100%, 1);
    --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.9);

    --md-accent-fg-color: hsl(27, 100%, 43%);
    --md-accent-fg-color--transparent: hsla(27, 100%, 43%, 0.1);
    --md-accent-bg-color: hsla(0, 0%, 100%, 1);
    --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);

    --md-default-fg-color: hsl(0, 0%, 7%);
    --md-default-fg-color--light: hsl(0, 0%, 20%);
    --md-default-fg-color--lighter: hsl(0, 0%, 70%);
    --md-default-fg-color--lightest: hsl(0, 0%, 85%);
    --md-default-bg-color: hsl(0, 0%, 93%);
    --md-default-bg-color--light: hsl(0, 0%, 95%);
    --md-default-bg-color--lighter: hsl(0, 0%, 97%);
    --md-default-bg-color--lightest: hsl(0, 0%, 99%);

    --md-code-fg-color: hsl(0, 0%, 7%);
    --md-code-bg-color: hsl(0, 0%, 86%);

    --md-code-hl-color: hsla(27, 100%, 53%, 1);
    --md-code-hl-color--light: hsla(27, 100%, 53%, 0.1);

    --md-code-hl-number-color: hsla(0, 67%, 50%, 1);
    --md-code-hl-special-color: hsla(340, 83%, 47%, 1);
    --md-code-hl-function-color: hsla(291, 45%, 50%, 1);
    --md-code-hl-constant-color: hsla(250, 63%, 60%, 1);
    --md-code-hl-keyword-color: hsla(219, 54%, 51%, 1);
    --md-code-hl-string-color: hsla(150, 63%, 30%, 1);
    --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: var(--md-primary-fg-color--dark);

    --md-typeset-del-color: hsla(6, 90%, 60%, 0.2);
    --md-typeset-ins-color: hsla(150, 90%, 44%, 0.2);

    --md-typeset-kbd-color: hsla(0, 0%, 98%, 1);
    --md-typeset-kbd-accent-color: hsla(0, 100%, 100%, 1);
    --md-typeset-kbd-border-color: hsla(0, 0%, 72%, 1);

    --md-typeset-mark-color: hsl(27, 100%, 53%);

    --md-typeset-table-color: hsla(0, 0%, 0%, 0.2);
    --md-typeset-table-color--light: hsla(0, 0%, 0%, 0.1);

    --md-admonition-fg-color: var(--md-default-fg-color);
    --md-admonition-bg-color: var(--md-default-bg-color);

    --md-warning-fg-color: hsla(0, 0%, 0%, 0.87);
    --md-warning-bg-color: hsla(60, 100%, 80%, 1);

    --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(0, 0%, 0%, 0.87);
    --md-footer-bg-color--dark: hsla(0, 0%, 0%, 0.32);

    --md-shadow-z1:
        0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.05),
        0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.1);

    --md-shadow-z2:
        0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.1),
        0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.25);

    --md-shadow-z3:
        0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.2),
        0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.35);
}

[data-md-color-scheme="cccda-dark"] {
    --md-hue: 27deg;

    --md-primary-fg-color: hsl(27, 100%, 43%);
    --md-primary-fg-color--light: hsl(27, 100%, 63%);
    --md-primary-fg-color--dark: hsl(27, 100%, 33%);
    --md-primary-bg-color: hsla(0, 0%, 100%, 1);
    --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.9);

    --md-accent-fg-color: hsl(27, 100%, 43%);
    --md-accent-fg-color--transparent: hsla(27, 100%, 43%, 0.1);
    --md-accent-bg-color: hsla(0, 0%, 100%, 1);
    --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);

    --md-default-fg-color: hsl(0, 0%, 93%);
    --md-default-fg-color--light: hsl(0, 0%, 80%);
    --md-default-fg-color--lighter: hsl(0, 0%, 60%);
    --md-default-fg-color--lightest: hsl(0, 0%, 15%);
    --md-default-bg-color: hsl(0, 0%, 7%);
    --md-default-bg-color--light: hsl(0, 0%, 17%);
    --md-default-bg-color--lighter: hsl(0, 0%, 27%);
    --md-default-bg-color--lightest: hsl(0, 0%, 37%);

    --md-code-fg-color: hsl(27, 100%, 60%);
    --md-code-bg-color: hsl(0, 0%, 15%);

    --md-code-hl-color: hsla(27, 100%, 53%, 1);
    --md-code-hl-color--light: hsla(27, 100%, 53%, 0.1);

    --md-code-hl-number-color: hsla(0, 67%, 50%, 1);
    --md-code-hl-special-color: hsla(340, 83%, 47%, 1);
    --md-code-hl-function-color: hsla(291, 45%, 50%, 1);
    --md-code-hl-constant-color: hsla(250, 63%, 60%, 1);
    --md-code-hl-keyword-color: hsla(219, 54%, 51%, 1);
    --md-code-hl-string-color: hsla(150, 63%, 30%, 1);
    --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: var(--md-primary-fg-color--light);

    --md-typeset-del-color: hsl(6, 90%, 60%);
    --md-typeset-ins-color: hsl(150, 90%, 44%);

    --md-typeset-kbd-color: hsla(0, 0%, 98%, 1);
    --md-typeset-kbd-accent-color: hsla(0, 100%, 100%, 1);
    --md-typeset-kbd-border-color: hsla(0, 0%, 72%, 1);

    --md-typeset-mark-color: hsl(27, 100%, 53%);

    --md-typeset-table-color: hsla(0, 0%, 100%, 0.12);
    --md-typeset-table-color--light: hsla(0, 0%, 100%, 0.035);

    --md-admonition-fg-color: var(--md-default-fg-color);
    --md-admonition-bg-color: var(--md-default-bg-color);

    --md-warning-fg-color: hsla(60, 100%, 80%, 1);
    --md-warning-bg-color: hsla(0, 0%, 0%, 0.87);

    --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(0, 0%, 0%, 0.87);
    --md-footer-bg-color--dark: hsla(0, 0%, 0%, 0.32);

    --md-shadow-z1:
        0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.05),
        0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.1);

    --md-shadow-z2:
        0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.1),
        0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.25);

    --md-shadow-z3:
        0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.2),
        0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.35);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    font-weight: 400;
    color: var(--md-primary-fg-color);
}

.md-typeset h1::before,
.md-typeset h2::before,
.md-typeset h3::before,
.md-typeset h4::before,
.md-typeset h5::before,
.md-typeset h6::before {
    content: ">";
    margin-right: 0.3em;
    color: var(--md-primary-fg-color--light);
}

.md-tabs {
    color: white;
    font-size: 1rem;
    background-color: var(--md-primary-fg-color--dark);
}

.md-tabs__item {
    border-bottom: 2px solid transparent;
}
.md-tabs__link {
    opacity: 1;
    margin-top: 0;
    padding: calc(0.7rem - 2px) 0;
}
.md-tabs__item--active,
.md-tabs__item:hover {
    border-bottom-color: white;
}

::selection {
    color: #eee;
    background: #dd6300;
}

.md-typeset p,
.md-typeset li {
    line-height: 2;
}

.md-tabs__item {
    height: auto;
}