@import url('https://fonts.googleapis.com/css2?family=Arima:wght@100..700&family=SUSE:wght@100..800&family=Shantell+Sans:ital,wght,BNCE,INFM,SPAC@0,300..800,-100..100,0..100,0..100;1,300..800,-100..100,0..100,0..100&display=swap');

@keyframes pulse {
    15% {transform: translateX(1px);}
    50% {transform: translateX(-0.5px);}
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes slideUp {
    from {
        transform: translatey(150px);
    }
}
@keyframes FadeInText {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    50% {
        opacity: .25;
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0px)
    }
}


body {
    --r1: 10px;
    --r2: var(--r1) ;
    --p1: 5px;

    --font-text-theme: "suse"/*, sans-serif*/;
    --font-monospace:  "suse"/*, sans-serif*/;
    --font-interface: "suse"/*, sans-serif*/;
    font-optical-sizing: auto;

    --font-normal: 500;
    --font-text-size: 1.15em;

    /*    --heading-spacing:0;
    
        --p-spacing: 1.5em;*/
    /*
    --p-spacing-empty: 5em;
    */

    background-color: var(--glass-color);
    transition: background-color 500ms linear 0ms;
    --glass-opacity: 0.90;
    --blur-opacity: 0.98;
    --luma: 24%;
    --tint: -10%;
    --temp: 4%;
    --light-tint: -5%;
    --light-temp: 3%;
    --glass-contrast: 2.5;
    --cursor: pointer;
    --border-width: 0px;
    --bounce: cubic-bezier(0.62, 2, 0.04, 0.36);

    --hue-shift-amount: -10;


    &.theme-dark , &.is-mobile.theme-dark, &.theme-light{
        --glass-color: oklab(calc(var(--luma)) var(--tint) var(--temp));

        --light-color: oklab(
                calc(var(--luma) * var(--glass-contrast))
                calc(var(--tint) + var(--light-tint))
                calc(var(--temp) + var(--light-temp))  
        / 1.0);
        --shadow-color: oklab(
                calc(var(--luma) / var(--glass-contrast))
                calc(var(--tint) - var(--light-tint))
                calc(var(--temp) - var(--light-temp))  
        / 1.0);
        --header-color:  oklab(
                calc(clamp(60%, var(--luma) * 2.5, 100%))
                calc(2 * var(--tint) + (var(--light-tint)))
                calc(2 * var(--temp) + (var(--light-temp)))
            / 1.0);
        --text-color:  oklab(
                calc(clamp(60%, var(--luma) * 2.5, 100%))
                calc(var(--tint) + (var(--light-tint) * 0.5))
                calc(var(--temp) + (var(--light-tint) * 0.5))
            / 1.0);

        --color-accent: oklch(from var(--text-color) l calc(c * 1.3) calc(h + 180) / 1);
        --color-accent-1: oklch(from var(--text-color) l calc(c * 1.3) calc(h + 180) / 1);
        --color-accent-2: oklch(from var(--text-color) l calc(c * 1.3) calc(h + 180) / 1);

        --color-base-00: oklab(calc(2 * var(--luma) - 10% * var(--glass-contrast)) calc(var(--tint) - var(--light-tint))
        calc(var(--temp) - var(--light-temp) * 1));
        --color-base-05: oklab(calc(2 * var(--luma) - 8% * var(--glass-contrast))  var(--tint) var(--temp));
        --color-base-10: oklab(calc(2 * var(--luma) - 8% * var(--glass-contrast))  var(--tint) var(--temp));
        --color-base-20: oklab(calc(2 * var(--luma) - 8% * var(--glass-contrast))  var(--tint) var(--temp));
        --color-base-25: oklab(calc(2 * var(--luma) - 8% * var(--glass-contrast))  var(--tint) var(--temp));
        --color-base-30: oklab(calc(2 * var(--luma) - 6% * var(--glass-contrast)) var(--tint) var(--temp));
        --color-base-35: oklab(calc(2 * var(--luma) - 6% * var(--glass-contrast))  var(--tint) var(--temp));
        --color-base-40: oklab(calc(2 * var(--luma) - 3% * var(--glass-contrast))  var(--tint) var(--temp));
        --color-base-50: oklab(calc(2 * var(--luma))  var(--tint) var(--temp));
        --color-base-60: oklab(calc(2 * var(--luma) + 7% * var(--glass-contrast)) var(--tint) var(--temp));
        --color-base-70: oklab(calc(2 * var(--luma) + 15% * var(--glass-contrast)) var(--tint)
        calc(var(--temp) + var(--light-temp)));
        --color-base-100: oklab(calc(2 * var(--luma) + 13% * var(--glass-contrast)) var(--tint)
        calc(var(--temp)));

        --text-faint:   var(--color-base-60);

    }

    --interactive-accent: hsl(from var(--light-color) h s l / 0.35) !important;
    --color-h1: oklch(from var(--header-color) l c h);
    --color-h2: oklch(from var(--header-color) l c calc(h + calc(1 * var(--hue-shift-amount))));
    --color-h3: oklch(from var(--header-color) l c calc(h + calc(2 * var(--hue-shift-amount))));
    --color-h4: oklch(from var(--header-color) l c calc(h + calc(3 * var(--hue-shift-amount))));
    --color-h5: oklch(from var(--header-color) l c calc(h + calc(4 * var(--hue-shift-amount))));
    --color-h6: oklch(from var(--header-color) l c calc(h + calc(5 * var(--hue-shift-amount))));

}
body::before {
    /* Default styles */
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    --default-bg: url("https://static.wikia.nocookie.net/istria/images/f/f6/Feywild.jpg/revision/latest?cb=20120307024915");
    --background-image: url("https://i.redd.it/uq5fkj16rf221.jpg");
    background-size: cover;
    background-position: center;
    background-image: var(--background-image);
}

