html {
    --red: #cf022b;
    --red--50: rgba(207, 2, 43, 0.5);
    --red--10: rgba(207, 2, 43, 0.1);
    --orange: #f07d00;
    --orange--50: rgba(240, 125, 0, 0.5);
    --orange--10: rgba(240, 125, 0, 0.1);
    --mallow: #8b1d82;
    --mallow--50: rgba(139, 29, 130, 0.5);
    --mallow--10: rgba(139, 29, 130, 0.1);
    --purple: #4d1d82;
    --purple--50: rgba(77, 29, 130, 0.5);
    --purple--10: rgba(77, 29, 130, 0.1);
    --gradient: linear-gradient(
        90deg,
        var(--purple) 0%,
        var(--mallow) 10%,
        var(--red) 60%,
        var(--orange) 100%
    );
    --gradient--V: linear-gradient(
        180deg,
        var(--orange) 0%,
        var(--red) 10%,
        var(--mallow) 60%,
        var(--purple) 100%
    );
    --gradient--V--50: linear-gradient(
        180deg,
        var(--orange--50) 0%,
        var(--red--50) 10%,
        var(--mallow--50) 60%,
        var(--purple--50) 100%
    );

    --black: #1d1d1d;
    --black--70: rgba(29, 29, 29, 0.7);
    --black--50: rgba(29, 29, 29, 0.5);
    --black--30: rgba(29, 29, 29, 0.3);
    --black--10: rgba(29, 29, 29, 0.1);
    --black-colored-light: #221e29;
    --black-colored-light--70: rgb(34, 30, 41, 0.7);
    --black-colored-light--50: rgb(34, 30, 41, 0.5);
    --black-colored-light--30: rgb(34, 30, 41, 0.5);
    --black-colored-light--10: rgb(34, 30, 41, 0.1);
    --black-colored: #1b1820;
    --black-colored-dark: #131117;
    --black-colored-dark--50: rgb(19, 17, 23, 0.9);
    --white: #fffdfa;
    --white--70: rgba(255, 253, 250, 0.7);
    --white--50: rgba(255, 253, 250, 0.5);
    --white--30: rgba(255, 253, 250, 0.3);
    --white--10: rgba(255, 253, 250, 0.1);
    --grey-light: #f5f5f5;
    --grey: #eeeeed;
    --grey--70: rgb(238, 238, 237, 0.7);
    --grey--50: rgb(238, 238, 237, 0.5);
    --grey--30: rgb(238, 238, 237, 0.3);
    --grey--10: rgb(238, 238, 237, 0.1);
    --grey-dark: #c1c1bd;

    --global-border-radius: 15px;
    --global-margin: 15px;
    --logo-height: 75px;
    --ellipsis-font-size: 25px;

    --scrollbar-width: 10px;
    --scrollbar-gap: 2px;
    --scrollbar-border-radius: var(--global-border-radius);
}

[data-md-color-scheme="default"] {
    --md-primary-fg-color: var(--mallow);
    --md-primary-bg-color: var(--white);
    --md-primary-bg-color--light: var(--grey);

    --md-accent-fg-color: var(--red);
    --md-accent-fg-color--transparent: var(--red--10);
    --md-accent-bg-color: var(--white);

    --md-default-fg-color: var(--black);
    --md-default-fg-color--light: var(--black--70);
    --md-default-fg-color--lighter: var(--black--50);
    --md-default-fg-color--lightest: var(--black--10);
    --md-default-bg-color: var(--white);
    --md-default-bg-color--light: var(--white--70);
    --md-default-bg-color--lighter: var(--white--30);
    --md-default-bg-color--lightest: var(--white--10);

    --md-code-fg-color: var(--black--70);
    --md-code-bg-color: var(--grey-light);
    --md-code-hl-color: var(--mallow);
    --md-code-hl-color--light: var(--mallow--10);
    --md-code-hl-number-color: var(--red);
    --md-code-hl-special-color: var(--red);
    --md-code-hl-function-color: var(--orange);
    --md-code-hl-constant-color: var(--mallow);
    --md-code-hl-keyword-color: var(--black);
    --md-code-hl-string-color: var(--purple);

    --md-typeset-mark-color: var(--red--10);

    --md-shadow-z1: 0 0.2rem 0.5rem var(--black--10), 0 0 0.05rem var(--grey);
    --md-shadow-z2: var(--md-shadow-z1);
    --md-shadow-z3: var(--md-shadow-z1);
    --md-shadow-header: 0 0 0.2rem var(--grey-dark), 0 0.2rem 0.4rem var(--grey);
}

