@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Luxurious+Roman&display=swap');


body {
    --font-default: 'EB+Garamond';
    --font-text-theme: var(--font-default);
    --font-text-size-mobile: calc(0.95rem + 0.30vw);
    --font-primary-sans: ui-sans-serif,-apple-system,BlinkMacSystemFont,"Roboto","Helvetica","Arial","Segoe UI","Inter","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Microsoft YaHei Light",sans-serif;
    --font-secondary-sans: Helvetica,-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;
    --font-primary-serif: Georgia,'Times New Roman',Times,serif;
    --font-secondary-serif: "Merriweather",'Times New Roman',Times,serif;
    --font-text-size: calc(0.8rem + 0.30vw);
    --font-smallest: 0.8em;
    --font-smaller: 0.875em;
    --font-small: 0.933em;
    --font-inputs: 0.933em;
    --normal-weight: 400;
    --bold-weight: 600;
    --link-weight: inherit;
    --cards-min-width: 180px;
    --cards-max-width: 1fr;
    --cards-mobile-width: 180px;
    --cards-image-height: 400px;
    --cards-padding: 1.2em;
    --cards-image-fit: contain;
    --cards-background: rgba(215, 190, 0, 0.5);
    --cards-border-width: 1px;
    --cards-aspect-ratio: auto;
    --cards-columns: repeat(auto-fit, minmax(var(--cards-min-width), var(--cards-max-width)));
    --image-radius: 8px;
    --img-grid-fit: cover;
    --img-grid-background: transparent;
    --img-grid-gap: 0.5rem;
    --img-zoom-background: rgba(0,0,0,0.6);
    --img-zoom-max-width: 96%;
    --img-zoom-max-height: 90vh;
    --img-zoom-in-cursor: zoom-in;
    --img-zoom-out-cursor: zoom-out;
    --icon-muted: 0.5;
    --border-width: 1px;
    --folding-offset: 16px;
    --nested-padding: 30px;
    --list-padding: 2em;
    --list-spacing: 0.075em
}

@media (max-width: 400pt) {
    body {
        --cards-min-width:var(--cards-mobile-width);
        --img-grid-gap: 0.25rem
    }
}

.theme-light {
    --color-red-rgb: 175,48,41;
    --color-orange-rgb: 188,82,21;
    --color-yellow-rgb: 173,131,1;
    --color-green-rgb: 102,128,11;
    --color-cyan-rgb: 36,131,123;
    --color-blue-rgb: 32,94,166;
    --color-purple-rgb: 94,64,157;
    --color-pink-rgb: 160,47,111;
    --color-red: #AF3029;
    --color-orange: #BC5215;
    --color-yellow: #AD8301;
    --color-green: #66800B;
    --color-cyan: #24837B;
    --color-blue: #205EA6;
    --color-purple: #5E409D;
    --color-pink: #A02F6F
}

.theme-dark {
    --color-red-rgb: 209,77,65;
    --color-orange-rgb: 218,112,44;
    --color-yellow-rgb: 208,162,21;
    --color-green-rgb: 135,154,57;
    --color-cyan-rgb: 58,169,159;
    --color-blue-rgb: 67,133,190;
    --color-purple-rgb: 139,126,200;
    --color-pink-rgb: 206,93,151;
    --color-red: #D14D41;
    --color-orange: #DA702C;
    --color-yellow: #D0A215;
    --color-green: #879A39;
    --color-cyan: #3AA99F;
    --color-blue: #4385be;
    --color-purple: #8B7EC8;
    --color-pink: #CE5D97
}

.theme-light {
    --base-h: 360;
    --base-s: 3%;
    --base-l: 60%;
    --accent-h: 175;
    --accent-s: 57%;
    --accent-l: 33%;
    --bg1: #FFFCF0; /* MAIN BACKGROUND COLOR */
    --bg2: #F2F0E5; /* SIDEBAR COLOR */
    --bg3: rgba(16,15,15,0.05);
    --ui1: #E6E4D9;
    --ui2: #DAD8CE;
    --ui3: #CECDC3;
    --tx1: #100F0F;
    --tx2: #6F6E69;
    --tx3: #B7B5AC;
    --hl1: rgba(187,220,206,0.3);
    --hl2: rgba(247,209,61,0.3)
}

.theme-dark {
    --base-h: 360;
    --base-s: 3%;
    --base-l: 6%;
    --accent-h: 175;
    --accent-s: 49%;
    --accent-l: 45%;
    --bg1: #1e1611;
    --bg2: #150e08;
    --bg3: rgba(254,252,240,0.05);
    --ui1: #282726;
    --ui2: #343331;
    --ui3: #403E3C;
    --tx1: #deded4;
    --tx2: #878580;
    --tx3: #575653;
    --hl1: rgba(30,95,91,0.3);
    --hl2: rgba(213,159,17,0.3)
}

.theme-light {
    --mono100: black;
    --mono0: white
}

.theme-dark {
    --mono100: white;
    --mono0: black
}

.theme-dark,.theme-light {
    --h1-color: var(--text-normal);
    --h2-color: var(--text-normal);
    --h3-color: var(--text-normal);
    --h4-color: var(--text-normal);
    --h5-color: var(--text-normal);
    --h6-color: var(--text-muted)
}

.published-container {
    --outline-heading-color-active: var(--tx1);
    --sidebar-left-background: var(--bg2);
    --sidebar-left-width: 275px; /* Adjust this value for a smaller sidebar */
}

.theme-dark,.theme-light {
    --background-primary: var(--bg1);
    --background-primary-alt: var(--bg2);
    --background-secondary: var(--bg2);
    --background-secondary-alt: var(--bg1);
    --background-tertiary: var(--bg3);
    --background-table-rows: var(--bg2);
    --background-modifier-form-field: var(--bg1);
    --background-modifier-form-field-highlighted: var(--bg1);
    --background-modifier-accent: var(--ax3);
    --background-modifier-border: var(--ui1);
    --background-modifier-border-hover: var(--ui2);
    --background-modifier-border-focus: var(--ui3);
    --background-modifier-success: var(--color-green);
    --background-divider: var(--ui1);
    --interactive-hover: var(--ui1);
    --interactive-accent: var(--ax3);
    --interactive-accent-hover: var(--ax3);
    --quote-opening-modifier: var(--ui2);
    --modal-border: var(--ui2);
    --icon-color: var(--tx2);
    --icon-color-hover: var(--tx2);
    --icon-color-active: var(--tx1);
    --icon-hex: var(--mono0);
    --text-normal: var(--tx1);
    --text-bold: var(--tx1);
    --text-italic: var(--tx1);
    --text-muted: var(--tx2);
    --text-faint: var(--tx3);
    --text-accent: var(--ax1);
    --text-accent-hover: var(--ax2);
    --text-on-accent: white;
    --text-selection: var(--hl1);
    --text-code: var(--tx4);
    --text-error: var(--color-red);
    --text-blockquote: var(--tx2);
    --title-color: var(--tx1);
    --title-color-inactive: var(--tx2)
}

.theme-light {
    --interactive-normal: var(--bg1);
    --interactive-accent-rgb: 220,220,220;
    --text-highlight-bg: rgba(255, 225, 0, 0.5);
    --text-highlight-bg-active: rgba(0, 0, 0, 0.1);
    --background-modifier-error: rgba(255,0,0,0.14);
    --background-modifier-error-hover: rgba(255,0,0,0.08);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --btn-shadow-color: rgba(0, 0, 0, 0.05)
}

.theme-dark {
    --interactive-normal: var(--bg3);
    --interactive-accent-rgb: 66,66,66;
    --text-highlight-bg: rgba(255, 177, 80, 0.3);
    --text-highlight-bg-active: rgba(255, 255, 255, 0.1);
    --background-modifier-error: rgba(255,20,20,0.12);
    --background-modifier-error-hover: rgba(255,20,20,0.18);
    --background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --btn-shadow-color: rgba(0, 0, 0, 0.2)
}

.alt-title .page-header,.hide-title .page-header {
    display: none
}

.hide-title.markdown-preview-view div:nth-child(4) h1 {
    margin-top: .25em;
    font-variant: var(--page-title-variant);
    letter-spacing: -.015em;
    line-height: var(--page-title-line-height);
    font-size: var(--page-title-size);
    color: var(--page-title-color);
    font-weight: var(--page-title-weight);
    font-style: var(--page-title-style);
    font-family: 'Luxurious Roman';
    border: none
}

.h1-borders h1 {
    border-bottom: 1px solid var(--ui1);
    padding-bottom: .0em
}

.table-col-1-150.markdown-preview-view td:first-child {
    width: 150px
}

.table-col-1-200.markdown-preview-view td:first-child {
    width: 200px
}

.table-100 table,.table-cards table,.table-full table {
    width: 100%
}