/*
        ==============================
                Glass shading
        ==============================             
*/


/* glass elements */

.workspace-tab-header-container,.workspace-tab-container, .workspace-drawer.is-pinned, body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile, .prompt, .prompt-input, .workspace-drawer::after,  .workspace-tab-header, .workspace-tab-header-inner, .workspace-leaf-content, .clickable-icon, .vertical-tab-header,.style-settings-heading, .vertical-tab-content, .modal, .checkbox-container, button, .search-input-container, .suggestion, .suggestion-container, .horizontal-tab-nav-item, .vertical-tab-nav-item, .style-settings-container, .menu, .dropdown, .gemini-scribe-message.model, .gemini-scribe-chatbox, .gemini-scribe-chat-input, .HyperMD-header, .HyperMD-header::before, .HyperMD-header::after, .table-wrapper, .workspace-drawer-active-tab-header, .callout, .workspace-tabs
{

    --shadow-intensity: 1;
    --shadow-distance: 1;
    --drop-shadow:
            0 calc(1px * var(--shadow-distance)) calc(4px * var(--shadow-distance))
            oklch(from var(--shadow-color) l c h / 1),

            0 calc(6px * var(--shadow-distance)) calc(15px * var(--shadow-distance))
            oklch(from var(--shadow-color) l c h / 0.8);

    --simple-shadow:0 calc(6px * var(--shadow-distance)) calc(20px * var(--shadow-distance))
    oklch(from var(--shadow-color) l c h / 1);

    --highlight-intensity: 1;
    --highlight-distance: 1px;
    --highlight-blur: 1px;
    --highlight-color: oklch(from var(--light-color) calc(l * var(--highlight-intensity)) c h);


    --glass-highlight:
            inset 0px var(--highlight-distance) var(--highlight-blur)
            oklch(from var(--highlight-color) l c h / calc(0.5 * var(--highlight-intensity))),

            inset 0px calc(var(--highlight-distance) * -1) 0px
            hsl(from var(--shadow-color) h s l / var(--highlight-intensity)),

            inset 0px calc(var(--highlight-distance) * -2) calc(var(--highlight-blur) * 3)
            oklch(from var(--highlight-color) l c h / calc(0.15 * var(--highlight-intensity)));


    --glass-highlight-B:
            inset 0px var(--highlight-distance) calc(var(--highlight-blur) * 2)
            oklch(from var(--highlight-color) l c h / calc(0.5 * var(--highlight-intensity))),

            inset 0px calc(var(--highlight-distance) * 3) calc(var(--highlight-blur) * 15)
            oklch(from var(--highlight-color) l c h / calc(0.3 * var(--highlight-intensity)));


    --glass-highlight-C:
            0px calc(var(--highlight-distance) * 1) var(--highlight-blur)
            oklch(from var(--highlight-color) l c h / calc(0.5 * var(--highlight-intensity))),

            inset 0px calc(var(--highlight-distance) * 5) calc(var(--highlight-blur) * 5)
            hsl(from var(--shadow-color) h s l / var(--shadow-intensity)),

            0px calc(var(--highlight-distance) * -1) calc(var(--highlight-blur) * 2)
            oklch(from var(--highlight-color) l c h / calc(0.15 * var(--highlight-intensity)));


    --glass-headers:
            inset -1px 0 calc(var(--highlight-blur) * 3)
            oklch(from var(--highlight-color) calc(l*1.5) 0 h / calc(0.5 * var(--highlight-intensity))),

            inset 0px calc(var(--highlight-distance) * -2) calc(var(--highlight-blur) * 20)
            oklch(from var(--highlight-color) l calc(c*1.5) h / calc(0.3 * var(--highlight-intensity))),

            0 calc(1px * var(--shadow-distance)) calc(5px * var(--shadow-distance))
            oklch(from var(--highlight-color) l calc(c*1.4) h / 0.4);


    --simple-glow: 0 0 calc(var(--highlight-blur) * 15) calc(var(--highlight-blur) * 5)
    oklch(from var(--highlight-color) l c h / calc(0.5 * var(--highlight-intensity)))/*,
    0px 0 calc(var(--highlight-blur) * 5) calc(var(--highlight-blur) * 2)
    oklch(from var(--highlight-color) l c h / calc(1 * var(--highlight-intensity)))*/;

}


