:root {
    --notes-font-text: "DejaVu Sans", sans-serif;
    --notes-font-code: "DejaVu Sans Mono", monospace;
    --notes-accent: #0f766e;
    --notes-highlight: #c2410c;
    --notes-rule: #cbd5e1;
    --notes-panel: #f8fafc;
}

[data-md-color-scheme="slate"] {
    --md-hue: 185;
    --notes-accent: #5eead4;
    --notes-highlight: #fdba74;
    --notes-rule: #454b50;
    --notes-panel: #222628;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--notes-font-text);
    letter-spacing: 0;
}

code,
kbd,
pre {
    font-family: var(--notes-font-code);
}

.md-grid {
    max-width: 1480px;
}

.md-typeset {
    font-size: 0.76rem;
    line-height: 1.58;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
    letter-spacing: 0;
}

.md-typeset h2 {
    border-bottom: 1px solid var(--notes-rule);
    padding-bottom: 0.28rem;
}

.md-typeset table:not([class]) {
    border: 1px solid var(--notes-rule);
    border-radius: 4px;
    display: table;
    font-size: 0.69rem;
    width: 100%;
}

.md-typeset table:not([class]) th {
    background: var(--notes-panel);
}

.md-typeset img[src$=".svg"] {
    background: transparent;
    display: block;
    height: auto;
    margin-inline: auto;
    max-height: 34rem;
    max-width: 100%;
    width: auto;
}

[data-md-color-scheme="default"] .md-typeset img[src$=".svg"] {
    color-scheme: light;
}

[data-md-color-scheme="slate"] .md-typeset img[src$=".svg"] {
    color-scheme: dark;
}

[data-md-color-scheme="slate"] .md-typeset img[src$=".png" i]:not(.no-invert),
[data-md-color-scheme="slate"] .md-typeset img[src$=".jpg" i]:not(.no-invert),
[data-md-color-scheme="slate"] .md-typeset img[src$=".jpeg" i]:not(.no-invert),
[data-md-color-scheme="slate"] .md-typeset img[src$=".gif" i]:not(.no-invert),
[data-md-color-scheme="slate"] .md-typeset img[src$=".webp" i]:not(.no-invert) {
    filter: invert(1) hue-rotate(180deg);
}

.md-typeset .admonition,
.md-typeset details {
    border-radius: 4px;
}

@media print {
    .md-typeset img {
        filter: none !important;
    }
}

@media screen and (max-width: 760px) {
    .md-typeset table:not([class]) {
        display: block;
        overflow-x: auto;
        width: 100%;
    }

    .md-typeset {
        font-size: 0.74rem;
    }
}