:root {

    color-scheme: light dark;

    /* Change up the fonts and colors to match your brand
     * or theme of your application.
     */

    --default-font:   'Rubik', sans-serif;
    --monospace-font: 'Fira Code', monospace;

    /* Primary Colors */
    --text:       light-dark(#151515, #ffffff);
    --inverted:   light-dark(#f8f8f8, #151515);
    --background: light-dark(#ffffff, #151515);
    --accent:     light-dark(#007bff, #007bff);

    /* UI Element Colors */
    --header:  light-dark(#bebebe, #151515);
    --footer:  light-dark(#bdbdbd, #252525);
    --button:  light-dark(#d1d1d1, #404040);
    --link:    light-dark(#007bff, #8ecdff);

    /* Indicator Colors */
    --error:   light-dark(#dc3545, #dc3545);
    --danger:  light-dark(#dc3545, #dc3545);
    --success: light-dark(#28a745, #28a745);
    --warning: light-dark(#ffc107, #ffc107);
    --info:    light-dark(#ffdd51, #110c14);


    /* Change up these values to tweak the tones and shades
     * of the colors used in the application.
     */

    /* Toned-down, transparent versions of the colors. */
    --lite-tone:    hsl(from var(--text)    h s l / 0.10);
    --medium-tone:  hsl(from var(--text)    h s l / 0.35);
    --dark-tone:    hsl(from var(--text)    h s l / 0.50);
    --darker-tone:  hsl(from var(--text)    h s l / 0.75);
    --warning-tone: hsl(from var(--warning) h s l / 0.20);
    --success-tone: hsl(from var(--success) h s l / 0.20);
    --danger-tone:  hsl(from var(--danger)  h s l / 0.20);
    --error-tone:   hsl(from var(--error)   h s l / 0.20);
    --info-tone:    hsl(from var(--info)    h s l / 0.20);

    /* Shaded versions of the colors. */
    --lite-shade:    hsl(from var(--text)    h s calc(l + 85));
    --medium-shade:  hsl(from var(--text)    h s calc(l + 75));
    --dark-shade:    hsl(from var(--text)    h s calc(l + 65));
    --darker-shade:  hsl(from var(--text)    h s calc(l + 50));
    --warning-shade: hsl(from var(--warning) h s calc(l + 15));
    --success-shade: hsl(from var(--success) h s calc(l + 15));
    --danger-shade:  hsl(from var(--danger)  h s calc(l + 15));
    --error-shade:   hsl(from var(--error)   h s calc(l + 15));
    --info-shade:    hsl(from var(--info)    h s calc(l + 15));


    /* Tweak the sizing, spacing, and padding of the your application
     * to make it look and feel just right.
     */

    --base-size:  16px; /* The base font size for the page, should be in pixels,
                           and is 16px by default in most browsers. This value becomes
                           the value of '1rem' (root-em), and also effects the value
                           of 1em. Change this up for an overall 'zoom' effect. */

    /* These values stretch based on the viewport to provide
     * a responsive design that scales with the size of the screen.
     * Adjust these values to provide more or less scaling.
     */

    --text-size:   clamp(0.9rem, calc(1vw + .5rem), 1.1rem);
    --page-gutter: clamp(1.5rem, calc(3.5vw + .65rem), 3.0rem);

    /* These values are used as a baseline for the spacing, margin,
     * and padding of elements on the page. They can be adjusted
     * to provide more or less space between things overall.
     */

    --line-height:     1.2; /* default text line-height */
    --padding:      1.25em; /* default padding for things that have padding */
    --border-size:    .2em; /* default border size for things that have a border (or shadow) */
    --outline-size:   .2em; /* default outline size for things that have an outline */
    --margin:       1.25em; /* default margin for things that have margin */
    --gap:             1em; /* default gap for things that have a gap */
    --radius :       .33em; /* default border radius for things that have a border radius */
}


body {
    box-shadow: none;
}

blockquote {
    margin-block: 1.5em;
    line-height: 1.5;
    padding-block: 0;
    padding-left: 1.5em;
    border-left: .25em solid #cbcbcb;
    color: var(--darker-tone);
}


h1, h2, h3 {
    scroll-margin-top: 1.5em;
}


.slightly-more-top-margin {
    margin-top: calc(var(--margin) * 1.5);
}


img {
    max-width: 50vw;
}


aside {

    background-color: var(--lite-tone);
    font-size: 95%;
    border: none;

    details {
        details {
            /* margin-top: .5em; */
            margin-top: 2px;
            padding-top: .5em;
            border-left: 2px dotted #80808061;
            padding-left: .75em;
            margin-left: .3em;
            /* border-top-left-radius: 3px; */
            /* border-bottom-left-radius: 3px; */
        }
        summary {
            display: block;
            text-indent: 5em hanging each-line;
        }
    }

}


code {
    border-radius: 10px;
}


code:not(pre > code) {
    background-color: var(--medium-tone) !important;
    color: var(--text) !important;
    padding-inline: 6px;
    border-radius: 6px;
    font-size: 90%
}



table {

    min-width: auto;
    width: calc(100vw - 6em);
    min-width: auto;
    overflow-x: auto;
    display: block;

    td, th {
        min-width: 300px;
        line-height: 1.3;
        zoom: 0.8;
    }

    tr, th {
        background-color: black;
    }

}


section pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 2em;
    padding-right: 3em;
    width: min-content;
    max-width: calc(100lvw - (var(--page-gutter) * 2));

}