:root {
    --bg-color: Beige;
    --fg-color: DimGray;
    --fg-color-bright: Black;
    --fg-color-dim: DimGray;
    --todo-color: Green;
}


body {

    background-color: var(--bg-color);
    color: var(--fg-color);
    font-family: monospace;
    font-size: large;
    margin-left: 15%;
    margin-right: 15%;

    /* Links */
    a {
        color: var(--fg-color-bright);
    }

    blockquote.pull-quote {
        color: var(--fg-color-dim);
        font-style: italic;
    }

    /* Contents; Toc-Trees */
    div.toctree-wrapper {
        border-style: solid;
        border-width: 2px;
        color: var(--fg-color);
        margin-left: 30%;
        margin-right: 30%;
        margin-top: 2em;
        margin-bottom: 2em;
        padding: .5em;
        a {
            color: var(--fg-color);
        }
        p.caption {
            font-weight: bold;
            text-align: center;
            text-decoration: underline;
        }
    }

    div.admonition {
        border-style: solid;
        border-width: 2px;
        margin-left: 10%;
        margin-right: 10%;
        padding-left: 1em;
        padding-right: 1em;
        p.admonition-title {
            font-weight: bold;
        }
    }

    div.admonition-todo {
        color: var(--todo-color);
    }

    dl.simple {
        dt {
            text-decoration: underline;
        }
    }

    /* Copyright */
    div.footer {
        font-size: small;
        font-style: italic;
        text-align: center;
    }

    /* Navigation Bar */
    div.related {
        border-bottom-style: dashed;
        border-bottom-width: 2px;
        border-top-style: dashed;
        border-top-width: 2px;
        display: block flow;
        margin-top: 2em;
        margin-bottom: 2em;
        padding-top: 1em;
        padding-bottom:1em;
        h3, li, ul {
            display: inline;
        }
    }

    /* Headers */
    h1, h2, h3, h4, h5, h6 {
        color: var(--fg-color-bright);
        font-size: large;
        font-weight: bold;
        text-decoration: underline;
    }
    h1 {
        text-align: center;
    }

    hr {
        margin-top: 2em;
        margin-bottom: 2em;
        margin-left: 5%;
        margin-right: 5%;
    }

}

@media only screen and (max-width: 600px) {
    body {
        font-size: medium;
        margin-left: 5%;
        margin-right: 5%;

        /* Contents; Toc-Trees */
        div.toctree-wrapper {
            margin-left: 10%;
            margin-right: 10%;
            padding-right: .5em;
        }

        /* Navigation Bar */
        div.related {
            font-size: x-small;
            text-align: center;
            h3 {
                display: none;
            }
            li, ul {
                display: inline;
            }
            li.nav-item {
                display: none;
            }
            li.nav-item-0 {
                display: inline;
                color: var(--bg-color);
                a {
                    color: var(--fg-color-bright);
                }
            }
        }

        h1, h2, h3, h4, h5, h6 {
            font-size: medium;
        }
    }
}