[data-md-color-scheme="slate"] {
    --md-hue: 260;

    --md-primary-fg-color: var(--mallow);
    --md-primary-bg-color: var(--white);
    --md-primary-bg-color--light: var(--grey);

    --md-accent-fg-color: var(--red);
    --md-accent-fg-color--transparent: var(--red--10);
    --md-accent-bg-color: var(--white);

    --md-default-fg-color: var(--grey);
    --md-default-fg-color--light: var(--grey--70);
    --md-default-fg-color--lighter: var(--grey--50);
    --md-default-fg-color--lightest: var(--grey--10);
    --md-default-bg-color: var(--black-colored-light);
    --md-default-bg-color--light: var(--black-colored-light--70);
    --md-default-bg-color--lighter: var(--black-colored-light--30);
    --md-default-bg-color--lightest: var(--black-colored-light--10);

    --md-code-fg-color: var(--white--70);
    --md-code-bg-color: var(--black--50);
    --md-code-hl-color: var(--mallow);
    --md-code-hl-color--light: var(--mallow--10);
    --md-code-hl-number-color: var(--orange);
    --md-code-hl-special-color: var(--orange);
    --md-code-hl-function-color: var(--red);
    --md-code-hl-constant-color: var(--purple);
    --md-code-hl-keyword-color: var(--white);
    --md-code-hl-string-color: var(--mallow);

    --md-typeset-mark-color: var(--orange--10);

    --md-shadow-z1: 0 0.2rem 0.5rem var(--black), 0 0 0.05rem var(--black--70);
    --md-shadow-z2: var(--md-shadow-z1);
    --md-shadow-z3: var(--md-shadow-z1);
    --md-shadow-header: 0 0 0.2rem var(--black),
        0 0.2rem 0.4rem var(--black--70);
}

[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
    --md-footer-bg-color: var(--black-colored);
    --md-footer-bg-color--dark: var(--black-colored-dark);
    --md-footer-fg-color: var(--white);
    --md-footer-fg-color--light: var(--white--70);
    --md-footer-fg-color--lighter: var(--white--30);
}

/* ** HEADER ** */
.md-header,
.md-tabs,
.md-nav__title {
    background: var(--gradient);
}

.md-header--shadow {
    box-shadow: var(--md-shadow-header);
}

.md-header__button.md-logo {
    margin: var(--global-margin);
    padding: 0;
}

.md-header__button.md-logo img {
    height: var(--logo-height);
}

.md-header__ellipsis {
    font-size: var(--ellipsis-font-size);
}

.md-search__form,
.md-dialog {
    border-radius: var(--global-border-radius);
}

[dir="ltr"] .md-search__output {
    border-bottom-left-radius: var(--global-border-radius);
    border-bottom-right-radius: var(--global-border-radius);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    border-top-left-radius: var(--global-border-radius);
    border-top-right-radius: var(--global-border-radius);
}

/* ** MAIN ** */
.md-main__inner {
    margin-top: 0;
}

.md-typeset h1 {
    font-size: 2rem;
    display: inline-block;
    background: var(--gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
}
.md-typeset .md-button {
    border-radius: var(--global-border-radius);
}

/*question*/
.md-typeset .question summary {
    background-color: var(--mallow--10);
}
.md-typeset details.question:focus-within {
    box-shadow: 0 0 0 0.2rem var(--mallow--10);
}
.md-typeset details.question {
    border-color: var(--mallow);
}
.md-typeset .question summary::before,
.md-typeset .question summary::after {
    background-color: var(--mallow);
}
/*admonition*/
.md-typeset .question .admonition-title {
    background-color: var(--orange--10);
}
.md-typeset .question .admonition-title::before {
    background-color: var(--orange);
}
.md-typeset .admonition {
    border-color: var(--orange);
}

/* ** FOOTER ** */
.md-footer-meta__inner {
    background: url(../stylesheets/SSG_logo.png) no-repeat center;
    height: 100px;
    align-items: center;
}
.md-footer__inner {
    padding: var(--global-margin);
}
.md-footer__inner * {
    margin: 0;
}
.md-footer__title {
    font-size: 0.8rem;
}

/* ** SCROLLBAR ** */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
    background: var(--md-default-bg-color);
}
::-webkit-scrollbar-thumb {
    background: var(--gradient--V--50);
    border: var(--scrollbar-gap) solid transparent;
    background-clip: content-box;
    box-sizing: content-box;
    border-radius: var(--scrollbar-border-radius);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gradient--V);
    background-clip: content-box;
}