.table-small table {
    --table-text-size: 85%
}

.table-tiny table {
    --table-text-size: 75%
}

.row-hover {
    --table-edge-cell-padding-first: 10px
}

.row-alt {
    --table-row-alt-background: var(--background-table-rows);
    --table-edge-cell-padding-first: 10px
}

.col-alt .markdown-rendered:not(.cards) {
    --table-column-alt-background: var(--background-table-rows)
}

.table-tabular table {
    font-variant-numeric: tabular-nums
}

.table-lines {
    --table-border-width: var(--border-width);
    --table-header-border-width: var(--border-width);
    --table-column-first-border-width: var(--border-width);
    --table-column-last-border-width: var(--border-width);
    --table-row-last-border-width: var(--border-width);
    --table-edge-cell-padding: 10px
}

.table-nowrap {
    --table-white-space: nowrap
}

.table-nowrap .table-wrap,.trim-cols {
    --table-white-space: normal
}

.table-numbers table {
    counter-reset: section
}

.table-numbers table>thead>tr>th:first-child::before {
    content: " ";
    padding-right: .5em;
    display: inline-block;
    min-width: 2em
}

.table-numbers table>tbody>tr>td:first-child::before {
    counter-increment: section;
    content: counter(section) " ";
    text-align: center;
    padding-right: .5em;
    display: inline-block;
    min-width: 2em;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums
}

.row-lines-off .table-view-table>tbody>tr>td,.row-lines-off table tbody>tr:last-child>td,.row-lines-off table tbody>tr>td {
    border-bottom: none
}

.row-lines .table-view-table>tbody>tr>td,.row-lines table tbody>tr>td {
    border-bottom: var(--table-border-width) solid var(--table-border-color)
}

.row-lines table tbody>tr:last-child>td {
    border-bottom: none
}

.col-lines .table-view-table thead>tr>th:not(:last-child),.col-lines .table-view-table>tbody>tr>td:not(:last-child),.col-lines table tbody>tr>td:not(:last-child) {
    border-right: var(--table-border-width) solid var(--background-modifier-border)
}

.row-hover {
    --table-row-background-hover: hsla( var(--accent-h), 50%, 80%, 20% )
}

.theme-dark .row-hover,.theme-dark.row-hover {
    --table-row-background-hover: hsla( var(--accent-h), 30%, 40%, 20% )
}

img[src$="#outline"],span[src$="#outline"] img {
    border: 1px solid var(--ui1)
}

.published-container img[src$="#interface"],.published-container span[src$="#interface"] img {
    border: 1px solid var(--ui1);
    box-shadow: 0 .5px .9px rgba(0,0,0,.021),0 1.3px 2.5px rgba(0,0,0,.03),0 3px 6px rgba(0,0,0,.039),0 10px 20px rgba(0,0,0,.06);
    margin-top: 10px;
    margin-bottom: 15px;
    border-radius: var(--radius-m)
}

.theme-dark img[src$="#invert"],.theme-dark span[src$="#invert"] img {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: screen
}

.theme-light img[src$="#invertW"],.theme-light span[src$="#invertW"] img {
    filter: invert(1) hue-rotate(180deg)
}

img[src$="#circle"],span[src$="#circle"] img {
    border-radius: 50%;
    aspect-ratio: 1/1
}

body {
    --img-grid-fit: cover;
    --img-grid-background: transparent;
    --img-grid-gap: 0.5rem
}

@media (max-width: 400pt) {
    body {
        --img-grid-gap:0.25rem
    }
}

.img-grid-ratio {
    --image-grid-fit: contain
}

.img-grid .image-embed.is-loaded {
    line-height: 0;
    display: flex;
    align-items: stretch
}

.img-grid .image-embed.is-loaded img {
    background-color: var(--image-grid-background)
}

.img-grid .image-embed.is-loaded img:active {
    background-color: transparent
}

.img-grid .markdown-preview-section>div:has(img) .image-embed~br,.img-grid .markdown-preview-section>div:has(img) img~br,.img-grid .markdown-preview-section>div:has(img) p:empty {
    display: none
}

.img-grid .markdown-preview-section div:has(>.image-embed~.image-embed),.img-grid .markdown-preview-section div:has(>img~img),.img-grid .markdown-preview-section p:has(>.image-embed~.image-embed),.img-grid .markdown-preview-section p:has(>.image-embed~img),.img-grid .markdown-preview-section p:has(>img~.image-embed),.img-grid .markdown-preview-section p:has(>img~img) {
    display: grid;
    margin-block-start:var(--img-grid-gap);margin-block-end: var(--img-grid-gap);
    grid-column-gap: var(--img-grid-gap);
    grid-row-gap: 0;
    grid-template-columns: repeat(auto-fit,minmax(0,1fr))
}

.img-grid .markdown-preview-section div:has(>.image-embed~.image-embed)>img,.img-grid .markdown-preview-section div:has(>img~img)>img,.img-grid .markdown-preview-section p:has(>.image-embed~.image-embed)>img,.img-grid .markdown-preview-section p:has(>.image-embed~img)>img,.img-grid .markdown-preview-section p:has(>img~.image-embed)>img,.img-grid .markdown-preview-section p:has(>img~img)>img {
    object-fit: var(--image-grid-fit);
    align-self: stretch
}

.img-grid .markdown-preview-section div:has(>.image-embed~.image-embed)>.internal-embed img,.img-grid .markdown-preview-section div:has(>img~img)>.internal-embed img,.img-grid .markdown-preview-section p:has(>.image-embed~.image-embed)>.internal-embed img,.img-grid .markdown-preview-section p:has(>.image-embed~img)>.internal-embed img,.img-grid .markdown-preview-section p:has(>img~.image-embed)>.internal-embed img,.img-grid .markdown-preview-section p:has(>img~img)>.internal-embed img {
    object-fit: var(--image-grid-fit);
    align-self: center
}

.img-grid .markdown-preview-section>div:has(img)>p {
    display: grid;
    margin-block-start:var(--img-grid-gap);margin-block-end: var(--img-grid-gap);
    grid-column-gap: var(--img-grid-gap);
    grid-row-gap: 0;
    grid-template-columns: repeat(auto-fit,minmax(0,1fr))
}

.img-grid .markdown-preview-section>div:has(img)>p>br {
    display: none
}

.img-zoom .image-embed {
    cursor: zoom-in
}

