[data-md-color-scheme="jmu"] {
    --md-primary-fg-color: #11918b;
    --md-primary-fg-color--light: #cce6e0;
    --md-primary-fg-color--dark: #106351;
}

[data-md-color-scheme="slate"] {
    --md-primary-fg-color: #11918b;
    --md-primary-fg-color--light: #cce6e0;
    --md-primary-fg-color--dark: #106351;

    --md-hue: 250;

    --md-default-bg-color: hsla(var(--md-hue), 15%, 10%, 1);
    --md-default-bg-color--light: hsla(var(--md-hue), 15%, 10%, 0.54);
    --md-default-bg-color--lighter: hsla(var(--md-hue), 15%, 10%, 0.26);
    --md-default-bg-color--lightest: hsla(var(--md-hue), 15%, 10%, 0.07);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
    margin: 0 0 .5em;
}

.md-typeset p {
    margin: 1em 0 1em;
}

.md-typeset .admonition,
.md-typeset details {
    font-size: 0.7rem;
}

/* Custom display */

.subsection {
    margin-left: 1.5em;
}

.small {
    font-size: 0.7rem;
}

.smaller {
    font-size: 0.6rem;
}

pre {
    background-color: #f8f8f8;
    padding: 0.5em 0.5em;
    border-radius: 0.2em;
}

/* Custom admonition types */

:root {
    --md-admonition-icon--solution: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 6a6 6 0 0 1 6 6c0 2.22-1.21 4.16-3 5.2V19a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-1.8c-1.79-1.04-3-2.98-3-5.2a6 6 0 0 1 6-6m2 15v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1h4m6-10h3v2h-3v-2M1 11h3v2H1v-2M13 1v3h-2V1h2M4.92 3.5l2.13 2.14-1.42 1.41L3.5 4.93 4.92 3.5m12.03 2.13 2.12-2.13 1.43 1.43-2.13 2.12-1.42-1.42Z"/></svg>')
}

.md-typeset .admonition.solution,
.md-typeset details.solution {
    margin: 0.5em 0;
    border-color: rgb(228, 215, 44);
    border-width: 0;
    border-left-width: 3px;
    border-radius: 0;

    &[open] {
        box-shadow: 1px 1px 1px #0000001f;
    }
}

.md-typeset .admonition.solution {
    box-shadow: 1px 1px 1px #0000001f;
}

.md-typeset .solution>.admonition-title,
.md-typeset .solution>summary {
    background-color: rgba(255, 243, 70, 0.1);
}

.md-typeset .solution>.admonition-title::before,
.md-typeset .solution>summary::before {
    background-color: rgb(228, 215, 44);
    -webkit-mask-image: var(--md-admonition-icon--solution);
    mask-image: var(--md-admonition-icon--solution);
}


:root {
    --md-admonition-icon--hint: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.74 11.72c.47 1.23.42 2.51-.99 3.02-2.9 1.07-3.55-1.74-3.59-1.88l4.58-1.14m-5.03-.81 4.32-1.07c-.19-1.05.1-2.1.1-3.34 0-1.68-1.33-4.97-3.45-4.44-2.42.6-2.77 3.29-2.68 4.59.12 1.3 1.64 4.08 1.71 4.26m12.14 8.94c-.03.15-.69 2.95-3.59 1.89-1.4-.52-1.46-1.8-.99-3.03l4.58 1.14m2.15-6.2c.1-1.3-.24-4-2.67-4.6-2.11-.55-3.44 2.76-3.44 4.45 0 1.23.28 2.28.11 3.33l4.3 1.07c.08-.18 1.59-2.96 1.7-4.25Z"/></svg>')
}

.md-typeset .admonition.hint,
.md-typeset details.hint {
    margin: 0.5em 0;
    border-color: rgb(126, 224, 241);
    border-width: 0;
    border-left-width: 3px;
    border-radius: 0;

    &[open] {
        box-shadow: 1px 1px 1px #0000001f;
    }
}

.md-typeset .admonition.hint {
    box-shadow: 1px 1px 1px #0000001f;
}

.md-typeset .hint>.admonition-title,
.md-typeset .hint>summary {
    background-color: rgb(126, 224, 241, 0.1);
}

.md-typeset .hint>.admonition-title::before,
.md-typeset .hint>summary::before {
    background-color: rgb(126, 224, 241);
    -webkit-mask-image: var(--md-admonition-icon--hint);
    mask-image: var(--md-admonition-icon--hint);
}


:root {
    --md-admonition-icon--takeaway: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 18v4h-4v-3h-3v-3h-3l-2.26-2.26c-.55.17-1.13.26-1.74.26a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6c0 .61-.09 1.19-.26 1.74L22 18M7 5a2 2 0 0 0-2 2 2 2 0 0 0 2 2 2 2 0 0 0 2-2 2 2 0 0 0-2-2Z"/></svg>')
}

.md-typeset .admonition.takeaway,
.md-typeset details.takeaway {
    margin: 0.5em 0;
    margin-bottom: 1.5em;
    border-color: rgb(68, 27, 143);
    border-width: 0;
    border-left-width: 3px;
    border-radius: 0;
    
    &[open] {
        box-shadow: 1px 1px 1px #0000001f;
    }
}

.md-typeset .admonition.takeaway {
    box-shadow: 1px 1px 1px #0000001f;
}

.md-typeset .takeaway>.admonition-title,
.md-typeset .takeaway>summary {
    background-color: rgb(68, 27, 143, 0.1);
}

.md-typeset .takeaway>.admonition-title::before,
.md-typeset .takeaway>summary::before {
    background-color: rgb(68, 27, 143);
    -webkit-mask-image: var(--md-admonition-icon--hint);
    mask-image: var(--md-admonition-icon--hint);
}


/* Code below by Alex Kretzschmar (https://blog.ktz.me/making-mkdocs-tables-look-like-github-markdown-tables/) */

th,
td {
    border: 1px solid var(--md-typeset-table-color);
    border-spacing: 0;
    border-bottom: none;
    border-left: none;
    border-top: none;
}

.md-typeset__table {
    line-height: 1.5;
}

.md-typeset__table table:not([class]) {
    font-size: .7rem;
    border-right: none;
}

.md-typeset__table table:not([class]) td,
.md-typeset__table table:not([class]) th {
    padding: 8px;
}

/* light mode alternating table bg colors */
.md-typeset__table tr:nth-child(2n) {
    background-color: #f8f8f8;
}

/* dark mode alternating table bg colors */
[data-md-color-scheme="slate"] .md-typeset__table tr:nth-child(2n) {
    background-color: hsla(var(--md-hue), 20%, 15%, 1)
}


/* Custom CSS */

.card {
    margin: 2em auto;
    padding: 1.5em;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: left;
}

.card h2 {
    text-align: center;
}

img.icon {
    height: 1em;
}