@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
/* CSS RESET http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
    background-color: #fdfdfd;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* APP CSS */

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-size: 17.6px;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.17em;
}

p, ol, ul {
    margin-top: 1em;
}

a {
    text-decoration: none;
}

ol {
    list-style: decimal;
    margin-left: 1em;
}

ul {
    list-style: disc;
    margin-left: 1em;
}

.container {
    max-width: 1000px;
    width: 100%;
    margin: 0px 0px 0px 0px;
}

    .container section {
        margin: 0px 16px 0px 16px;
    }


header {
    display: flex;
    flex-direction: column;
    align-items: normal;
    /*    background-color: #BB88FF;*/
    background-image: linear-gradient(-45deg, red, #BB88FF, green);
    color: #FFF;
    padding: 0em 0 0em 0;
}
    header h1, h2, h3, h4, h5, h6 {
        color: white;
    }

    header nav.main {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: rgba(128, 128, 128, 0.2);
        padding: 1em 0 1em 0;
    }

        header nav.main .container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
        }

            header nav.main .container .appname a {
                color: #FFF;
                text-decoration: none;
                font-weight: bold;
                margin-left: 1em;
            }

            header nav.main .container .links {
            }

                header nav.main .container .links a {
                    color: #FFF;
                    text-decoration: none;
                    margin-right: 1em;
                }


    header .title-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0em 0 0em 0;
    }

        header .title-section .container h1 {
            margin: 1em 16px 1em 16px;
        }

        header .title-section .container nav.store-badges {
            margin-top: 2em;
        }

    header .container .hero {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        padding: 8em 0em 10em 0;
    }

        header .container .hero .title {
            margin-top: -6em;
            padding-right: 4em;
            min-width: 20em;
        }

            header .container .hero .title h1 {
                margin: 0;
                font-size: 3.25rem;
                font-weight: bold;
            }

            header .container .hero .title p {
                font-size: 1.25rem;
                opacity: 0.75;
            }

        header .container .hero .screenshot img {
            max-width: 100%;
            max-height: 40rem;
        }

#article {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}


img.screenshot {
    max-width: 320px;
    max-height: 320px;
}

.document {
    width: 100%;
}

    .document img {
        border-radius: 1rem;
    }

.docsection {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4em;
    padding-bottom: 5em;
    margin: 0;
}

    .docsection:nth-child(even) {
        background-color: rgba(128,128,128,0.125);
    }

    .docsection h1, .docsection h2, .docsection h3 {
        margin-top: 2rem;
    }

    .docsection .docrow {
        display: flex;
        flex-direction: row;
        align-items: start;
        margin: 0px 16px 0px 16px;
    }

        .docsection .docrow .doccol {
            width: 100%;
            padding: 1em;
        }

            .docsection .docrow .doccol img {
                width: 100%;
            }


footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*    border-top: solid 2px rgba(128, 128, 128, 0.5);*/
    background-color: rgba(128, 128, 128, 0.125);
    margin-top: 10em;
    padding: 4em 0em 4em 0em;
}

    footer nav.store-badges {
        margin-top: 1em;
    }

.admin-link {
    opacity: 0.075;
    text-align: center;
    color: #808080 !important;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #222;
        color: #ccc;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #fff;
    }
}