.lightbox {
    z-index: 99999;
    position: fixed;
    width: 100%;
    height: 100%;
    max-width: 100%;
    top: 0;
    left: 0;
    background: var(--img-zoom-background);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

.lightbox .internal-embed.image-embed {
    max-width: var(--img-zoom-max-width);
    max-height: var(--img-zoom-max-height);
    cursor: var(--img-zoom-in-cursor);
    display: flex
}

.lightbox img {
    cursor: var(--img-zoom-out-cursor);
    object-fit: contain;
    width: auto
}

.cards table {
    --table-width: 100%;
    --table-edge-cell-padding-first: calc(var(--cards-padding)/2);
    --table-edge-cell-padding-last: calc(var(--cards-padding)/2);
    --table-cell-padding: calc(var(--cards-padding)/3) calc(var(--cards-padding)/2);
    line-height: 1.3
}

.cards table tbody {
    clear: both;
    padding: .5rem 0;
    display: grid;
    grid-template-columns: var(--cards-columns);
    grid-column-gap: .75rem;
    grid-row-gap: .75rem
}

.cards table>tbody>tr {
    background-color: var(--cards-background);
    border: var(--cards-border-width) solid var(--background-modifier-border);
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 0 calc(var(--cards-padding)/3) 0;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow .15s linear;
    max-width: var(--cards-max-width)
}

.cards table>tbody>tr:hover {
    border: var(--cards-border-width) solid var(--background-modifier-border-hover);
    box-shadow: 0 4px 6px 0 rgba(0,0,0,.05),0 1px 3px 1px rgba(0,0,0,.025);
    transition: box-shadow .15s linear
}

.cards table tbody>tr>td:first-child {
    font-weight: var(--bold-weight);
    border: none
}

.cards table tbody>tr>td:first-child a {
    display: block
}

.cards table tbody>tr>td:last-child {
    border: none
}

.cards table tbody>tr>td:not(:first-child) {
    font-size: calc(var(--table-text-size) * .9);
    color: var(--text-muted)
}

.cards table tbody>tr>td>* {
    padding: calc(var(--cards-padding)/3) 0
}

.cards table tbody>tr>td:not(:last-child):not(:first-child) {
    padding: 4px 0;
    border-bottom: 1px solid var(--background-modifier-border);
    width: calc(100% - var(--cards-padding));
    margin: 0 calc(var(--cards-padding)/2)
}

.cards table tbody>tr>td a {
    text-decoration: none
}

.cards table tbody>tr>td>button {
    width: 100%;
    margin: calc(var(--cards-padding)/2) 0
}

.cards table tbody>tr>td:last-child>button {
    margin-bottom: calc(var(--cards-padding)/6)
}

.cards table tbody>tr>td>ul {
    width: 100%;
    padding: .25em 0!important;
    margin: 0 auto!important
}

.cards table tbody>tr>td:has(img) {
    padding: 0!important;
    background-color: var(--background-secondary);
    display: block;
    margin: 0;
    width: 100%
}

.cards table tbody>tr>td img {
    aspect-ratio: var(--cards-aspect-ratio);
    width: 100%;
    object-fit: var(--cards-image-fit);
    max-height: var(--cards-image-height);
    background-color: var(--background-secondary);
    vertical-align: bottom
}

.cards table thead {
    display: none
}

.list-cards.markdown-preview-view .list-bullet,.list-cards.markdown-preview-view .list-collapse-indicator,.list-cards.markdown-preview-view.markdown-rendered.show-indentation-guide li>ul::before {
    display: none
}

.list-cards.markdown-preview-view div>ul {
    display: grid;
    gap: .75rem;
    grid-template-columns: var(--cards-columns);
    padding: 0;
    line-height: 1.5;
}

.list-cards.markdown-preview-view div>ul>li {
    background-color: var(--cards-background);
    padding: calc(var(--cards-padding)/2);
    border-radius: 0px;
    border: var(--cards-border-width) solid var(--background-modifier-border);
    overflow: hidden
}

.list-cards.markdown-preview-view div>ul .image-embed {
    padding: 0;
    display: block;
    background-color: var(--background-secondary);
    border-radius: 0px;
}

.list-cards.markdown-preview-view div>ul .image-embed img {
    aspect-ratio: var(--cards-aspect-ratio);
    object-fit: var(--cards-image-fit);
    max-height: var(--cards-image-height);
    background-color: var(--background-secondary);
    vertical-align: bottom
}

.list-cards.markdown-preview-view div>ul>li>a {
    --link-decoration: none;
    --link-external-decoration: none;
    font-weight: var(--bold-weight)
}

.list-cards.markdown-preview-view div ul>li:hover {
    border-color: var(--background-modifier-border-hover)
}

.list-cards.markdown-preview-view div ul ul {
    display: block;
    width: 100%;
    color: var(--text-muted);
    font-size: var(--font-smallest);
    margin: calc(var(--cards-padding)/-4) 0;
    padding: calc(var(--cards-padding)/2) 0
}

.list-cards.markdown-preview-view div ul ul ul {
    padding-bottom: calc(var(--cards-padding)/4)
}

.list-cards.markdown-preview-view div ul ul>li {
    display: block
}

.cards.cards-16-9,.list-cards.cards-16-9 {
    --cards-aspect-ratio: 16/9
}

.cards.cards-1-1,.list-cards.cards-1-1 {
    --cards-aspect-ratio: 1/1
}

.cards.cards-2-1,.list-cards.cards-2-1 {
    --cards-aspect-ratio: 2/1
}

.cards.cards-2-3,.list-cards.cards-2-3 {
    --cards-aspect-ratio: 2/3
}

.cards.cards-cols-1,.list-cards.cards-cols-1 {
    --cards-columns: repeat(1, minmax(0, 1fr))
}

.cards.cards-cols-2,.list-cards.cards-cols-2 {
    --cards-columns: repeat(2, minmax(0, 1fr))
}

.cards.cards-cover,.list-cards.cards-cover {
    --cards-image-fit: cover
}

.cards.cards-align-bottom table.dataview tbody>tr>td:last-child,.list-cards.cards-align-bottom table.dataview tbody>tr>td:last-child {
    margin-top: auto
}

@media (max-width: 400pt) {
    .cards table.dataview tbody>tr>td:not(:first-child) {
        font-size:80%
    }
}

@media (min-width: 400pt) {
    .cards-cols-3 {
        --cards-columns:repeat(3, minmax(0, 1fr))
    }

    .cards-cols-4 {
        --cards-columns: repeat(4, minmax(0, 1fr))
    }

    .cards-cols-5 {
        --cards-columns: repeat(5, minmax(0, 1fr))
    }

    .cards-cols-6 {
        --cards-columns: repeat(6, minmax(0, 1fr))
    }

    .cards-cols-7 {
        --cards-columns: repeat(7, minmax(0, 1fr))
    }

    .cards-cols-8 {
        --cards-columns: repeat(8, minmax(0, 1fr))
    }
}

.markdown-preview-view code {
    color: var(--tx4);
    font-size: .85em
}

.theme-light :not(pre)>code[class*=language-],.theme-light pre[class*=language-] {
    background-color: var(--bg2)
}

iframe,img {
    border-radius: var(--image-radius)
}

ol>li::marker,ul>li::marker {
    color: var(--tx3)
}

body {
    --table-header-border-width: 0;
    --table-column-first-border-width: 0;
    --table-column-last-border-width: 0;
    --table-row-last-border-width: 0;
    --table-edge-cell-padding-first: 0;
    --table-edge-cell-padding-last: 10px;
    --table-cell-padding: 4px 10px;
    --table-header-size: var(--table-text-size)
}

.markdown-preview-view table {
    border: var(--border-width) solid var(--border-color);
    border-collapse: collapse;
    margin-block-start:1em}

.markdown-preview-view td,.markdown-preview-view th {
    padding: var(--table-cell-padding)
}

.markdown-preview-view td:first-child,.markdown-preview-view th:first-child {
    padding-left: var(--table-edge-cell-padding-first)
}

.markdown-preview-view td:last-child,.markdown-preview-view th:last-child {
    padding-right: var(--table-edge-cell-padding-last)
}

.markdown-preview-view .tag:not(.token) {
    background-color: transparent;
    border: 1px solid var(--ui1);
    color: var(--tx2);
    font-size: var(--font-small)
}

.tooltip {
    display: none
}

body {
    --flexoki-blue-200: 146,191,219;
    --flexoki-blue-300: 102,160,200;
    --flexoki-red-500: 203,62,52;
    --flexoki-yellow-150: 241,214,126;
    --flexoki-yellow-300: 223,180,49;
    --flexoki-yellow-400: 208,162,21;
    --flexoki-purple-400: 139,126,200;
    --flexoki-gray: 230,228,217;
    --tag-color: var(--text-normal);
    --tag-size: var(--font-smallest);
    --tag-radius: var(--radius-s);
    --tag-color-hover: var(--color-base-10);
    --tag-padding-x: 4px;
    --tag-padding-y: 1px;
    --h1-size: calc(2.8em + 0.55vw); /* HEADER 1 SIZE */
    --h2-size: calc(1.40em + 0.35vw);
    --h3-size: calc(1.3em + 0.25vw);
    --h4-size: calc(1.2em + 0.15vw);
    --h5-size: calc(1.1em + 0.20vw);
    --h6-size: calc(0.8em + 0.1vw);
    --h1-weight: 100;
    --h6-weight: 400;
    --h2-weight: 300;
    --h3-weight: 300;
    --h4-weight: 300;
    --h5-weight: 300;
    --h1-line-height: .75;
    --h2-line-height: 1.1;
    --h3-line-height: var(--line-height-tight);
    --h4-line-height: var(--line-height-tight);
    --h5-line-height: 1.15;
    --h6-line-height: var(--line-height-tight);
    --h6-variant: var(--all-small-caps)
}

body.theme-light {
    --color-base-55: #a3a199;
    --color-base-80: #555450;
    --tag-background: var(--background-secondary);
    --tag-background-hover: var(--color-base-50);
    --sidebar-left-border-width: 0px;
    --sidebar-right-border-width: 0px
}

body.theme-dark {
    --color-base-55: #63615d;
    --color-base-80: #abaaa4;
    --flexoki-gray: 40,39,38;
    --tag-background: var(--color-base-35);
    --tag-background-hover: var(--color-base-70);
    --sidebar-left-border-width: 1px;
    --sidebar-right-border-width: 1px
}

.theme-light {
    --background-reader: var(--background-primary);
    --blockquote-font-style: italic;
    --blockquote-border-color: var(--color-base-25);
    --blockquote-border-thickness: 1px;
    --color-ligthorange: rgb(224, 150, 31);
    --color-faintorange: rgb(204, 146, 83);
    --color-darkorange: rgb(211, 117, 13);
    --color-wine: #9a4a42;
    --color-oldpink: #ac6a8c;
    --color-wine-rgb: 154,74,66;
    --color-oldpink-rgb: 172,106,140;
    --color-gray-rgb: 111,110,105;
    --color-base: 0,0,0;
    --code-background: #efefe8;
    --component-title-color: var(--text-normal);
    --embed-border-left: 1px solid var(--blockquote-border-color);
    --graph-node: var(--color-ligthorange);
    --graph-node-unresolved: rgba(0, 0, 0, 1.00);
    --graph-text: var(--color-base-60);
    --img-zoom-color-background: rgba(250, 250, 244, 0.85);
    --interactive-accent: var(--color-darkorange);
    --link-color: rgb(43, 105, 198);
    --link-external-color: rgb(43, 105, 198);
    --link-external-decoration: none;
    --link-decoration: none;
    --blockquote-border-thickness: 1px;
    --link-unresolved-color: var(--text-faint);
    --link-unresolved-decoration-style: wavy;
    --logo-width: 70%;
    --sidebar-right-background: var(--color-base-10);
    --text-light: var(--color-base-00);
    --text-accent: var(--color-faintorange);
    --text-accent-hover: var(--color-ligthorange);
    --text-selection: var(--interactive-accent)
}

.theme-dark {
    --background-reader: var(--background-primary);
    --background-modifier-border: var(--color-base-35);
    --blockquote-font-style: italic;
    --blockquote-border-color: var(--color-base-50);
    --color-wine: #b34b42;
    --color-oldpink: #A02F6F;
    --color-wine-rgb: 179,75,66;
    --color-oldpink-rgb: 174,88,132;
    --color-gray-rgb: 218,216,206;
    --color-base: 255,255,255;
    --code-background: var(--background-secondary);
    --embed-border-left: 1px solid var(--blockquote-border-color);
    --graph-node: rgb(56, 166, 222);
    --graph-text: rgba(136, 159, 170, 1.00);
    --graph-line: rgba(118, 117, 117, 0.6);
    --graph-node-unresolved: #fd7878;
    --interactive-accent: #4690b5;
    --link-color: #437bc4;
    --link-external-color: rgb(43, 105, 198);
    --link-external-decoration: none;
    --link-decoration-thickness: auto;
    --link-decoration-line: none;
    --link-unresolved-color: var(--text-faint);
    --link-unresolved-decoration-color: var(--text-faint);
    --link-unresolved-decoration-style: wavy;
    --logo-width: 70%;
    --img-zoom-color-background: rgba(0, 0, 0, 0.85);
    --text-accent: rgb(96 184 228);
    --text-accent-hover: #50d9fc;
    --text-selection: var(--interactive-accent);
    --text-light: var(--color-base-100)
}

.published-container {
    --background-color: var(--background-primary);
    --code-radius: var(--radius-m);
    --footer-display: fixed;
    --page-title-family: var(--font-primary-sans);
    --page-title-size: 14px;
    --page-title-weight: 500;
    --page-title-line-height: 1.1;
    --page-title-variant: all-small-caps;
    --page-title-color: var(--color-base-60);
    --page-title-style: normal;
    --sidebar-right-background: var(--background-primary);
    --site-name-size: 14px; /* SITE NAME IN SIDEBAR */
    --site-name-color: var(--text-accent);
    --site-name-color-hover: var(--color-base-80);
    --site-name-weight: 600
}


.page-header h1,
.markdown-preview-view h1,
.publish-article-heading {
    font-family: var(--page-title-font) !important;
}

html {
    -webkit-text-size-adjust: 100%
}

::-moz-selection {
    color: #fff
}

::selection {
    color: #fff
}

.site-body-center-column {
    position: relative;
    box-shadow: 0 0 10px 3px rgba(0,0,0,.1)
}

.page-header {
    letter-spacing: 30
}

.publish-renderer:has(:active) {
    z-index: 99999
}

.site-header {
    border-bottom: 0
}

.sliding-windows .render-container {
    background-color: var(--background-primary)
}

.sliding-windows .publish-renderer,.sliding-windows .site-body-right-column {
    box-shadow: none
}

button .external-link {
    background-image: none
}

button {
    cursor: pointer
}

button.center {
    display: flex
}

button:not(.clickable-icon) {
    color: var(--background-primary);
    background-color: var(--interactive-accent);
    padding: 15px;
    margin: 40px auto
}

button:not(.clickable-icon):hover {
    background-color: var(--text-accent);
    color: var(--background-primary)
}

button:not(.clickable-icon) a.external-link,button:not(.clickable-icon) a.internal-link {
    color: var(--background-primary);
    padding: 5px 20px;
    border: 0;
    padding: 10px 30px;
    margin: 0 auto;
    text-decoration: none;
    font-weight: 700
}

button:not(.clickable-icon) a.external-link:hover,button:not(.clickable-icon) a.internal-link:hover {
    color: var(--background-primary);
    text-decoration: none
}

@media screen and (min-width: 751px) {
    #toggle-sidebar-btn {
        margin:0;
        width: 30px;
        background: 0 0;
        padding: 5px;
        position: fixed;
        right: 5px;
        top: 5px;
        background: 0 0;
        border-radius: 0px;
        border: 0;
        box-shadow: none;
        background: var(--background-primary);
        opacity: 1;
        color: var(--component-title-color);
        z-index: 10
    }

    .theme-dark.sliding-windows #toggle-sidebar-btn {
        top: 25px
    }

    #chooser {
        position: absolute;
        bottom: 5px;
        right: 0;
        background-color: var(--background-color);
        padding: 7px 10px 2px 10px;
        border-radius: 0px;
    }

    #chooser a {
        color: var(--text-muted);
        margin-right: 5px
    }

    #chooser a:hover {
        color: var(--text-accent-hover)
    }

    #chooser a:last-child {
        margin-right: 0
    }

    #chooser svg {
        width: 18px;
        height: auto
    }

    .sliding-windows #toggle-sidebar-btn {
        right: 287px;
        top: 25px
    }

    #toggle-sidebar-btn:hover {
        color: var(--color-base-100);
        background: var(--background-secondary)
    }

    #toggle-sidebar-btn:hover {
        cursor: pointer
    }

    .published-container:has(.reader-view).is-readable-line-width:not(.has-navigation).has-graph .publish-renderer>.markdown-preview-view>.markdown-preview-sizer,.published-container:has(.reader-view).is-readable-line-width:not(.has-navigation).has-outline .publish-renderer>.markdown-preview-view>.markdown-preview-sizer {
        margin-right: calc((100vw - var(--page-width))/ 2)!important
    }

    .site-body:has(.reader-view) #toggle-sidebar-btn {
        color: var(--component-title-color)
    }

    .site-body:has(.reader-view) #toggle-sidebar-btn::before {
        content: "Press r to switch view";
        position: absolute;
        top: 82px;
        right: -46px;
        transform: rotate(90deg);
        color: var(--text-faint);
        font-size: var(--font-smaller)
    }

    .site-body:has(.reader-view) .published-container .markdown-rendered h1 {
        margin-top: 0
    }

    .site-body:has(.reader-view) .markdown-preview-view {
        font-size: calc(.8rem + .3vw)
    }

    .site-body:has(.reader-view) #toggle-sidebar-btn {
        top: 5px;
        background: 0 0
    }

    .site-body:has(.reader-view) #toggle-sidebar-btn:hover {
        background: 0 0
    }

    .sliding-windows .site-body:has(.reader-view) #toggle-sidebar-btn {
        right: 5px
    }

    .published-container:has(.reader-view) .site-header {
        display: block;
        position: fixed;
        top: 5px;
        right: 30px;
        z-index: 10;
        height: auto;
        padding: 5px 10px
    }

    .published-container:has(.reader-view) .site-header .site-header-text::after {
        display: none
    }

    .sliding-windows:has(.reader-view) .publish-renderer,.sliding-windows:has(.reader-view) .render-container,body:has(.reader-view) {
        background-color: var(--background-reader)
    }

    .sliding-windows:has(.reader-view.white) .publish-renderer,.sliding-windows:has(.reader-view.white) .render-container,body:has(.reader-view.white) {
        background-color: #fff
    }

    .site-body:has(.reader-view) .render-container-inner {
        margin: 0 auto
    }

    body:not(.sliding-windows):has(.reader-view) .is-readable-line-width.has-outline.has-navigation .publish-renderer>.markdown-preview-view>.markdown-preview-sizer {
        margin-right: inherit
    }

    body:not(.sliding-windows):has(.reader-view) .publish-renderer>.markdown-preview-view>.markdown-preview-sizer {
        margin: 0 auto
    }

    .sliding-windows div.hover-popover.is-loaded .publish-renderer {
        width: inherit!important;
        flex: inherit!important
    }

    .sliding-windows .published-container.has-graph .site-body:has(.reader-view) .site-body-center-column,.sliding-windows .site-body:has(.landing) .site-body-center-column,.sliding-windows .site-body:has(.reader-view) .site-body-center-column {
        padding-right: 40px
    }

    .site-body:has(.landing) .site-body-center-column,.site-body:has(.reader-view) .site-body-center-column {
        padding-left: 0;
        box-shadow: none
    }

    .site-body:has(.reader-view) .graph-view-outer .published-section-header,.site-body:has(.reader-view) .mod-footer,.site-body:has(.reader-view) .nav-view-outer,.site-body:has(.reader-view) .outline-view-outer,.site-body:has(.reader-view) .page-header,.site-body:has(.reader-view) .search-view-container,.site-body:has(.reader-view) .site-body-left-column,.site-body:has(.reader-view) .site-body-left-column-site-logo,.site-body:has(.reader-view) .site-body-left-column-site-name,.site-body:has(.reader-view) .site-body-right-column,.site-body:has(.reader-view) .site-footer {
        display: none
    }
}