.site-body-center-column{

    &::before, &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
    }
    &::before {
        opacity: var(--blur-opacity);
        backdrop-filter: blur(3em);
        background: linear-gradient(-140deg,
        oklab(calc(var(--luma) * 1.1) calc(var(--tint) + var(--light-tint)) calc(var(--temp) + var(--light-temp)) / var(--glass-opacity)) -25% ,
        oklab(calc(var(--luma) * 0.9) calc(var(--tint) - var(--light-tint)) calc(var(--temp) - var(--light-temp)) / var(--glass-opacity)) 125%
        );

    }
}
.site-body-left-column {
    background: linear-gradient(-140deg,
    oklab(calc(var(--luma) * 1.1) calc(var(--tint) + var(--light-tint)) calc(var(--temp) + var(--light-temp)) / 0.2) -25% ,
    oklab(calc(var(--luma) * 0.9) calc(var(--tint) - var(--light-tint)) calc(var(--temp) - var(--light-temp)) / var(--glass-opacity)) 125%
    );
}


.workspace-split {
    &.mod-root {
        .workspace-leaf::before {
            mask-image: linear-gradient(
                    to left,
                    transparent -40%,
                    #000f calc(50% - max(10%, 350px)),
                    #000f calc(50% + max(10%, 350px)),
                    transparent 140%
            );
        }
    }
    &.mod-sidedock {
        .workspace-leaf::before {
            mask-image: linear-gradient(
                    to bottom,
                    #000f 50%,
                    transparent 250%
            )
        }
    }
}






.mod-root .workspace-tab-header-inner {
    padding: 0 15px;
}
.menu, .dropdown {
    background-color: hsl(from var(--glass-color) h s l / 0.6);
    border: none; ;
    box-shadow: var(--glass-highlight), var(--drop-shadow);
    backdrop-filter: blur(0.5em);
}

.vertical-tab-header, .vertical-tab-content-container {
    background-color:transparent;
    &.vertical-tab-header {
        box-shadow:  var(--glass-highlight), var(--drop-shadow);
        border-radius: var(--r1) 0 0 var(--r1);
        z-index: 6;
        padding-left: 1.7em;
        padding-right: 1.7em;
        --shadow-intensity: 3;
        --shadow-distance: 3;
        --highlight-intensity: 1;
        --highlight-distance: 1px;
        --highlight-blur: 2px;
    }
    &.vertical-tab-content-container {
        border-radius: 0 var(--r1) var(--r1) 0;
    }
}

.vertical-tab-content {
    border-radius: inherit;
    box-shadow: var(--glass-highlight-B);
    background-color: transparent;
    --highlight-blur: 0.5px;

}

.checkbox-container:after{
    border-radius: var(--r1);
    background-color: hsl(from var(--light-color) h calc(s * 1.5) 75 / 0.5);
    Box-shadow: var(--glass-highlight), var(--drop-shadow);
    z-index: 5;
}


:is(
    .search-input-container,
    input.metadata-input-text,
    textarea
)
{
    background: none;
    border: none;
    border-radius: var(--r1);
    transition: box-shadow 1000ms ease;
    box-shadow: var(--glass-highlight-C);
    --highlight-distance: 0.0px;
    --highlight-blur: 0px;

    &:is( :focus, :focus-visible,:hover){
        transition: box-shadow 150ms ease;
        background-color: hsl(from var(--glass-color) h s l / 0.2);
        --highlight-intensity: 1.05;
        --highlight-distance: 0.5px;
        --highlight-blur: 2px;
    }
    &:focus-within{
        --highlight-intensity: 1.05;
        --highlight-distance: 1px;
        --highlight-blur: 1px;
    }

    &:active{
        transition: box-shadow 50ms ease;
        --highlight-intensity: 1.2;
        --highlight-blur: 3px;
    }
}


/*
        ==============================
                    EDITOR    
        ==============================             
*/

.cm-scroller {
    mask-image: linear-gradient(to bottom,transparent 0%, black 3%, black 90%, transparent 100%);
}

.table-wrapper {
    border-radius: var(--r1);
    box-shadow: var(--glass-highlight-C);
    border: none;
    padding: 0.5em;
}

table {
    border-spacing: 2px;
}

* {
    --weight: 500;
    --casual: 1;
    --slant: 0;
    --cursive: 1;
    --mono: 0;
    --weight-offset: 0 ;
    font-variation-settings:
            "CASL" var(--casual),
            "CRSV" var(--cursive),
            "MONO" var(--mono),
            "slnt" var(--slant),
            "wght" calc(var(--weight) + var(--weight-offset));

}
p:hover{
    --casual: 0;
    filter: brightness(1.3);
}

.cm-s-obsidian .hmd-fold-html-stub, .cm-s-obsidian .hmd-fold-code-stub, .cm-s-obsidian .cm-inline-code, .cm-s-obsidian .HyperMD-codeblock, .cm-s-obsidian .HyperMD-hr, .cm-s-obsidian .cm-hmd-frontmatter, .cm-s-obsidian .cm-hmd-orgmode-markup, .cm-s-obsidian .cm-formatting-code, .cm-s-obsidian .cm-math, .cm-s-obsidian span.hmd-fold-math-placeholder, .cm-s-obsidian .hmd-fold-html kbd {
    --mono: 1;
    --cursive: 0;
}

p {
    border-radius: 0;
    opacity: 1;
    transition:
            filter 300ms ease-in,
            font-variation-settings 150ms ease-in,
            opacity 500ms ease-out;
    @starting-style {
        opacity: 0;
    }
}

