:root {
    --ma-main-fg-color: #012F4B;
    --ma-sub-bg-color: #e8e8e8;
    --ma-accent-color: #f61182;
    --ma-md-admonition-bug-color: #f50057;
    --ma-code-outline-color: color-mix(in srgb, var(--md-code-bg-color) 80%, black);

    --md-typeset-color: #2e2e2e;
    --md-admonition-fg-color: var(--md-typeset-color);
    --md-primary-fg-color: #3a4e83;
    --md-footer-bg-color: var(--md-primary-fg-color);
    --md-default-fg-color--light: hsl(from var(--md-primary-fg-color) h 30% 50%);
    --md-code-fg-color: var(--md-typeset-color);
    --md-code-bg-color: #f8f8f8;
    --md-code-hl-number-color: #b4185e;
    --md-code-hl-comment-color: #9090a0;
    --md-accent-fg-color: hsl(from var(--md-primary-fg-color) h 80% 40%);
    --md-typeset-a-color: var(--md-accent-fg-color);
    --md-typeset-table-color: #dbe2f4;

    --md-shadow-z1: none;
}

html {
    overflow-y: scroll;
}
.md-typeset {
    h1,
    h2,
    h3,
    h4 {
        color: var(--ma-main-fg-color);
        margin: 2rem 0 .5rem;
    }
    h1 {
        font-weight: 900;
    }
    h2,
    h3 {
        font-weight: 700;
    }
    h1:first-child {
        margin-top: 0;
    }
    pre code {
        font-size: inherit;
        border: 2px solid var(--ma-sub-bg-color);
    }
    .grid .md-code__content {
        display: block; /* do not grid in grid*/
    }
    :not(pre)>code {
        /* code span only */
        font-size: .9em;
        border: 1px solid var(--ma-code-outline-color);

        margin: 0 .1em;
        padding: .1em .2em;
    }
    .language-clean .nc {
        color: var(--md-code-hl-name-color);
    }
    .language-v pre code {
        font-family: monospace;
    }
    .highlight {
        span.filename {
            background-color: var(--ma-sub-bg-color);
            color: var(--md-typeset-color);
            padding: .5em 1em;
            border-bottom: unset;
        }
        .highlighttable .linenos {
            font-size: inherit;
            background-color: unset;
            border: unset;
        }
        .highlighttable .linenos a:hover {
            text-decoration: unset;
        }
        .highlighttable tr:nth-child(2) {
            background-color: var(--md-code-bg-color);
            border: 2px solid var(--ma-sub-bg-color);
            border-top: none;
            border-radius: .1em;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        .highlighttable pre code {
            /* prevent double borders */
            border: unset;
            background-color: unset;
        }
        .highlighttable .linenodiv {
            -box-shadow: unset;
        }
        .nl {
            color: var(--md-code-hl-special-color);
        }
    }
    .ma-ans {
        opacity: 0.4;
        color: var(--ma-accent-color);
        position: absolute;
        right: 1em;
    }
    .ma-ans:hover {
        color: var(--ma-accent-color);
    }
    ul li,
    ol li {
        margin-bottom: 0;
    }
    .no-bullet ul {
        list-style-type: none;
    }
    table:not([class]) {
        font-size: inherit;
        border: .05rem solid  var(--ma-sub-bg-color);
    }
    table:not([class]) td {
        padding: .2em 1em;
        border-top: .05rem solid  var(--ma-sub-bg-color);
    }
    table:not([class]) th {
        padding: .5em 1em;
        min-width: unset;
    }
    table thead {
        color: var(--md-typeset-color);
        background-color: var(--ma-sub-bg-color);
        /* same with codeblock title */
        -font-size: .85em;
    }
    dd {
        margin: 0;
    }
    dt {
        margin-top: .5rem;
    }
    dl>dt:nth-child(1) {
        margin-top: 0;
    }
    .admonition,
    details {
        font-size: inherit;
    }
    blockquote>p {
        margin: .5rem 0;
    }
    a:hover {
        text-decoration: underline;
        text-underline-offset: .15em;
    }
    a.headerlink:hover {
        text-decoration: none;
    }
    .footnote a {
        -color: unset;
    }
    .footnote>ol>li:target {
        color: var(--md-default-fg-color--light);
    }
    table .md-tooltip {
        /* necessary for annotate in table */
        top: inherit;
        left: inherit;
        margin-left: 12px;
        margin-top: 7px;
    }
    .md-tooltip__inner {
        font-size: inherit;
    }
    .md-tag {
        background-color: var(--md-primary-fg-color);
        color: var(--md-primary-bg-color);
        margin-right: .3em;
        vertical-align: bottom;
        gap: .1rem;
    }
    /* timer for homework */
    .admonition.bug .admonition-title code,
    .bug summary code {
        margin-left: .5em;
        padding: 0 .3em;
        background-color: var(--ma-md-admonition-bug-color);
        color: var(--md-primary-bg-color);
        border: 3px solid var(--ma-md-admonition-bug-color);
        border-radius: 2.4rem;
        box-shadow: unset;
    }
    .admonition:focus-within,
    details:focus-within {
        box-shadow: unset;
    }
    p:has(> img[src*="railroad-sc-"]) {
        margin: 0;
    }
    img {
        vertical-align: top;
    }
    p img[src*="railroad"] {
        margin-bottom: -.8em;
        -display: block;
    }
    details > summary + p img[src$=".svg"] {
        margin-top: .5em;
    }
    .admonition-title code,
    summary code {
        background-color: var(--md-default-bg-color);
        box-shadow: unset;
    }
    .admonition-title~.arithmatex,
    summary~.arithmatex {
        margin-block-start: 1em;
        margin-block-end: 1em;
    }
    strong {
        padding: 0 .1em;
        background: linear-gradient(transparent 70%, #3a4e832e 0%);
    }
    strong::selection {
        -text-decoration-line: none;
    }
    .twemoji {
        vertical-align: middle;
    }
    a > .twemoji {
        vertical-align: -3px;
    }
    .tabbed-labels--linked>label>a {
        padding-bottom: .2em;
    }
    code.nocode {
        border: none;
        background-color: unset;
        font: unset;
        margin: 0;
        padding: 0;
    }
    code.box-non-terminal {
        color: var(--md-mermaid-node-bg-color);
        -webkit-text-stroke: 1px var(--md-mermaid-node-fg-color);
    }
    code.box-terminal {
        color: var(--md-code-bg-color);
        -webkit-text-stroke: 1px var(--ma-code-outline-color);
    }
    /* .arithmatex */
    .arithmatex {
        padding: 0 .3em;
        overflow: visible !important;

        mjx-container[jax="CHTML"][display="true"] {
            margin: .2em 0;
            padding-left: 2em;
            text-align: unset;
        }
        mjx-mtd {
            text-align: unset !important;
            padding-right: 0 !important;
        }
        mjx-mtable {
            text-align: unset;
        }
        mjx-utext::selection {
            color: revert;
            background-color: revert;
        }
    }
    div.arithmatex>* {
        margin-left: unset !important;
    }
    .tabbed-block .arithmatex {
        margin-top: 1em;
    }
    .md-button {
        user-select: none;
    }
    .cell {
        border: 1.8px solid #4456bc;
        padding: .4em 1.4em 0;
        font-size: 50%;
        margin: 0 2px;
        vertical-align: middle;
    }
    .cell.work {
        background-color: #ffffff;
    }
    .cell.return {
        background-color: #98a2da;
    }
    .cell.control {
        background-color: #ffffd1;
    }
    .cell.local {
        background-color: #ffedf3;
    }
    .cell.global {
        background-color: #edf0ff;
    }
    .vertical-stack .cell {
        font-size: 100%;
        padding: unset;
        display: table;
        border-bottom: none;
        min-width: 60px;
        text-align: center;
        margin: 0;
    }
    .vertical-stack .cell.transparent {
        border: unset;
    }
    .vertical-stack .cell:last-child {
        border-bottom: 1.8px solid #4456bc;
    }
    .stack::before {
        content: "●";
        display: inline-flex;
        font-size: 70%;
        margin: 0 2px 5px;
        vertical-align: middle;
    }
    .stack.pc {
        color: #00b0f0;
    }
    .stack.sp {
        color: #f123a3;
    }
    .stack.bs {
        color: #22c846;
    }
    .stack.fr {
        color: #c89922;
    }

    .highlight {
        position: relative;
    }
    .highlight[class*="language-"]::before {
        position: absolute;
        top: 0.4rem;
        right: 0.4rem;
        padding: 0.15rem 0.5rem;
        font-size: 0.6rem;
        font-weight: 600;
        line-height: 1;
        color: var(--md-code-hl-comment-color);
        background-color: white;
        border-radius: 10px;
        pointer-events: none;
        z-index: 1;
    }
    .highlight.language-py:has(pre):has(.filename)::before        { content: "Python"; }
    .highlight.language-python:has(pre):has(.filename)::before    { content: "Python"; }
    .highlight.language-cpp:has(pre):has(.filename)::before       { content: "C++"; }
    .highlight.language-c:has(pre):has(.filename)::before         { content: "C"; }
    .highlight.language-java:has(pre):has(.filename)::before      { content: "Java"; }
    .highlight.language-javascript:has(pre):has(.filename)::before{ content: "JavaScript"; }
    .highlight.language-typescript:has(pre):has(.filename)::before{ content: "TypeScript"; }
    .highlight.language-bash:has(pre):has(.filename)::before      { content: "Bash"; }
    .highlight.language-shell:has(pre):has(.filename)::before     { content: "Shell"; }
    .highlight.language-yaml:has(pre):has(.filename)::before      { content: "YAML"; }
    .highlight.language-json:has(pre):has(.filename)::before      { content: "JSON"; }
    .highlight.language-markdown:has(pre):has(.filename)::before  { content: "Markdown"; }
    .highlight.language-html:has(pre):has(.filename)::before      { content: "HTML"; }
    .highlight.language-css:has(pre):has(.filename)::before       { content: "CSS"; }
    .highlight.language-rust:has(pre):has(.filename)::before      { content: "Rust"; }
    .highlight.language-go:has(pre):has(.filename)::before        { content: "Go"; }
    .highlight.language-scm:has(pre):has(.filename)::before       { content: "Lisp (Scheme)"; }
    .highlight.language-prolog:has(pre):has(.filename)::before    { content: "Prolog"; }
    .highlight.language-mbnf:has(pre):has(.filename)::before      { content: "BNF"; }
    .highlight.language-fortran:has(pre):has(.filename)::before   { content: "Fortran"; }
    .highlight.language-console:has(pre):has(.filename)::before   { content: "console"; }
}

.md-sidebar {
    .md-nav__title,
    .md-nav--secondary {
        box-shadow: unset;
    }
    .md-nav__title {
        background-color: unset;
        padding-bottom: 3px;
        padding-left: 15px;
    }
    .md-nav__list {
        color: var(--ma-main-fg-color);
    }
    .md-nav__link {
        padding: 3px;
        margin-top: 0;
        gap: .05rem;
    }
    .md-nav__link--active,
    .md-nav__link[for]:focus,
    .md-nav__link[for]:hover,
    .md-nav__link[href]:focus,
    .md-nav__link[href]:hover {
        background-color: color-mix(in srgb, var(--md-accent-fg-color) 10%, transparent);
    }
    .md-nav__item--nested label.md-nav__link {
        margin-top: .5em;
        padding-top: 5px;
        padding-bottom: 5px;
        color: var(--md-default-fg-color--light);
        font-weight: 700;
    }
}

.md-header {
    .md-header__topic {
        width: 100%;
        justify-content: space-between;
    }
    .md-version {
        z-index: 100;
    }
    .md-version__current {
        font-size: .7rem;
        opacity: 0.5;
    }
    .md-version__item {
        font-size: .7rem;
        opacity: 0.6;
    }
    .md-header__title--active .md-header__topic {
        opacity: 1;
        transform: unset;
        pointer-events: auto;
        z-index: auto;
    }
    .md-header__topic+.md-header__topic {
        transform: unset;
    }
    .md-header__title--active .md-header__topic:first-child .md-ellipsis {
        opacity: 0;
    }
}

/* md-footer */
.md-footer {
    .md-footer__link {
        align-items: center;
    }
    .md-social__link {
        height: 0;
    }
    .md-social {
        padding: 0;
    }
    .md-footer-meta__inner {
        padding-top: 0;
        padding-bottom: 0;
    }
    .md-copyright {
        width: unset;
    }
}

@media screen and (max-width: 76.234375em) {
    .md-nav--primary .md-nav__item {
        border-top: unset;
    }
    .md-nav--primary .md-nav__title {
        background-color: var(--md-primary-fg-color);
        color: var(--md-primary-bg-color);
    }
    .md-nav--primary .md-nav__link {
        padding: 3px 12px;
    }
}

/* custom admonition */
.md-typeset {
    .admonition.danger,
    details.danger {
        border-color: #ff17c6;
    }
    .danger > .admonition-title,
    .danger > summary {
        background-color: #ff17c61a;
    }
    .danger > .admonition-title:before,
    .danger > summary:before {
        background-color: #ff17c6;
    }

    .admonition.quiz,
    details.quiz {
        border-color: #7c4dff;
    }
    .quiz > .admonition-title,
    .quiz > summary {
        background-color: #7c4dff1a;
    }
    .quiz > .admonition-title::before,
    .quiz > summary::before {
        background-color: #7c4dff;
        -webkit-mask-image: var(--md-admonition-icon--example); /* redefined on mkdocs.yml */
                mask-image: var(--md-admonition-icon--example);
    }

    .admonition.answer,
    details.answer {
        border-color: #00c853;
    }
    .answer > .admonition-title,
    .answer > summary {
        background-color: #00c8531a;
    }
    .answer > .admonition-title::before,
    .answer > summary::before {
        background-color: #00c853;
        -webkit-mask-image: var(--md-admonition-icon--success);
                mask-image: var(--md-admonition-icon--success);
    }

    .admonition.exam-answer {
        border-color: black;
        > .admonition-title {
            display: none;
        }
        >p:last-child {
            margin-bottom: revert;
        }
    }
}