.site-body:has(.reader-view) h1 {
    font-size: calc(3.4em + .55vw)
}

@media screen and (max-width: 750px) {
    #toggle-sidebar-btn {
        display:none
    }

    .site-body:has(.reader-view) .site-body-left-column {
        display: flex!important
    }

    .markdown-rendered .callout-content ol>li,.markdown-rendered .callout-content ul>li {
        margin-inline-start:1.25em}
}

@media screen and (max-width: 1024px) {
    #toggle-sidebar-btn {
        right:10px
    }
}

::-webkit-scrollbar-track:has(.reader-view) {
    background: rgba(14,13,13,0)
}

.site-body:has(.landing) .callout,.site-body:has(.landing) h1,.site-body:has(.landing) h2,.site-body:has(.landing) h3,.site-body:has(.landing) h4,.site-body:has(.landing) h5,.site-body:has(.landing) h6,.site-body:has(.landing) li,.site-body:has(.landing) p {
    text-align: center
}

.site-body:has(.landing) li {
    list-style-position: inside;
    list-style: none
}

.site-body:has(.landing)>li:before {
    content: "— "
}

.site-body:has(.landing)>li:after {
    content: " —"
}

.site-body:has(.landing) .site-header {
    right: 5px
}

.site-body:has(.landing) #chooser,.site-body:has(.landing) #toggle-sidebar-btn,.site-body:has(.landing) .graph-view-outer .published-section-header,.site-body:has(.landing) .mod-footer,.site-body:has(.landing) .nav-view-outer,.site-body:has(.landing) .outline-view-outer,.site-body:has(.landing) .page-header,.site-body:has(.landing) .search-view-container,.site-body:has(.landing) .site-body-left-column,.site-body:has(.landing) .site-body-left-column-site-logo,.site-body:has(.landing) .site-body-left-column-site-name,.site-body:has(.landing) .site-body-right-column,.site-body:has(.landing) .site-footer {
    display: none!important
}

