:root {
    --body-width: 800px;
}

html {
    /* fixes font size on iOS */
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

body {
    font-family: Georgia, "Book Antiqua", serif;
    font-size: 1.2rem;
    background-color: #fffff8;
    margin: 20px;
    padding: 0;
}

p>code,
li>code {
    background-color: #f6fcff;
    padding: 2px;
    font-size: 1rem;
}

main {
    color: #111;
    max-width: var(--body-width);
}

@media screen and (max-width: 600px) {
    body {
        font-size: 1rem;
    }

    .recent {
        display: none;
    }

    p>code,
    li>code {
        background-color: #f6fcff;
        padding: 1px;
        font-size: 1rem;
    }

    main {
        line-height: 1.5rem;
        margin: 1.5em auto;
    }
}

@media screen and (min-width: 600px) {
    main {
        line-height: 2rem;
        margin: 2em auto;
    }
}

footer {
    font-size: 1rem;
    margin-top: 20px;
    margin-bottom: 100px;
    text-align: center;
}

blockquote {
    border-left: 1px solid hsl(298 100% 70%);
    padding-left: 12px;
}

div.highlight {
    font-size: 1rem;
    padding-left: 1rem;
    padding-top: 0.05rem;
    padding-bottom: 0.05rem;
    background-color: #f9f9ef;
    /* This is a hack to get the code boxes wider than the parents, but still
       in the document flow... I would like to figure out how to get the width
       to be auto-figured-out, but for now I'm just going to set it wide
       because it works-ish */
    position: relative;
    overflow: auto;
}

a {
    color: hsl(298 100% 40%);
}

a:visited {
    color: hsl(298 100% 70%);
}

h1 {
    font-size: 2rem;
    line-height: 3rem;
}

h2 {
    font-size: 1.8rem;
}

table {
    width: 800px;
    border-collapse: collapse;
}

thead th {
    border-bottom: solid 1px #aaa;
}

tbody tr td {
    border-bottom: solid 1px #aaa;
}

td {
    padding: 8px;
}

.recent {
    display: inline-block;
    width: 130px;
}

/* https://iamkate.com/code/tree-views/ */
.tree {
    --spacing: 1.5rem;
    --radius: 10px;
    /* shove the tree closer to the margin - not sure how to do this better */
    margin-left: -40px;
}

.tree li {
    display: block;
    position: relative;
    padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul {
    margin-left: calc(var(--radius) - var(--spacing));
    padding-left: 0;
}

.tree ul li {
    border-left: 2px solid #ddd;
}

.tree ul li:last-child {
    border-color: transparent;
}

.tree ul li::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(var(--spacing) / -2);
    left: -2px;
    width: calc(var(--spacing) + 2px);
    height: calc(var(--spacing) + 1px);
    border: solid #ddd;
    border-width: 0 0 2px 2px;
}

.tree summary {
    /* to remove the disclosure arrow, uncomment this and the following rule */
    /* display: block; */
    cursor: pointer;
}

.time {
    font-size: 0.9em;
}

.time {
    font-size: 0.9em;
}

/* I think I prefer keeping these?
.tree summary::marker,
.tree summary::-webkit-details-marker{
  display : none;
} */

.tree summary:focus {
    outline: none;
}

.tree summary:focus-visible {
    outline: 1px dotted #000;
}

#collapseall {
    font-size: 1rem;
}

video {
    width: 100%;
}

.dirlink {
    text-decoration: none;
    font-size: 14px;
}

a.external-link {
    background-image: url(/out.svg);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.7em;
    padding-right: 0.8em;
}

/* adapted from mkdocs-material
* https://squidfunk.github.io/mkdocs-material/reference/admonitions/
* */
.admon-warning {
    position: relative;
    border: 0.075rem solid #ff9100;
    border-radius: 0.2rem;
    display: flow-root;
    margin: 1.5625em 0;
    font-size: 1rem;
    padding: 0 0.8rem;
    page-break-inside: avoid;
}

