:root {
    --text-color: #191919;
    --light-text-color: #444;
    --link-color: #1c88c1;
    --light-background-color: #f2f2f2;
    --light-border-color: #9e9e9e;
    --margin-y: 1.125rem;
    --inline-code-color: #b607c6;


    --note-color: #448aff;
    --tip-color: #1a7f37;
    --warning-color: #9a6700;
}

body {
    max-width: 40rem;
    margin: .375rem auto;
    color: var(--text-color);
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    overflow-wrap: break-word;
}


nav {

    img {
        display: inline;
    }

    ul {
        list-style: none;
        padding-inline: 0;
        display: flex;
        flex-wrap: wrap;
        margin-top: .375rem;
        margin-bottom: 2rem;
        column-gap: .875rem;
        align-items: center;
    }
}

footer {
    margin-top: 2rem;
    line-height: 1.75;
    text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1;
    font-family: monospace;
    margin-block-start: calc(1.75 * var(--margin-y));
    margin-block-end: var(--margin-y);

    code {
        font-size: .875em;
    }
}

h1 {
    font-size: 2rem;
    border-bottom: 3px dotted var(--light-border-color);
    padding-bottom: .25rem;
}

h2 {
    font-size: 1.5rem;
    border-bottom: 2px dotted var(--light-border-color);
    padding-bottom: .125rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1rem;
}

h5,
h6 {
    font-size: 1rem;
}

p {
    margin-block: var(--margin-y);

    code {
        background-color: var(--light-background-color);
        border-radius: .25em;
        padding: .125em;
        color: var(--inline-code-color);
    }
}

pre {
    margin-block: var(--margin-y);
}

pre,
code {
    font-family: monospace;
    overflow-x: auto;
    font-size: .875rem;
    max-width: 100%;
    line-height: 1.25;
}

div.highlight {
    padding: .25rem .5rem;
    border-radius: .375rem;
    color: black;
}

blockquote {
    display: block;
    border-left: .25rem solid var(--light-border-color);
    margin-left: 2rem;
    padding: .5rem 1rem;
    font-style: italic;
    font-size: .875rem;
    margin-block: var(--margin-y);

    p {
        margin: 0;
    }

    cite {
        font-style: normal;
        display: block;
        padding-left: 2rem;
    }

    cite::before {
        content: '—';
        padding-right: .35rem;
    }
}

.icon {
    height: 1.125rem;
    margin: 0 .125rem;
}

.icon-sm {
    margin: 0;
    padding: 0;
    height: .875rem;
}


a,
a:visited {
    color: var(--link-color);
}

a:hover {
    background-color: var(--light-background-color);
}

a:has(svg.icon):hover,
a:has(svg.icon) {
    text-decoration: none;
}

a.tag {
    font-size: .875rem;
    margin: 0 .125rem;
    word-spacing: -.2rem;
}

a.tag::before {
    content: '#';
    font-size: .75rem;
}

label {
    font-weight: bolder;
    display: inline-block;
    margin-block-start: var(--margin-y);
}

label,
.helptext {
    font-size: .875rem;

}

.helptext {
    display: block;
    font-style: italic;
}


input,
textarea {
    font-family: monospace;
    font-size: .875rem;
    line-height: 1.5;
    padding: 0 .25rem;
    box-sizing: border-box;
}

input[type="submit"] {
    display: block;
    margin: 1.5rem auto;
}

input[type="submit"]:hover {
    cursor: pointer;
}

input:not([type="submit"]) {
    background-color: transparent;
}

input:not([type="checkbox"]) {
    min-width: 15rem;
}

textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

li {
    p {
        margin-block: inherit;
    }
}



ul.task-list {
    padding-inline-start: 0;
    list-style: none;
}

li.task-list-item ul.task-list {
    padding-inline-start: 2rem;
}

div.note-list-item {
    margin-block: var(--margin-y) 0;
    border-left: solid var(--light-border-color) .125rem;
    border-right: solid var(--light-border-color) .125rem;
    border-radius: 1rem;
    padding: 1rem;

    h1 {
        margin-block: 0;
    }
}

.width-full {
    width: 100%;
}

/* Insert and Delete */
del,
ins {
    display: block;
    text-decoration: none;
    position: relative;
    padding-left: 1.5rem;
}

del {
    background-color: #fbb;
}

ins {
    background-color: #d4fcbc;
}

hr {
    margin-block-start: var(--margin-y);
    margin-block-end: var(--margin-y);
    color: var(--light-border-color)
}

del::before,
ins::before {
    position: absolute;
    left: .5rem;
}

del::before {
    content: "−";
}

ins::before {
    content: "+";
}

/* Table Formatting */
table {
    font-size: .875rem;
    width: 100%;
    border-collapse: collapse;
    text-indent: 0;

    th,
    td {
        padding: .375rem .25rem;
    }

    th {
        text-align: left;
    }

    td {
        border-bottom: 1px solid var(--light-border-color);
    }

    thead th {
        border-bottom: 2px solid var(--light-border-color) !important;
    }

    tfoot th {
        border-top: 2px solid var(--light-border-color) !important;
    }
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2rem auto;
}

/* Breakpoint for iPad */
@media (max-width: 768px) {
    body {
        width: 97vw;
        line-height: 1.25;
    }

    nav {
        img {
            display: block;
            max-width: 100%;
            margin: 0 auto;
        }
    }

    ul.post-list {
        padding-inline-start: 1.25rem;
    }
}


.post-edit-links {
    margin-left: 1rem;
    white-space: nowrap;

    svg {
        stroke: red !important;
    }

    a {
        text-decoration: none !important;
    }
}

ul.post-list {
    list-style: none;
    padding-inline-start: 0;

    li {
        margin-block: 1rem 0;
    }
}

.post-meta {
    font-size: .75rem;
    display: flex;
    column-gap: .5rem;
    flex-wrap: wrap;
    margin-left: .25rem;
    margin-top: .25rem;

    span {
        white-space: nowrap;

    }

    time {
        font-family: monospace;
        word-spacing: -.375em;
    }

    a {
        text-decoration: underline;
    }

    svg {
        stroke: var(--light-text-color);
        margin-right: -.25rem;
        margin-bottom: -.125rem;
    }
}


.admonition {
    padding: .125rem .5rem;
    margin: 0 1rem;
    margin-block: var(--margin-y);
    border-left: 5px solid var(--light-border-color);
    background: var(--light-background-color);
    border-radius: 5px;
    font-size: .875rem;
    overflow: hidden;

    p {
        margin: 0;
        margin-block: .5rem;
    }

    .admonition-title {
        font-weight: bold;
        margin: 0;
    }

    .admonition-title::before {
        content: "🔎";
        margin-right: 0.5rem;
    }
}

.admonition.warning {
    .admonition-title::before {
        content: "⚠️";
    }
}

ul.pinned-note-list {
    list-style: none;

    li::before {
        content: '📌';
    }
}