.site-body:has(.landing) .render-container-inner {
    margin: 0 auto
}

@media screen and (max-width: 751px) {
    .site-body:has(.landing) .site-header {
        display:none
    }
}

.published-container .backlinks {
    margin-top: 100px;
    margin-bottom: 100px
}

.backlink-items-container {
    font-size: 16px
}

.backlinks .internal-link {
    color: var(--text-muted);
    text-decoration: none;
}

@keyframes blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.blink {
    animation: blink 2s infinite
}

.blink-green {
    animation: blink 2s infinite;
    font-size: 9px;
    line-height: 1;
    vertical-align: super;
    color: var(--color-green)
}

.theme-dark .blink-green {
    animation: blink 2s infinite
}

.theme-dark .invert {
    filter: invert()!important
}

.publish-article-heading .clickable-icon {
    position: absolute
}

.theme-light .blend {
    mix-blend-mode: multiply
}

.theme-dark .blend {
    mix-blend-mode: normal
}

div.hover-popover.is-loaded h1,div.hover-popover.is-loaded h2 {
    margin-block-end:.3em!important}

#cookie-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--bg2);
    text-align: center;
    padding: 10px;
    z-index: 1000;
    border-top: 1px solid var(--background-modifier-border)
}

#cookie-banner button:not(.clickable-icon) {
    margin: 10px
}

.markdown-rendered div:has(>:is(p,pre,table,ul,ol,blockquote))+div>:is(h1,h2,h3,h4,h5,h6) {
    margin-top: var(--heading-spacing)!important
}

.published-container .markdown-rendered h1,.published-container .markdown-rendered h2 {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: .35em
}

.markdown-rendered h1 .internal-link,.markdown-rendered h2 .internal-link,.markdown-rendered h3 .internal-link,.markdown-rendered h4 .internal-link,.markdown-rendered h5 .internal-link,.markdown-rendered h6 .internal-link {
    text-decoration-thickness: 1px;
    text-decoration: none;
}

.publish-article-heading .footnote-ref {
    font-size: 1.3rem
}

.list-cards.markdown-preview-view div ul ul>li,.list-cards.markdown-preview-view div>ul>li {
    margin-inline-start:0;background-color: var(--bg2);
    border: 0
}

.list-cards.markdown-preview-view .callout div ul ul>li,.list-cards.markdown-preview-view .callout div>ul>li {
    background-color: transparent;
    border: 1px solid var(--tx2)
}

.list-cards.markdown-preview-view div>ul>li a {
    font-weight: var(--bold-weight)
}


.list-cards.markdown-preview-view h2 { /* LIST CARD H2 */
    font-family: 'Luxurious Roman';
    margin-top: .25em;
    margin-bottom: .25em;
}

.list-cards.markdown-preview-view img { /* LIST CARD H2 */
    margin-top: .25em;
}

.markdown-preview-view .caption .external-link,.markdown-preview-view .small .external-link {
    background-position-y: 2px
}

.theme-dark .external-link,.theme-dark .internal-link {
    text-decoration-color: var(--color-base-70);
    text-decoration: none;
}

.external-link:hover,.markdown-rendered .internal-link:hover,.metadata-container .internal-link:hover {
    text-decoration-color: var(--text-accent);
    text-decoration: none;
}

.theme-dark .markdown-rendered mark .internal-link {
    color: var(--background-primary);
    font-weight: 700;
    text-decoration: none;
}

.outline-view-outer .outline-view {
    padding-bottom: 80px
}

span.inline-note {
    font-size: var(--font-smallest);
    vertical-align: super;
    color: var(--color-base-50);
    padding: 3px;
    font-style: italic
}

.footnote-ref {
    font-size: var(--font-smallest)
}

input.search-bar {
    border-radius: 0px;
    background: var(--background-primary)
}

.publish-renderer .motionblur {
    animation: blur-in 3s ease-out
}

@keyframes blur-in {
    from {
        filter: blur(4px) grayscale(100%)
    }

    to {
        filter: blur(0) grayscale(0)
    }
}

p svg.lucide {
    vertical-align: middle
}

.theme-dark .markdown-rendered mark {
    color: var(--background-primary);
    background-color: rgb(255 235 146 / 71%)
}

.boxed {
    padding: 15px;
    border: 1px solid var(--color-base-50);
    margin: 0 auto;
    border-radius: var(--radius-m);
    max-width: 700px;
    text-align: center
}

.markdown-preview-view .caption,.markdown-preview-view .smalltext,.markdown-preview-view .smalltext *,.smalltext.smalltext.list-cards.markdown-preview-view div>ul>li {
    font-size: var(--font-smallest)
}

.markdown-preview-view .caption a,.markdown-preview-view .smalltext a {
    text-decoration-thickness: 1px
}

.grayscale img {
    filter: grayscale()
}

.grayscale img:hover {
    filter: none
}

.desaturated {
    filter: grayscale(90%)
}

.desaturated a {
    text-decoration: underline
}

.reduced {
    font-size: 96%
}

.blur {
    filter: blur(4px)
}

.blur:hover {
    filter: blur(0)
}

.desaturated.blur {
    filter: blur(4px) grayscale(90%)
}

.desaturated.blur:hover {
    filter: blur(0) grayscale(90%)
}

.markdown-preview-view .date {
    font-weight: 700;
    opacity: .7;
    text-align: right;
    margin-right: 5px
}

.caption {
    text-align: center;
    display: block;
    margin: -12px auto 35px
}

.list-cards .caption {
    margin-top: 0
}

.img-grid .markdown-preview-section>div:has(.image-embed)>p span.caption {
    text-align: left;
    margin: 0 auto 35px
}

.markdown-preview-view .light * {
    opacity: .7
}

.markdown-preview-view .footnotes ol {
    font-size: var(--font-smallest)!important
}

ul>li.task-list-item .task-list-item-checkbox {
    margin-left: -1.83em!important
}

.nav-view-outer,.outline-view-outer {
    padding-bottom: 90px
}

.modal-close-button {
    top: 16px
}

.markdown-preview-view.reduced p {
    margin-block-start:0}