p.warning::before {
    content: "";
    height: 2rem;
    -webkit-mask-image: var(--md-admonition-icon--note);
    mask-image: var(--md-admonition-icon--note);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: -0.35em;
    left: 0;
    width: 2rem;
    background-color: #ff9100;
    -webkit-mask-image: var(--md-admonition-icon--warning);
    mask-image: var(--md-admonition-icon--warning);
}

p.warning {
    padding-left: 3rem;
    position: relative;
}

.bodyimg {
    max-width: min(100%, var(--body-width));
}

/* copied from mkdocs-material
* https://squidfunk.github.io/mkdocs-material/reference/admonitions/
* */
:root {
    --md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m3.1 5.07c.14 0 .28.05.4.16l1.27 1.27c.23.22.23.57 0 .78l-1 1-2.05-2.05 1-1c.1-.11.24-.16.38-.16m-1.97 1.74 2.06 2.06-6.06 6.06H7.07v-2.06l6.06-6.06Z"/></svg>');
    --md-admonition-icon--abstract: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z"/></svg>');
    --md-admonition-icon--info: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2Z"/></svg>');
    --md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27Z"/></svg>');
    --md-admonition-icon--success: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59 21 7Z"/></svg>');
    --md-admonition-icon--question: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10Z"/></svg>');
    --md-admonition-icon--warning: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2 1 21Z"/></svg>');
    --md-admonition-icon--failure: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>');
    --md-admonition-icon--danger: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m11.5 20 4.86-9.73H13V4l-5 9.73h3.5V20M12 2c2.75 0 5.1 1 7.05 2.95C21 6.9 22 9.25 22 12s-1 5.1-2.95 7.05C17.1 21 14.75 22 12 22s-5.1-1-7.05-2.95C3 17.1 2 14.75 2 12s1-5.1 2.95-7.05C6.9 3 9.25 2 12 2Z"/></svg>');
    --md-admonition-icon--bug: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 13h2v1h-2v-1m10-8v6c0 5.5-3.8 10.7-9 12-5.2-1.3-9-6.5-9-12V5l9-4 9 4m-4 5h-2.2c-.2-.6-.6-1.1-1.1-1.5l1.2-1.2-.7-.7L12.8 8H12c-.2 0-.5 0-.7.1L9.9 6.6l-.8.8 1.2 1.2c-.5.3-.9.8-1.1 1.4H7v1h2v1H7v1h2v1H7v1h2.2c.4 1.2 1.5 2 2.8 2s2.4-.8 2.8-2H17v-1h-2v-1h2v-1h-2v-1h2v-1m-6 2h2v-1h-2v1Z"/></svg>');
    --md-admonition-icon--example: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 2v2h1v14a4 4 0 0 0 4 4 4 4 0 0 0 4-4V4h1V2H7m4 14c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1m2-4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1m1-5h-4V4h4v3Z"/></svg>');
    --md-admonition-icon--quote: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4Z"/></svg>');
}

/* Callout base styles - following mkdocs-material pattern */
.admon-note,
.admon-abstract,
.admon-info,
.admon-tip,
.admon-success,
.admon-question,
.admon-warning,
.admon-failure,
.admon-danger,
.admon-bug,
.admon-example,
.admon-quote,
.admon-important {
    position: relative;
    border: 0.075rem solid;
    border-radius: 0.2rem;
    display: flow-root;
    margin: 1.5625em 0;
    font-size: 1rem;
    padding: 0 0.8rem 0.8rem 0.8rem;
    page-break-inside: avoid;
}

.admon-note {
    border-color: #448aff;
}

.admon-abstract {
    border-color: #00b0ff;
}

.admon-info {
    border-color: #00b8d4;
}

.admon-tip {
    border-color: #00bfa5;
}

.admon-success {
    border-color: #00c853;
}

.admon-question {
    border-color: #64dd17;
}

.admon-warning {
    border-color: #ff9100;
}

.admon-failure {
    border-color: #ff5252;
}