body:not(.is-grabbing) .tree-item-self.is-clickable {
    transition: transform 350ms var(--bounce) , filter 500ms ease-out;
    &:hover {
        transition: transform 150ms cubic-bezier(.06,1.79,.98,1.02);
        background-color: transparent;
        filter: brightness(1.5);
        transform: translateX(0.2em);
    }
}

/* --- animate formatting headers --- */


/*
        ==============================
               HEADERS STYLING
        ==============================             
*/
:is(.markdown-preview-sizer,.cm-editor) {

    --h1-weight: 900;
    --h2-weight: 850;
    --h3-weight: 700;
    --h4-weight: 600;
    --h5-weight: 425;
    --h6-weight: 400;

    :is(.cm-header, h1, h2, h3, h4, h5, h6) {
        --casual: 0.25;
        --slant: 0;
        --cursive: 1;
        --mono: 0;
        --weight-offset: 0 ;
        letter-spacing: -0.02em;
        --weight: var(--font-weight);
        border-bottom: none !important;
        margin-block-end: 0 !important;
        margin-bottom: 0 !important;
    }

    :is(.HyperMD-header, .el-h1, .el-h2, .el-h3, .el-h4, .el-h5, .el-h6){

        background-clip: text;
        color: oklch(from var(--color) calc(l*1.2) calc(c * 0.8) h / 1);
        text-shadow: 0 0 15px oklch(from var(--color) l calc(c * 2) h / 0.3);
        transform: translateX(-0.5em);
	.popover &{
		ransform: translateX(0);
	}
    }


    .HyperMD-header-1, .el-h1 {
        --color: var(--color-h1);
    }

    .HyperMD-header-2, .el-h2 {
        --color: var(--color-h2);
    }

    .HyperMD-header-3, .el-h3 {
        --color: var(--color-h3);
    }

    .HyperMD-header-4, .el-h4 {
        --color: var(--color-h4);
    }

    .HyperMD-header-5, .el-h5 {
        --color: var(--color-h5);
    }

    .HyperMD-header-6, .el-h6 {
        --color: var(--color-h6);
    }
}
.markdown-source-view.mod-cm6 .cm-embed-block:not(.cm-table-widget):hover {
    box-shadow: none;
}
.callout {
    box-shadow: var(--glass-highlight);


    border-radius: var(--r1);
    padding: 1em 1em;

    & p {
        --cursive: 0;
        --casual: 0.5;
        --slant: -5;
        --weight-offset: 50;
        margin: 0.2em 0;
    }
    &:hover {
        border: none;
        filter: brightness(1.2);
    }
}

@keyframes emphasize {
    from {
        text-shadow: none;
        color: var(--text-normal);
    }
}
/*.cm-s-obsidian span.cm-quote {
    color: transparent;
}*/
strong {
    /*
    font-weight: 900;
    */
    font-style: unset;
    --casual: 0.5;
    --cursive: 0;
    --weight-offset: 200 !important;
    /*    font-variation-settings:
                inherit;*/

    background: linear-gradient(to left,
    oklab(
            calc(clamp(80%, var(--luma) * 1.0, 100%)) calc(-1.0 * var(--tint) - (var(--light-tint) * 2)) calc(-1.0 * var(--temp) - (var(--light-temp) * 2))
    ),
    oklab(
            calc(clamp(80%, var(--luma) * 1.0, 100%)) calc(-1.0 * var(--tint) + (var(--light-tint) * 2)) calc(-1.0 * var(--temp) + (var(--light-temp) * 2)))
    );

    background-clip: text;
    color: transparent;

    em {
        /*
        animation: emphasize cubic-bezier(0.11, 1.89, 0, 2) 1000ms 1;
        */
        --slant: -10;
        --weight-offset: 200;
        background: linear-gradient(to right,
        oklab(
                calc(clamp(90%, var(--luma) * 2.5, 100%)) calc(1.5 * var(--tint) - (var(--light-tint))) calc(1.5 * var(--temp) - (var(--light-temp)))
        ),
        oklab(
                calc(clamp(80%, var(--luma) * 2.5, 100%)) calc(1.5 * var(--tint) + (var(--light-tint))) calc(1.5 * var(--temp) + (var(--light-temp))))
        );
        background-clip: text;
        color: transparent;
        text-shadow: 0 0 4px oklab(
                calc(clamp(50%, var(--luma) * 2, 60%)) calc(2 * var(--tint)) calc(2 * var(--temp))/0.5);
    }

    em strong {
        --slant: -15;
        --casual: 0;
        --weight-offset: 300;

        background: linear-gradient(to right,
        oklab(
                calc(clamp(80%, var(--luma) * 2.5, 100%)) calc(2 * var(--tint) + (var(--light-tint) * 2)) calc(-2 * var(--temp) + (var(--light-temp) * 2))/1
        ),
        oklab(
                calc(clamp(80%, var(--luma) * 2.5, 100%)) calc(-2 * var(--tint) + (var(--light-tint) * 2)) calc(2 * var(--temp) + (var(--light-temp) * 2))/1)
        );
        background-clip: text;
        color: transparent;
        text-shadow: 0 0 7px oklab(
                calc(clamp(0%, var(--luma) * 2, 100%)) calc(-3 * var(--tint)) calc(-3 * var(--temp))/0.5);
    }

    .markdown-source-view.mod-cm6 .cm-link .cm-underline, .markdown-source-view.mod-cm6 .cm-url .cm-underline, .markdown-source-view.mod-cm6 .is-unresolved .cm-underline, .markdown-source-view.mod-cm6 .cm-underline {
        text-decoration-line: none;

        &:hover {
            text-decoration-line: none;
            padding-bottom: -5px !important;
        }
    }

    .cm-s-obsidian span.cm-hmd-internal-link, .cm-s-obsidian span.cm-link {
        text-decoration-line: none;
        border-bottom: 2px dotted;
        padding: 0 0.15em;
        border-radius: 4px;
        transition: padding-bottom 200ms var(--bounce);
        background: linear-gradient(to top,
        oklab(
                calc(clamp(50%, var(--luma) * 2.0, 100%)) calc(2 * var(--tint) - (var(--light-tint))) calc(2 * var(--temp) - (var(--light-temp)))  / 0.15
        ),
        oklab(
                calc(clamp(50%, var(--luma) * 2.0, 100%)) calc(-2 * var(--tint) + (var(--light-tint))) calc(-2 * var(--temp) + (var(--light-temp))) / 0.15)
        );

        &:hover {
            text-decoration-line: none;
            --weight-offset: -1000;
            padding-bottom: 1px;
            background: linear-gradient(to bottom,
            oklab(
                    calc(clamp(50%, var(--luma) * 2.0, 100%)) calc(2 * var(--tint) - (var(--light-tint))) calc(2 * var(--temp) - (var(--light-temp)))  / 0.3
            ),
            oklab(
                    calc(clamp(50%, var(--luma) * 2.0, 100%)) calc(-2 * var(--tint) + (var(--light-tint))) calc(-2 * var(--temp) + (var(--light-temp))) / 0.3)
            );
        }

        &:active {
            text-decoration-line: none;
            --weight-offset: -200;
            padding-bottom: 0;
        }

    }

    .markdown-preview-view {
        font-size: var(--font-text-size);
        font-family: var(--font-text);
        line-height: var(--line-height-normal);
        overflow-wrap: break-word;
        color: var(--text-normal);
    }


}