@media screen and (min-width: 751px) {
    .markdown-rendered.clean {
        padding:70px!important
    }

    .markdown-rendered.clean h1 .markdown-rendered.clean h1 {
        display: none
    }
}

.mermaid {
    text-align: center;
    margin: 30px auto 30px auto
}

.mermaid .text-inner-tspan {
    fill: var(--text-light)
}

.markdown-rendered table {
    border-radius: var(--radius-m);
    margin: 30px 0
}

.markdown-rendered.small-table table td {
    font-size: var(--font-smallest)
}

.markdown-rendered.nolists ol,.markdown-rendered.nolists.clean-table ul,table ul:has(li.tag) {
    margin: 0;
    padding: 0
}

.markdown-rendered.nolists ol>li,.markdown-rendered.nolists ul>li,table ul:has(li.tag)>li {
    list-style-type: none;
    display: inline-block;
    margin-inline-start:0}

table ul:has(li.tag)>li::after {
    content: " "
}

.markdown-rendered.nolists ol>li::after,.markdown-rendered.nolists ul>li::after {
    content: " / "
}

.markdown-rendered.nolists ol>li:last-child::after,.markdown-rendered.nolists ul>li:last-child::after,table ul:has(li.tag)>li:last-child::after {
    content: ""
}

.markdown-rendered.clean-table tbody>tr>td,.markdown-rendered.clean-table thead>tr>th {
    border: none
}

.markdown-rendered.clean-table tbody tr>td:first-child,.markdown-rendered.clean-table thead tr>th:first-child {
    text-align: right;
    color: var(--color-base-55)
}

.theme-dark .markdown-rendered.clean-table tbody tr>td:first-child,.theme-dark .markdown-rendered.clean-table thead tr>th:first-child {
    color: var(--text-muted)
}

.markdown-preview-view table {
    border: var(--border-width) solid var(--border-color);
    border-collapse: collapse;
    margin-block-start:1em}

.markdown-preview-view td,.markdown-preview-view th {
    padding: var(--table-cell-padding)
}

.markdown-preview-view td:first-child,.markdown-preview-view th:first-child {
    padding-left: var(--table-edge-cell-padding-first)
}

.markdown-preview-view td:last-child,.markdown-preview-view th:last-child {
    padding-right: var(--table-edge-cell-padding-last)
}

.search-view-container {
    margin: 0 0 10px 0
}

.site-body-left-column-site-logo img {
    border-radius: 0
}

.site-body-left-column-site-logo img:hover {
    cursor: pointer
}

.site-body-left-column-site-name {
    z-index: 0!important;
    padding: 0;
    text-align: center;
    font-weight: 600
}


.site-body-left-column-site-theme-toggle {
    margin: 0 auto;
    padding-right: 32px;
    position: absolute;
    top: 10px;
    left: 10px
}

.site-body-left-column .search-view-outer {
    margin: 0;
    display: contents
}

.site-body-left-column-site-name::after {
    display: block;
    content: "gallery • journal • vault outpost";
    margin: 0 0 30px;
    font-weight: 400;
    font-size: var(--font-smaller);
    color: var(--color-base-70);
}

.site-body-left-column-site-name::after:hover {
    color: var(--color-base-100)
}

.site-header-text::after {
    content: "gallery • journal • vault outpost";
    font-size: var(--font-smaller);
    text-align: right;
    margin-left: 10px;
    color: var(--color-base-70);
    font-weight: 400;
    font-variant: all-small-caps;
}

.site-header-text:hover {
    text-decoration: none
}

.site-header-logo {
    display: none
}

.site-body-left-column {
    padding-right: 18px
}

.nav-view-outer .nav-view>.tree-item>.tree-item-children>.tree-item>.tree-item-self:hover {
    opacity: .65
}

.callout { /*master callout thing*/
    margin: 30px 0;
    padding: 10px;
    border-radius: 0px;
    border-left: 0
}

.callout[data-callout-metadata=red] {
    --callout-color: var(--flexoki-red-500)!important
}

.callout[data-callout-metadata=blue] {
    --callout-color: var(--flexoki-blue-300)!important
}

.callout[data-callout-metadata=yellow] {
    --callout-color: var(--flexoki-yellow-400)!important
}

.callout[data-callout-metadata=purple] {
    --callout-color: var(--flexoki-purple-400)!important
}

.callout[data-callout-metadata=gray] {
    --callout-color: var(--flexoki-gray)!important
}

.callout[data-callout=highlight],.callout[data-callout=pdf] {
    --callout-icon: "lucide-highlighter"
}

.callout[data-callout=pdf][data-callout-metadata=yellow] {
    --callout-color: var(--color-yellow-rgb)
}

.callout[data-callout=pdf][data-callout-metadata=red] {
    --callout-color: var(--color-orange-rgb)
}

.callout[data-callout=pdf][data-callout-metadata=note] {
    --callout-color: var(--color-cyan-rgb)
}

.callout[data-callout=hint] {
    --callout-color: var(--color-purple-rgb)
}

.callout[data-callout=important] {
    --callout-color: var(--color-red-rgb)
}

.callout[data-callout=watch] {
    --callout-icon: "lucide-youtube";
    background-color: var(--background-secondary)
}

.callout[data-callout=timeline] {
    --callout-icon: "lucide-calendar";
    --callout-color: var(--color-purple-rgb)
}

.callout[data-callout=links] {
    --callout-icon: "lucide-link";
    --callout-color: var(--color-orange-rgb)
}

.callout[data-callout=bot],.callout[data-callout=note] {
    --callout-color: var(--color-purple-rgb)
}

.callout[data-callout=user] {
    --callout-icon: "lucide-user";
    background-color: var(--background-secondary);
    --callout-color: var(--color-gray-rgb)
}

.callout[data-callout=grid].callout,.callout[data-callout=routes] {
    filter: none;
    -webkit-filter: none
}

.callout[data-callout=cite] {
    background-color: transparent;
    border-radius: 0;
    margin: 20px 30px;
    padding: 0
}

.callout[data-callout=texts] {
    --callout-icon: "lucide-file-text";
    --callout-color: var(--color-oldpink-rgb)
}

.callout[data-callout=bot] {
    --callout-icon: "lucide-bot-message-square"
}

.callout[data-callout=docs] {
    --callout-icon: "lucide-paperclip";
    --callout-color: var(--color-green-rgb)
}

.callout[data-callout=trail] {
    --callout-icon: "lucide-footprints";
    --callout-color: var(--color-yellow-rgb)
}

.callout[data-callout=routes] {
    --callout-icon: "lucide-map";
    --callout-color: var(--color-yellow-rgb)
}

.callout[data-callout=hipertext] {
    --callout-icon: "lucide-refresh-cw";
    --callout-color: var(--color-wine-rgb)
}

.callout[data-callout=small] {
    --callout-icon: "circle-dashed";
    background-color: transparent
}

.callout[data-callout=video] {
    --callout-icon: "lucide-video"
}

.callout[data-callout=galleries],.callout[data-callout=images],.callout[data-callout=portfolio] {
    --callout-icon: "lucide-image";
    border: 1px solid var(--color-base-35);
    margin: 20px auto 20px auto;
    border-radius: var(--radius-m);
    background-color: rgba(255,255,255,1)
}

.theme-dark .callout[data-callout=galleries],.theme-dark .callout[data-callout=images],.theme-dark .callout[data-callout=portfolio] {
    background-color: rgba(0,0,0,1)
}

.callout[data-callout=newsbox] {
    padding: 15px;
    border: 1px solid var(--text-normal);
    margin: 20px auto 20px auto;
    border-radius: var(--radius-m);
    background-color: transparent;
    --callout-icon: "calendar-days"
}

.callout[data-callout=info] {
    background-color: var(--background-secondary)
}

.callout[data-callout=infobox] {
    padding: 10px;
    border: 1px solid var(--color-base-35);
    margin: 20px auto 20px auto;
    background-color: transparent
}

.callout[data-callout=big-sans],.callout[data-callout=big-serif] {
    font-size: 22px;
    background: 0;
    margin: 50px 0;
    line-height: 30px;
    padding: 0
}

.callout[data-callout=big-serif] {
    font-family: var(--font-primary-serif)
}

.callout[data-callout=clean] {
    background: 0;
    border: 0;
    padding: 30px 0 30px 50px
}

div.hover-popover.is-loaded .callout[data-callout=clean] {
    margin-left: 0!important
}

.callout[data-callout=book] {
    --callout-color: var(--color-yellow-rgb);
    --callout-icon: "lucide-book"
}

div.popover.hover-popover.is-loaded .callout[data-callout=noteinfo] {
    margin-top: 0!important
}

.callout[data-callout=noteinfo] {
    --callout-icon: "lucide-info"
}