.admon-danger {
    border-color: #ff1744;
}

.admon-bug {
    border-color: #f50057;
}

.admon-example {
    border-color: #7c4dff;
}

.admon-quote {
    border-color: #9e9e9e;
}

.admon-important {
    border-color: #ff5722;
}

/* Title styles with icons */
p.note-title,
p.abstract-title,
p.info-title,
p.tip-title,
p.success-title,
p.question-title,
p.warning-title,
p.failure-title,
p.danger-title,
p.bug-title,
p.example-title,
p.quote-title,
p.important-title {
    padding-left: 3rem;
    position: relative;
    font-weight: bold;
    margin-bottom: 0.5em;
}

/* Icon base style */
p.note-title::before,
p.abstract-title::before,
p.info-title::before,
p.tip-title::before,
p.success-title::before,
p.question-title::before,
p.warning-title::before,
p.failure-title::before,
p.danger-title::before,
p.bug-title::before,
p.example-title::before,
p.quote-title::before,
p.important-title::before {
    content: "";
    height: 2rem;
    width: 2rem;
    position: absolute;
    top: -0.35em;
    left: 0;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Specific icon assignments and colors */
p.note-title::before {
    background-color: #448aff;
    -webkit-mask-image: var(--md-admonition-icon--note);
    mask-image: var(--md-admonition-icon--note);
}

p.abstract-title::before {
    background-color: #00b0ff;
    -webkit-mask-image: var(--md-admonition-icon--abstract);
    mask-image: var(--md-admonition-icon--abstract);
}

p.info-title::before {
    background-color: #00b8d4;
    -webkit-mask-image: var(--md-admonition-icon--info);
    mask-image: var(--md-admonition-icon--info);
}

p.tip-title::before {
    background-color: #00bfa5;
    -webkit-mask-image: var(--md-admonition-icon--tip);
    mask-image: var(--md-admonition-icon--tip);
}

p.success-title::before {
    background-color: #00c853;
    -webkit-mask-image: var(--md-admonition-icon--success);
    mask-image: var(--md-admonition-icon--success);
}

p.question-title::before {
    background-color: #64dd17;
    -webkit-mask-image: var(--md-admonition-icon--question);
    mask-image: var(--md-admonition-icon--question);
}

p.warning-title::before {
    background-color: #ff9100;
    -webkit-mask-image: var(--md-admonition-icon--warning);
    mask-image: var(--md-admonition-icon--warning);
}

p.failure-title::before {
    background-color: #ff5252;
    -webkit-mask-image: var(--md-admonition-icon--failure);
    mask-image: var(--md-admonition-icon--failure);
}

p.danger-title::before {
    background-color: #ff1744;
    -webkit-mask-image: var(--md-admonition-icon--danger);
    mask-image: var(--md-admonition-icon--danger);
}

p.bug-title::before {
    background-color: #f50057;
    -webkit-mask-image: var(--md-admonition-icon--bug);
    mask-image: var(--md-admonition-icon--bug);
}

p.example-title::before {
    background-color: #7c4dff;
    -webkit-mask-image: var(--md-admonition-icon--example);
    mask-image: var(--md-admonition-icon--example);
}

p.quote-title::before {
    background-color: #9e9e9e;
    -webkit-mask-image: var(--md-admonition-icon--quote);
    mask-image: var(--md-admonition-icon--quote);
}

p.important-title::before {
    background-color: #ff5722;
    -webkit-mask-image: var(--md-admonition-icon--warning);
    mask-image: var(--md-admonition-icon--warning);
}

/* Content styling */
p.note-content,
p.abstract-content,
p.info-content,
p.tip-content,
p.success-content,
p.question-content,
p.warning-content,
p.failure-content,
p.danger-content,
p.bug-content,
p.example-content,
p.quote-content,
p.important-content {
    margin-top: 0;
}

.feedicon {
    width: 15px;
    vertical-align: middle;
    padding-left: 5px;
    padding-right: 5px;
}