body {
  --image-border-color: var(--background-modifier-border);
  --image-border-width: 1px;
  --image-border-padding: 8px;
  --image-border-background: var(--td);
}

/*----Image Positions/Adjustments----*/
body {
  --micro: 70px;
  --tiny: 100px;
  --small: 200px;
  --small-med: 300px;
  --med-small: 400px;
  --medium: 500px;
  --med-tall: 600px;
  --tall: 700px;
}

.popover.hover-popover {
  --micro: 70px;
  --tiny: 100px;
  --small: 150px;
  --small-med: 200px;
  --med-small: 250px;
  --medium: 300px;
  --med-tall: 450px;
  --tall: 500px;
}

/*----Mobile----*/
@media (max-width: 500px) {
  .theme-dark, .theme-light {
    /*Mobile Sizes*/
    --radius: 0px;
    --micro: 70px;
    --tiny: 100px;
    --small: 150px;
    --small-med: 200px;
    --med-small: 250px;
    --medium: 300px;
    --med-tall: 450px;
    --tall: 500px;
  }
}
/*-Image Sizing-*/
/*Fit image within bounds WITHOUT stretching*/
img:is([alt*=cover], [alt*=cvr]),
.image-embed:is([src*="#cover"], [src*="#cvr"]),
span.image-embed:is([src*="#cover"], [src*="#cvr"]) img {
  object-fit: cover;
}

img[alt][alt]:not([alt*=relative])[alt*=hmicro] {
  height: var(--micro);
}
img[alt][alt]:not([alt*=relative])[alt*=htiny] {
  height: var(--tiny);
}
img[alt][alt]:not([alt*=relative])[alt*=hsmall] {
  height: var(--small);
}
img[alt][alt]:not([alt*=relative])[alt*=hs-med] {
  height: var(--small-med);
}
img[alt][alt]:not([alt*=relative])[alt*=hm-sm] {
  height: var(--med-small);
}
img[alt][alt]:not([alt*=relative])[alt*=hmed] {
  height: var(--medium);
}
img[alt][alt]:not([alt*=relative])[alt*=hm-tl] {
  height: var(--med-tall);
}
img[alt][alt]:not([alt*=relative])[alt*=htall] {
  height: var(--tall);
}
img[alt][alt]:not([alt*=relative])[alt*=hfull] {
  height: 100%;
}
img[alt][alt]:not([alt*=relative])[alt*=wmicro] {
  width: var(--micro);
}
img[alt][alt]:not([alt*=relative])[alt*=wtiny] {
  width: var(--tiny);
}
img[alt][alt]:not([alt*=relative])[alt*=wsmall] {
  width: var(--small);
}
img[alt][alt]:not([alt*=relative])[alt*=ws-med] {
  width: var(--small-med);
}
img[alt][alt]:not([alt*=relative])[alt*=wm-sm] {
  width: var(--med-small);
}
img[alt][alt]:not([alt*=relative])[alt*=wmed] {
  width: var(--medium);
}
img[alt][alt]:not([alt*=relative])[alt*=wm-tl] {
  width: var(--med-tall);
}
img[alt][alt]:not([alt*=relative])[alt*=wtall] {
  width: var(--tall);
}
img[alt][alt]:not([alt*=relative])[alt*=wfull] {
  width: 100%;
}