.callout[data-callout=noteinfo] {
    font-size: var(--font-smaller);
    background: 0;
    padding: 0;
    margin: 0 0 50px 0;
    border-radius: 0;
    line-height: var(--line-height-normal)
}

.callout[data-callout=small] {
    font-size: var(--font-smallest);
    padding: 0;
    margin: 0 0 50px 0;
    border-radius: 0;
    opacity: 1;
    line-height: var(--line-height-normal)
}

.callout[data-callout=languages] {
    padding: 5px 5px;
    background-color: transparent;
    font-size: var(--font-smallest);
    border: .01em solid var(--color-base-50);
    margin: 0 0 5px 0;
    --callout-icon: "lucide-languages";
    font-variant: all-small-caps
}

.callout[data-callout=big-sans] .callout-title,.callout[data-callout=big-serif] .callout-title,.callout[data-callout=cite] .callout-icon,.callout[data-callout=cite] .callout-title,.callout[data-callout=clean]>.callout-title,.callout[data-callout=infobox] .callout-title,.callout[data-callout=infobox] .callout-title .svg-icon,.callout[data-callout=noteinfo] .callout-title,.callout[data-callout=small] .callout-title {
    display: none
}

.callout[data-callout=languages] .callout-title {
    padding: 0
}

.callout[data-callout=galleries] .callout-title,.callout[data-callout=images] .callout-title,.callout[data-callout=info] .callout-title,.callout[data-callout=languages] .callout-title .svg-icon,.callout[data-callout=portfolio] .callout-title {
    filter: grayscale()
}

.callout[data-callout=languages] .callout-title-inner {
    font-weight: 300;
    color: var(--text-muted)
}

.callout[data-callout=cite] .callout-content {
    font-weight: inherit;
    font-style: italic;
    font-family: var(--font-primary-serif)
}

.callout[data-callout=cite] .callout-content {
    padding: 0
}

.callout[data-callout=cite] .callout-content blockquote {
    border: 0;
    padding: 0
}

.callout[data-callout=infobox] .callout-content {
    text-align: center
}

.callout[data-callout=infobox] .callout-content p {
    margin: 10px 0
}

.callout[data-callout=big-sans] .callout-content,.callout[data-callout=big-serif] .callout-content {
    padding: 0 0 0 30px
}

.callout[data-callout=big-sans] p,.callout[data-callout=big-serif] p {
    padding: 0;
    margin: 0
}

.callout[data-callout=noteinfo] .callout-content {
    padding: 0 0 2px 0;
    text-indent: 0
}

.callout[data-callout=noteinfo] .callout-content p,.callout[data-callout=small] .callout-content,.callout[data-callout=small] .callout-content p {
    padding: 0;
    margin: 0
}

.callout[data-callout=noteinfo] .external-link,.callout[data-callout=small] .external-link {
    background-size: 10px;
    background-position-y: 0
}

.callout[data-callout=small] .callout-content p svg.lucide {
    vertical-align: text-bottom
}

.callout[data-callout=noteinfo] .callout-content,.callout[data-callout=small] .callout-content {
    padding: 0
}

.callout[data-callout=noteinfo] .callout-content {
    color: var(--text-muted)
}

.callout[data-callout=noteinfo] .callout-content .markdown-rendered .tag:not(.token) {
    font-size: var(--font-smaller)
}

.callout[data-callout=noteinfo] .callout-content a {
    color: var(--color-base-60);
    text-decoration-color: var(--color-base-40)
}

.callout[data-callout=noteinfo] .callout-content a:hover {
    color: var(--text-accent-hover);
    text-decoration-color: var(--text-accent-hover)
}

.callout[data-callout=noteinfo] .callout-content .tag:not(.token):hover {
    color: var(--color-base-00)
}

.theme-dark .callout[data-callout=noteinfo] .callout-content .tag:not(.token):hover {
    color: var(--color-base-60)
}

.callout[data-callout=languages] .callout-content {
    display: none
}

.callout[data-callout=small] .callout-content .markdown-rendered .tag:not(.token) {
    font-size: var(--font-smallest)
}

.callout .callout-title a {
    font-weight: var(--bold-weight);
    color: var(--callout-title-color)
}

.callout[data-callout=pdf][data-callout-metadata=yellow] .callout-title a {
    filter: brightness(.8)
}

.markdown-preview-view .tag:not(.token) {
    white-space: nowrap;
    text-decoration: none;
    font-size: var(--font-smallest);
    border: 1px solid var(--ui3)
}

.markdown-preview-view .tag:not(.token):hover {
    text-decoration: none;
    background-color: var(--ui3)
}

.body:not(.minimal-unstyled-tags) {
    margin: 1px 10px 0 0
}

.markdown-preview-view .callout:not([data-callout=noteinfo]):not([data-callout=clean]):not([data-callout=small]) .tag:not(.token) {
    background-color: transparent;
    color: var(--text-normal);
    border: 1px solid var(--text-normal);
    padding: 0 5px;
    font-size: var(--font-smallest)
}

.markdown-preview-view .callout:not([data-callout=noteinfo]):not([data-callout=clean]):not([data-callout=small]) .tag:not(.token):hover {
    background-color: var(--text-normal);
    color: var(--background-color)
}

.theme-light img[src$="#blend"],.theme-light span[src$="#blend"] img {
    mix-blend-mode: multiply
}

.theme-light .lightbox [src$="#blend"],.theme-light .lightbox span[src$="#blend"] img {
    mix-blend-mode: screen
}

.theme-light img[src$="#invert"],.theme-light span[src$="#invert"] img {
    mix-blend-mode: multiply
}

.theme-light .lightbox [src$="#invert"],.theme-light .lightbox span[src$="#invert"] img {
    mix-blend-mode: screen
}

.list-cards.cards-white.markdown-preview-view div>ul>li {
    background-color: #fff
}

.list-cards.cards-noborder.markdown-preview-view div>ul>li {
    border: 0
}

img {
    cursor: var(--img-zoom-in-cursor)
}

.publish-renderer .grayscale img {
    filter: grayscale(100%);
    opacity: 1
}

.publish-renderer .grayscale img:hover {
    filter: none;
    opacity: 1
}

.markdown-preview-view img {
    max-width: 100%;
    border-radius: var(--radius-m);
    display: block;
    margin: 0 auto
}

.theme-dark img {
    opacity: .8
}

.theme-dark .lightbox img {
    opacity: 1
}

div[src$="#float"],span[src$="#float"] {
    padding-right: 10px;
    float: left
}

div[src$="#float"] img,img[src$="#float"],span[src$="#float"] img {
    height: auto;
    width: 100px
}

.lightbox div[src$="#float"] img,.lightbox img[src$="#float"],.lightbox span[src$="#float"] img {
    height: auto;
    width: auto
}

div[src$="#boxed"] img,img[src$="#boxed"],span[src$="#boxed"] img {
    border: 1px solid var(--color-base-50)
}

.lightbox div[src$="#boxed"] img,.lightbox img[src$="#boxed"],.lightbox span[src$="#boxed"] img {
    border: 0
}

.theme-dark div[src$="#icon"] img,.theme-dark img[src$="#icon"],.theme-dark span[src$="#icon"] img,.theme-dark svg.icon {
    width: 18px;
    margin-right: 2px;
    filter: invert()
}

div[src$="#icon"] img,img[src$="#icon"],span[src$="#icon"] img,svg.icon {
    width: 18px;
    margin-right: 2px
}

.img-grid .image-embed.is-loaded[src$="#icon"],.img-grid div[src$="#icon"],.img-grid span[src$="#icon"],div[src$="#icon"],span[src$="#icon"] {
    display: inline-block;
    vertical-align: middle;
    opacity: .6
}

.img-grid span[src$="#icon"].image-embed img:hover,.img-zoom span[src$="#icon"].image-embed img:hover,.markdown-preview-view img[src^=http],div[src$="#icon"].image-embed img:hover,span[src$="#icon"].image-embed img:hover {
    cursor: default
}

span[src$="#icon"]+span[src$="#icon"] {
    margin-left: 2px
}

.markdown-rendered video {
    width: 100%;
    margin: 0 auto;
    display: block;
    border-radius: var(--radius-m)
}

.markdown-source-view .pdf-embed,.pdf-embed {
    max-width: 100%;
    height: auto!important
}

.internal-embed:not(.image-embed) {
    --embed-padding: 20px 0 0 20px
}

.internal-embed:not(.image-embed) h1 {
    margin-top: 0;
    font-size: var(--h2-size)!important
}

.internal-embed:not(.image-embed).pdf-embed .iframe,.internal-embed:not(.image-embed).pdf-embed .iframe embed {
    max-width: 100%!important
}

