:root {

    color-scheme: 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, #fef4f8);
    --inverted:   light-dark(#f8f8f8, #151515);
    --background: light-dark(#f8f8f8, #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, #2196F3);

    /* 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.2rem);
    --page-gutter: clamp(1.5rem, calc(3.5vw + .75rem), 4.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.0; /* 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 */
}


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


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

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


aside {

    background-color: #29272a;
    font-size: 95%;

    details {

        details {
            margin-top: .5em;
            border-left: 2px solid gray;
            padding-left: .75em;
            margin-left: .3em;
        }

        summary {

            display: block;
            text-indent: 5em hanging each-line;
        }

    }


}