.image-embed[alt][alt*=relative],
div:not(.image-embed) > img[alt][alt*=relative] {
  --micro: 10%;
  --tiny: 20%;
  --small: 30%;
  --small-med: 40%;
  --med-small: 50%;
  --medium: 60%;
  --med-tall: 70%;
  --tall: 85%;
}
.image-embed[alt][alt*=relative][alt*=wmicro],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wmicro] {
  width: var(--micro);
}
.image-embed[alt][alt*=relative][alt*=wtiny],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wtiny] {
  width: var(--tiny);
}
.image-embed[alt][alt*=relative][alt*=wsmall],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wsmall] {
  width: var(--small);
}
.image-embed[alt][alt*=relative][alt*=ws-med],
div:not(.image-embed) > img[alt][alt*=relative][alt*=ws-med] {
  width: var(--small-med);
}
.image-embed[alt][alt*=relative][alt*=wm-sm],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wm-sm] {
  width: var(--med-small);
}
.image-embed[alt][alt*=relative][alt*=wmed],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wmed] {
  width: var(--medium);
}
.image-embed[alt][alt*=relative][alt*=wm-tl],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wm-tl] {
  width: var(--med-tall);
}
.image-embed[alt][alt*=relative][alt*=wtall],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wtall] {
  width: var(--tall);
}
.image-embed[alt][alt*=relative][alt*=hmicro],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hmicro] {
  width: var(--micro);
}
.image-embed[alt][alt*=relative][alt*=htiny],
div:not(.image-embed) > img[alt][alt*=relative][alt*=htiny] {
  width: var(--tiny);
}
.image-embed[alt][alt*=relative][alt*=hsmall],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hsmall] {
  width: var(--small);
}
.image-embed[alt][alt*=relative][alt*=hs-med],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hs-med] {
  width: var(--small-med);
}
.image-embed[alt][alt*=relative][alt*=hm-sm],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hm-sm] {
  width: var(--med-small);
}
.image-embed[alt][alt*=relative][alt*=hmed],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hmed] {
  width: var(--medium);
}
.image-embed[alt][alt*=relative][alt*=hm-tl],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hm-tl] {
  width: var(--med-tall);
}
.image-embed[alt][alt*=relative][alt*=htall],
div:not(.image-embed) > img[alt][alt*=relative][alt*=htall] {
  width: var(--tall);
}
.image-embed[alt][alt*=relative][alt*=hfull],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hfull] {
  width: 100%;
}

.image-embed[alt][alt*=relative],
div:not(.image-embed) > img[alt][alt*=relative] {
  display: block;
  margin: auto;
  max-height: 100%;
  object-fit: cover;
}