.markdown-embed-title {
    white-space: pre-wrap;
    font-variant: var(--page-title-variant);
    line-height: var(--page-title-line-height);
    font-size: var(--page-title-size);
    color: var(--page-title-color);
    font-weight: var(--page-title-weight);
    font-style: var(--page-title-style);
    font-family: var(--page-title-font);
    margin-bottom: 50px
}

iframe video .media-controls {
    width: 100%!important
}

iframe {
    border: 0;
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-m);
    background-color: transparent;
    margin: 50px auto 50px auto;
    display: block
}

iframe.boxed {
    padding: 0
}

iframe.border {
    border-color: var(--color-base-100)
}

.internal-embed:not(.image-embed).pdf-embed {
    height: 800px!important;
    max-width: 100%;
    width: 100%;
    border: 0
}

.internal-embed:not(.image-embed).pdf-embed iframe {
    height: 100%!important;
    min-height: 340px;
    max-width: 100%;
    width: 100%;
    border-radius: var(--radius-m);
    margin: 0
}

.lr_embed {
    margin: 20px 0
}

#slideshow .image-view .image,video {
    border-radius: var(--radius-m)
}

.site-footer {
    position: absolute;
    right: 5px;
    bottom: 0;
    width: 258px;
    font-size: 11px;
    line-height: initial;
    padding-bottom: 10px;
    background-color: var(--background-primary)
}

.sliding-windows .site-footer {
    right: 23px;
    position: absolute;
    bottom: 0;
    width: 258px;
    font-size: 11px;
    line-height: initial;
    padding-bottom: 10px;
    background-color: var(--background-primary);
    text-align: left
}

.site-footer a {
    text-decoration: underline
}

.theme-light .site-footer {
    color: rgba(127,127,127,1)
}

.theme-dark .site-footer {
    color: rgba(126,126,126,1)
}

.site-footer .foot-links {
    margin-bottom: 2px;
    border-bottom: 0 dotted #e2e2e2;
    padding-bottom: 2px;
    display: none
}

.social {
    margin: 5px auto 5px auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 5px
}

.markdown-preview-view .social img[src^=http] {
    cursor: pointer
}

.social .social-icon svg {
    fill: var(--text-muted)
}

.social svg:hover path {
    fill: var(--text-accent)
}

.social img.social-icon {
    filter: opacity(.6)!important;
    border-radius: 0
}

.social img.social-icon:hover {
    filter: opacity(1)!important
}

.theme-dark .social img.social-icon {
    filter: invert(1)!important;
    opacity: .6
}

.theme-dark .social img.social-icon:hover {
    opacity: 1
}

.social a {
    background: 0 0;
    text-decoration: none;
    margin-right: 10px
}

.social a:last-child {
    margin-right: 0!important
}

.site-footer .social .behance,.site-footer .social .facebook,.site-footer .social .linkedin,.site-footer .threads {
    display: none!important
}

.site-footer .social {
    text-align: right;
    display: block
}

.sliding-windows .site-footer .social {
    text-align: left;
    display: block
}

.social svg {
    width: auto;
    height: 15px;
    vertical-align: middle
}

.social svg .cls-0,.social svg:hover path.cls-0 {
    fill: none
}

.social svg#mailme {
    border-radius: 2px;
    background: 0 0;
    width: auto;
    height: 12px;
    gap: 33px
}

.social svg#portfolio {
    height: 18px
}

.social svg#blog {
    height: 20px
}

.social svg#behance {
    background: 0 0;
    width: auto;
    height: 13px
}

.social svg#linkedin-icon {
    background: 0 0;
    width: auto;
    height: 22px
}

.social svg#face {
    border-radius: 2px
}

@media screen and (min-width: 1800px) {
    .sliding-windows .publish-renderer {
        width:800px;
        flex: 0 0 800px
    }

    .site-body-left-column-site-name,body {
        font-size: 110%
    }
}


@media screen and (min-width: 2100px) {
    .published-container {
        --sidebar-left-width:300px
    }

    .nav-view,.site-body-left-column-site-name,body {
        font-size: 120%
    }

    .nav-view [data-path]::after,.site-body-left-column-site-name::after {
        font-size: 100%;
        padding: 0
    }

    .callout[data-callout=circle],.callout[data-callout=noteinfo],.callout[data-callout=small] {
        font-size: 85%!important
    }
}

@media screen and (max-width: 730px) {
    .site-header-text::after {
        display:block;
        text-align: left;
        margin: 0
    }

    .page-header {
        display: none;
        font-family: --var(--font-primary-sans);
    }

    .site-footer {
        width: 100%
    }

    .site-footer .social {
        display: flex;
        text-align: center
    }

    .site-footer {
        position: relative;
        width: 100%;
        text-align: center;
        right: 0
    }

    .search-view-container {
        margin: 10px 15px 15px
    }

    .search-view-container input {
        height: 100px
    }

    .site-body-left-column-site-name,.site-body-left-column-site-theme-toggle {
        margin: 0 0 20px 5px!important;
        position: relative;
        top: 0
    }
}

@media screen and (max-width: 1024px) {
    .markdown-rendered h1 {
        margin-block-start:40px!important
    }

    .frontmatter-container {
        margin-bottom: 3rem
    }

    .callout[data-callout=clean] {
        background: 0;
        border: 0;
        padding: 10px 0 10px 0
    }

    .site-footer {
        width: 100%
    }

    .site-body-left-column .search-view-outer {
        margin: 0px 0 0 0
    }

    .site-footer .social {
        display: none
    }
}

@media screen and (max-width: 1024px) and (orientation:landscape) {
    .site-body-left-column-site-logo,.site-footer {
        width:50px!important;
        display: none
    }

    .site-body-left-column-site-name,.site-body-left-column-site-theme-toggle {
        margin: 0 0!important
    }

    .nav-view-outer {
        opacity: 1
    }

    .markdown-preview-view:not(.show-frontmatter) .frontmatter {
        display: none!important
    }

    .site-footer {
        text-align: center;
        width: 100%;
        right: 50%;
        bottom: -20px;
        left: 50%;
        transform: translate(-50%,-50%);
        padding: 5px 0 22px 0!important;
        margin: 0
    }

    .site-footer .social {
        display: none
    }
}

@media screen and (max-width: 1024px) and (orientation:portrait) {
    body {
        --font-text-size:var(--font-text-size-mobile)!important
    }

    .tree-item-self .tree-item-icon {
        padding-inline-start:25px!important}

    .site-footer {
        text-align: center;
        right: 0;
        width: 100%
    }

    .site-footer .social {
        text-align: center
    }

}

@media print {
    #toggle-sidebar-btn,.backlinks,.boxed:has(.social),.callout.is-collapsed,.frontmatter-container,.markdown-preview-view:not(.show-frontmatter) .frontmatter,.page-header {
        display: none!important
    }
}

.footnote-tooltip {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1000;
    max-width: 300px;
    font-size: .9em
}

.footnote-link:hover .footnote-tooltip {
    display: block
}

.markdown-preview-view h1,
.publish-article-heading {
  margin-block-start: 0 !important;
  justify-content: center;
}

#chooser {
    position: fixed !important;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.published-container {
    --page-title-font: 'Luxurious Roman', serif;
    letter-spacing: -.015em;
  }



  .theme-light .workspace {
    backdrop-filter: brightness(1) blur(5px); /* filter for light mode */
    background-color: transparent;
}
.theme-dark .workspace {
    backdrop-filter: brightness(0.35) blur(5px); /* filter for dark mode */
    background-color: transparent;
}
.horizontal-main-container { /* below is the background image. Change it to whatever you want */
    background: url(https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2076&q=80);
    background-size: cover;
}
.workspace-split.mod-root {
    background-color: var(--background-primary);
}

body { 
/* the background-primary makes the main note pane completely transparent. 
You can change it to be semi-transparent if you want. 
I changed background-secondary and divider-width because it
looks a bit cleaner in my opinion. You can delete those modifications if you want.*/
    --background-primary: transparent;
    --background-secondary: transparent;
    --divider-width: 0px;
}

/* IMAGES -------------------------- IMAGES */


img[alt~='pos-r'] {
    float: right;
    clear: right;
    margin-left: 30px;
    margin-top: 1em;
}

/* left */
img[alt~='pos-l'] {
    float: left;
    clear: left;
    margin-right: 30px;
    margin-top: 1em;
}

.amount-progress{
    width: 100%;
    margin-left: 0%;
    border-radius : 0px;
    margin-top: 1em;
    height: 5rem;
}

.site-footer {
    display:none;
}



.published-container {
    --line-width: 300px; /* Try increasing this */
  }

img {
    padding-bottom: 20px;
    border-radius: 0px;
    text-align: left;
  }

  body {
    margin-top: 0;
    padding-top: 0;
  }