/* Define colors for light and dark mode */
:root {
    /* Default light mode colors */
    --background-color: white;
    --text-color: black;
    --example-background-color: rgb(238,238,255);
    --link-color: #00f;
    --link-visited-color: #a0a;
    --hover-background-color: #555753;
    --hover-color: #cdf;
    --nav-panel-background-color: #CDCCDD;
    --div-titlebox-background-color: rgb(200,255,255);
    --div-synopsisbox-backgraound-color: rgb(255,220,255);
    --pre-example-border: 1px solid rgb(180,180,180);
    --div-categorybox-border: 1px solid gray;
    --div-categorybox-background-color: #fdf6e3;
}
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark Mode Overrides */
        --background-color: #444;
        --text-color: #eee;
        --example-background-color: #aab;
        --link-color: #9df;
        --link-visited-color: #9fd;
        --hover-background-color: #ddd;
        --hover-color: #55f;
        --nav-panel-background-color: #555;
        --div-titlebox-background-color: black;
        --div-synopsisbox-backgraound-color: black;
        --pre-example-border: 1px solid black;
        --div-categorybox-border: 1px solid gray;
        --div-categorybox-background-color: #544;
    }
}

/* Overrides to the default Makeinfo CSS */
div.display {margin-left: 0}
div.example {
    margin-left: 0;
    font-family: "Courier New", "DejaVu Sans Mono", monospace
}
/* end of overrides */

body {
    color: var(--text-color);
    background: var(--background-color);
    margin-left: 5px;
    margin-right: 5px;
    font-family: Arial, Verdana, Helvetica, sans-serif
}
h1 { font-size: 150% }
h2 { font-size: 125% }
h3 { font-size: 110% }
a:link {
    text-decoration: none;
    color: var(--link-color);
}
a:visited {color: var(--link-visited-color) }
a:hover, span.button:hover {
    background-color: var(--hover-background-color);
    color: var(--hover-color);
}
/*
 * What are these used for?  I (rtoy) can't find these anywhere.
 * Commenting these out for now, but they should be removed if they're
 * not really used anywhere.
 */
/*
div.textbox {
    border: solid;
    border-width: thin;
    padding: 1em 2em;
}
div.titlebox {
    border: none;
    padding-top: 1em 2em;
    background: var(--div-titlebox-background-color);
}
div.synopsisbox {
    border: none;
    padding-top: 1em 2em;
    background: var(--div-synopsisbox-background-color);
}
*/

pre.example, pre.example-preformatted {
    border: var(--pre-example-border);
    color: var(--text-color);
    padding: 5px;
    background-color: var(--example-background-color);
    /* Add scrollbar for examples for narrow windows */
    overflow: auto;
}

div.spacerbox { border: none; padding: 2em 0 }
div.image { margin: 0; padding: 1em; text-align: center }
div.categorybox {
    border: var(--div-categorybox-border);
    padding: 1em;
    background: var(--div-categorybox-background-color);
}
img {
    max-width:80%;
    max-height: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto
}
tt, code { font-family: "Courier New", "DejaVu Sans Mono", monospace }

/*
 * Put background color on the navigation bar
 * Texinfo 7.1 and later uses div.nav-panel.  6.8 uses div.header.
 */
div.header, div.nav-panel {
    background-color: var(--nav-panel-background-color);
    padding: 3px 10px;
}

/*
 * Pygments uses a line height of 125%, which seems too small compared
 * to what we used to do.
 */
div.highlight pre {
    line-height: normal !important;
}

/* Reduce the indentation of lists and descriptions */
ul,ol { padding-left: 1em }
dd { margin-left: 0.5em }

@media screen and (min-width: 600px) {
    body {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
    div.display { margin: 0 2em }
    div.example { margin: 0 2em }
    pre.example, pre.example-preformatted { padding: 1em }
    ul,ol { padding-left: 2em }
    dd { margin-left: 1.5em }
}

/*
 * CSS customizations for pygment highlighting
 */

/*
 * For pygments, make the background color of the highlighted code the
 * same as the example background color.  Without this, it looks funny.
 */

div.highlight {
    background-color: var(--example-background-color) !important;
}

.example.user-maxima {
    overflow-x: auto
}

.highlight.pre {
    /*
     * Lines for highlighted examples are too close by default with
     * pygments.  Make it larger.
     */
    line-height: normal !important;
}