/*Height*/
/*Image Locations*/
/*Center Image*/
.img-adj-center.img-adj-center img,
img:is([alt*=ctr], [alt*=center]) {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img-adj-center.img-adj-center .is-live-preview img {
  margin-left: auto !important;
  margin-right: auto !important;
}

/*Left & Right*/
.markdown-rendered img:is([alt*=left], [alt*=locl]), .markdown-rendered img:is([src*="#left"], [src*="#locl"]), .markdown-rendered .image-embed:is([alt*=left], [alt*=locl]), .markdown-rendered .image-embed:is([src*="#left"], [src*="#locl"]) {
  float: left;
  margin-right: 2%;
  margin-top: 0px;
  margin-bottom: 0px;
}
.markdown-rendered img:is([alt*=right], [alt*=locr]), .markdown-rendered img:is([src*="#right"], [src*="#locr"]), .markdown-rendered .image-embed:is([alt*=right], [alt*=locr]), .markdown-rendered .image-embed:is([src*="#right"], [src*="#locr"]) {
  float: right;
  margin-left: 2%;
  margin-bottom: 0px;
}

/*--Image Position--*/
img[alt*="p+"], .image-embed[src*="#p+"] img {
  object-fit: cover;
}

/*Inner Image*/
img[alt*="p+c"], .image-embed[src*="#p+c"] img {
  object-position: center;
}

img[alt*="p+t"], .image-embed[src*="#p+t"] img {
  object-position: top;
}

img[alt*="p+b"], .image-embed[src*="#p+b"] img {
  object-position: bottom;
}

img[alt*="p+l"], .image-embed[src*="#p+l"] img {
  object-position: left;
}

img[alt*="p+r"], .image-embed[src*="#p+r"] img {
  object-position: right;
}

img[alt*="p+cl"], .image-embed[src*="#p+cl"] img {
  object-position: 15%;
}

img[alt*="p+ccl"], .image-embed[src*="#p+ccl"] img {
  object-position: 25%;
}

img[alt*="p+cr"], .image-embed[src*="#p+cr"] img {
  object-position: 60%;
}

img[alt*="p+ccr"], .image-embed[src*="#p+ccr"] img {
  object-position: 75%;
}

img[alt*="p+tc"], .image-embed[src*="#p+tc"] img {
  object-position: 50% 10%;
}

img[alt*="p+tcc"], .image-embed[src*="#p+tcc"] img {
  object-position: 50% 20%;
}

img[alt*="p+cct"], .image-embed[src*="#p+cct"] img {
  object-position: 50% 30%;
}

img[alt*="p+ct"], .image-embed[src*="#p+ct"] img {
  object-position: 50% 40%;
}

img[alt*="p+cb"], .image-embed[src*="#p+cb"] img {
  object-position: 50% 60%;
}

img[alt*="p+ccb"], .image-embed[src*="#p+ccb"] img {
  object-position: 50% 70%;
}

img[alt*="p+bc"], .image-embed[src*="#p+bc"] img {
  object-position: 50% 80%;
}

img[alt*="p+bcc"], .image-embed[src*="#p+bcc"] img {
  object-position: 50% 90%;
}

/*Invert Colors*/
.theme-dark img[alt*=invertb], .theme-dark .image-embed[src*="#invertb"] {
  filter: invert(1) hue-rotate(180deg);
}
.theme-dark img[alt*=invertbc],
.theme-dark .image-embed[src*="#invertbc"] {
  filter: invert(1) hue-rotate(180deg) contrast(1.5);
}

.theme-light img[alt*=invertw], .theme-light .image-embed[src*="#invertw"] {
  filter: invert(1) hue-rotate(180deg);
}
.theme-light img[alt*=invertwc], .theme-light .image-embed[src*="#invertwc"] {
  filter: invert(1) hue-rotate(180deg) contrast(1.45);
}

img:is([alt*=flip-x],
[alt*=flip-horizontal]) {
  transform: scale(-1, 1);
}
img:is([alt*=flip-y],
[alt*=flip-vertical]) {
  transform: scale(1, -1);
}
img:is([alt*=flip-xy],
[alt*=flip-vertical-horizontal]) {
  transform: scale(-1, -1);
}

/*Fit image within bounds WITHOUT stretching*/
img[alt*=cover],
img:is([alt*=cover], [alt*=cvr]),
.image-embed:is([src*="#cover"], [src*="#cvr"]),
span.image-embed:is([src*="#cover"], [src*="#cvr"]) img {
  object-fit: cover;
}

/*Fix Float Issues*/
:is(img, .image-embed)[alt*=clear],
.image-embed[src*="#clear"] {
  clear: both;
}

img[alt*=unclr],
.image-embed[src*="#unclr"] {
  clear: none !important;
}

img:is([alt~=lp], [alt~=live-preview]):is([alt*=right], [alt*=locr]),
.image-embed:is([alt~=lp], [alt~=live-preview]):is([alt*=right], [alt*=locr]) {
  float: right !important;
}
img:is([alt~=lp], [alt~=live-preview]):is([alt*=left], [alt*=locl]),
.image-embed:is([alt~=lp], [alt~=live-preview]):is([alt*=left], [alt*=locl]) {
  float: left !important;
}

.clear-hr {
  --hr-width: 100%;
}

.clear-headings :is(h1, h2, h3, h4, h5, h6),
.clear-heading-1 h1,
.clear-heading-2 h2,
.clear-heading-3 h3,
.clear-heading-4 h4,
.clear-heading-5 h5,
.clear-heading-6 h6 {
  clear: both;
}

/*Banners*/
img[alt*=banner]:not([width]),
.image-embed[alt*=banner]:not([width]) img {
  display: block;
  object-fit: cover;
  width: 100%;
  margin-bottom: 0px;
  clear: both;
}

img[alt~=banner],
.image-embed[alt~=banner] img,
.image-embed[src*="#banner"] {
  height: var(--small);
}

img[alt~="banner+small"],
.image-embed[alt~="banner+small"] img,
.image-embed[src*="#banner+small"] {
  height: var(--tiny);
}

img[alt~="banner+tall"],
.image-embed[alt~="banner+tall"] img,
.image-embed[src*="#banner+tall"] {
  height: var(--medium);
}

:is(img, .internal-embed)[alt*=sban],
:is(img, .internal-embed)[alt~=sban],
.internal-embed[src*="#sban"] img {
  object-fit: cover;
  width: 100%;
}

/*Portait*/
img[alt*=portrait],
.image-embed[alt*=portrait] img {
  object-fit: cover;
}

.image-embed[src~="#portrait"] {
  height: var(--small-med);
  width: 40%;
}

.image-embed[src~="#portrait+small"] {
  height: var(--small);
  width: 25%;
}

.image-embed[src~="#portrait+tall"] {
  height: 500px;
  width: 50%;
}

img:is([alt~=portrait],
[alt*="portrait+"]),
.image-embed:is([alt~=portrait],
[alt*="portrait+"]) img {
  --img-adj-portrait-size: var(--med-small);
  height: var(--img-adj-portrait-size);
  width: calc(var(--img-adj-portrait-size) / 1.7);
}

img[alt~="portrait+small"],
.image-embed[alt~="portrait+small"] img {
  --img-adj-portrait-size: var(--small-med);
}

img[alt~="portrait+tall"],
.image-embed[alt~="portrait+tall"] img {
  --img-adj-portrait-size: var(--medium);
}

/*Profile*/
img[alt*=profile],
.image-embed[alt*=profile] img {
  object-fit: cover;
  border-radius: 50%;
}

img[alt~=profile],
.image-embed[alt~=profile] img,
.image-embed[src*="#profile"] {
  height: var(--tiny);
  width: var(--tiny);
}

img[alt~="profile+medium"],
.image-embed[alt~="profile+medium"] img,
.image-embed[src*="#profile+medium"] {
  height: var(--small);
  width: var(--small);
}

img[alt~="profile+tall"],
.image-embed[alt~="profile+tall"] img,
.image-embed[src*="#profile+tall"] {
  height: var(--medium);
  width: var(--medium);
}

img[alt~=sprf] {
  object-fit: cover;
  border-radius: 100%;
}

/*Image Shapes*/
img[alt][alt*=circle] {
  border-radius: 50%;
}

img[alt~=square],
.image-embed[alt~=square] img {
  border-radius: 0;
}

img[alt~=border],
.internal-embed[alt~=border] img {
  border: var(--image-border-width) solid var(--image-border-color);
  padding: var(--image-border-padding);
  background: var(--image-border-background);
}

.image-captions .image-embed::after,
.image-embed[src*="#cap"]::after {
  content: attr(alt);
  color: var(--inactive, var(--faint-text));
  display: block;
  text-align: center;
}

.image-embed[src*="#cap"] {
  display: inline-block;
}
.image-embed[src*="#cap"] img {
  float: unset !important;
  object-fit: cover;
}
.image-embed[src*="#cap"][src*="#hmicro"] img {
  height: var(--micro);
}
.image-embed[src*="#cap"][src*="#htiny"] img {
  height: var(--tiny);
}
.image-embed[src*="#cap"][src*="#hsmall"] img {
  height: var(--small);
}
.image-embed[src*="#cap"][src*="#hs-med"] img {
  height: var(--small-med);
}
.image-embed[src*="#cap"][src*="#hm-sm"] img {
  height: var(--med-small);
}
.image-embed[src*="#cap"][src*="#hmed"] img {
  height: var(--medium);
}
.image-embed[src*="#cap"][src*="#hm-tl"] img {
  height: var(--med-tall);
}
.image-embed[src*="#cap"][src*="#htall"] img {
  height: var(--tall);
}
.image-embed[src*="#cap"][src*="#hfull"] img {
  height: 100%;
}
.image-embed[src*="#cap"][src*="#wmicro"], .image-embed[src*="#cap"][src*="#wmicro"] img {
  width: var(--micro);
}
.image-embed[src*="#cap"][src*="#wtiny"], .image-embed[src*="#cap"][src*="#wtiny"] img {
  width: var(--tiny);
}
.image-embed[src*="#cap"][src*="#wsmall"], .image-embed[src*="#cap"][src*="#wsmall"] img {
  width: var(--small);
}
.image-embed[src*="#cap"][src*="#ws-med"], .image-embed[src*="#cap"][src*="#ws-med"] img {
  width: var(--small-med);
}
.image-embed[src*="#cap"][src*="#wm-sm"], .image-embed[src*="#cap"][src*="#wm-sm"] img {
  width: var(--med-small);
}
.image-embed[src*="#cap"][src*="#wmed"], .image-embed[src*="#cap"][src*="#wmed"] img {
  width: var(--medium);
}
.image-embed[src*="#cap"][src*="#wm-tl"], .image-embed[src*="#cap"][src*="#wm-tl"] img {
  width: var(--med-tall);
}
.image-embed[src*="#cap"][src*="#wtall"], .image-embed[src*="#cap"][src*="#wtall"] img {
  width: var(--tall);
}
.image-embed[src*="#cap"][src*="#wfull"], .image-embed[src*="#cap"][src*="#wfull"] img {
  width: 100%;
}

.mobile-image-viewer img[alt][alt][alt] {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

/*@settings
name: Image Adjustments
id: image-adjustments
settings:
    - 
        id: info-text-SlRvb-img-adj
        type: info-text
        title: Image Adjustments by SlRvb
        description: "[Image Adjustments Snippet How-To Guide](https://publish.obsidian.md/slrvb-docs/ITS+Theme/Image+Adjustments)"
        markdown: true
    -
        title: List Overlap Fix
        description: Fix list bullets overlapping with images
        id: img-adj-list
        type: class-toggle
        default: true
    -
        title: Clear Images
        description: Push image under/over headings or horizontal lines
        id: img-adj-clears
        type: heading
        level: 1
        collapsed: true
    -
        title: Horizontal Lines
        description: Push image under/over any horizontal lines
        id: clear-hr
        type: class-toggle
    -
        title: Headings
        description: Push image under/over all headings 1-6
        id: clear-headings
        type: class-toggle
    -
        title: Heading Specific
        description: Push image under/over some headings and not others
        id: img-adj-clears-headings
        type: heading
        level: 2
        collapsed: true
    -
        title: Header 1
        id: clear-heading-1
        type: class-toggle
    -
        title: Header 2
        id: clear-heading-2
        type: class-toggle
    -
        title: Header 3
        id: clear-heading-3
        type: class-toggle
    -
        title: Header 4
        id: clear-heading-4
        type: class-toggle
    -
        title: Header 5
        id: clear-heading-5
        type: class-toggle
    -
        title: Header 6
        id: clear-heading-6
        type: class-toggle
*/
/*Theme fixes*/
.img-adj-list :is(ul, ol) {
  display: flow-root;
}

img {
    border-radius: var(--r1);
    box-shadow: var(--modular-shadow) ;
    margin: 1em;
}