/**
 * -------------------------------------------------------------------------
 *
 * The default styles for the Static page.
 *
 * -------------------------------------------------------------------------
 *
 * @package    MimimiFramework
 * @subpackage Examples / Static Pages only
 * @license    GPL-2.0
 *             https://opensource.org/license/gpl-2-0/
 * @copyright  2022 MiMiMi Community
 *             https://mimimi.software/
 *
 * -------------------------------------------------------------------------
 */

    @import url( '../reset.css'     );
    @import url( '../fonts.css'     );
    @import url( '../autoscale.css' );

    :root {
        --pageBackground: #eceff166;
        --pageBorder: #cfd8dc;
        --blockquoteBackground: #fff;
        --blockquoteBorder: #eceff1;
        --textColor: #263238;
        --linkColor: #48f;
        --linkHoverColor: #e91e63;
        --figureCaptionBackground: #cfd8dc;
        --figureCaptionBorder: #263238;
        --figureCaptionColor: #607d8b;
    }

    .to-left {
        text-align: left;
    }
    .center {
        text-align: center;
    }
    .to-right {
        text-align: right;
    }
    .justify {
        text-align: justify;
    }

    html {
        background: white;
        color: var( --textColor );
        display: block;
        font-family: var( --fontName );
        font-size: var( --fontSize );
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

        body {
            display: block;
            width: 100%;
            height: 100%;
            overflow-x: hidden;
        }

            .wrapper {
                display: block;
                width: 100%;
                padding: 1rem;
            }

                .content {
                    background: var( --pageBackground );
                    border: var( --pageBorder ) 1px solid;
                    display: block;
                    line-height: 1.5;
                    width: 50rem;
                    padding: 1.5rem;
                }
                .content:has(> .form > .ck-editor) {
                    background: transparent;
                    border: none;
                    padding: 0;
                }
                .ck-editor__editable {
                    background: var( --pageBackground ) !important;
                }

                    h1,
                    h2,
                    h3,
                    h4,
                    h5,
                    h6 {
                        display: block;
                        font-size: 1.5rem;
                        font-weight: 900;
                        margin-bottom: 1rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    h2 {
                        font-size: 1.4rem;
                        font-weight: bold;
                    }
                    h3 {
                        font-size: 1.3rem;
                        font-weight: bold;
                    }
                    h4 {
                        font-size: 1.2rem;
                        font-weight: bold;
                    }
                    h5 {
                        font-size: 1.1rem;
                        font-weight: bold;
                    }
                    h6 {
                        font-size: 1rem;
                        font-weight: bold;
                    }

                    hr {
                        background: transparent;
                        border: none;
                        border-bottom: 0.5em solid #ccc;
                        display: block;
                        width: 100%;
                        height: 1px;
                        margin: 0 0 1rem;
                    }

                    pre {
                        background: var( --blockquoteBackground );
                        border: var( --blockquoteBorder ) 1px solid;
                        border-left-width: 0.5rem;
                        display: block;
                        font-family: monospace;
                        font-size: 1rem;
                        line-height: inherit;
                        margin-bottom: 1rem;
                        padding: 1.5rem;
                    }

                        pre code {
                            background: transparent !important;
                            padding: 0 !important;
                        }

                    blockquote {
                        background: var( --blockquoteBackground );
                        border: var( --blockquoteBorder ) 1px solid;
                        border-left-width: 0.5rem;
                        display: block;
                        font-size: 1rem;
                        line-height: inherit;
                        margin-bottom: 1rem;
                        padding: 1.5rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                        blockquote > *:last-child {
                            margin-bottom: 0;
                        }

                    p {
                        display: block;
                        font-size: 1rem;
                        line-height: inherit;
                        margin-bottom: 1rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                        b,
                        strong {
                            display: inline-block;
                            font-weight: bold;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            vertical-align: bottom;
                        }

                        i,
                        em {
                            display: inline-block;
                            font-style: italic;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            vertical-align: bottom;
                        }

                        u {
                            display: inline-block;
                            text-decoration: underline;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            vertical-align: bottom;
                        }

                        s {
                            display: inline-block;
                            text-decoration: line-through;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            vertical-align: bottom;
                        }

                        code {
                            background: var( --blockquoteBorder ) !important;
                            border-radius: 0.5em !important;
                            font-family: monospace;
                            padding: 0 0.5em !important;
                            display: inline-block;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            vertical-align: bottom;
                        }

                        sup {
                            vertical-align: super;
                            font-size: smaller;
                            display: inline-block;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        sub {
                            vertical-align: bottom;
                            margin-bottom: -0.25em;
                            font-size: smaller;
                            display: inline-block;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        a {
                            color: var( --linkColor );
                            cursor: pointer;
                            display: inline-block;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            text-decoration: underline;
                            vertical-align: bottom;
                        }
                        a:hover,
                        a:active,
                        a:focus {
                            color: var( --linkHoverColor );
                        }

                    ul,
                    ol {
                        margin-bottom: 1rem;
                        margin-left: 2.5rem;
                    }

                        ul ul,
                        ul ol,
                        ol ul
                        ol ol {
                            margin-bottom: 0;
                        }

                        li {
                            padding-left: 0.5rem;
                        }
                        li + li,
                        ul ul li,
                        ul ol li,
                        ol ul li,
                        ol ol li {
                            margin-top: 0.5rem;
                        }

                    figure {
                        display: block;
                        margin-bottom: 1rem;
                    }
                    figure.image {
                        width: fit-content;
                        text-align: center;
                    }
                    figure.image-style-side {
                        float: right;
                        margin-left: 1rem;
                        width: 50%;
                    }
                    figure.image.image_resized {
                    }

                        img {
                            display: block;
                            margin-bottom: 1rem;
                        }

                        .image-style-align-left {
                            display: block;
                            margin-bottom: 1rem;
                            float: left;
                            margin-right: 1rem;
                            width: 50%;
                        }

                        .image-style-align-right {
                            display: block;
                            margin-bottom: 1rem;
                            float: right;
                            margin-left: 1rem;
                            width: 50%;
                        }

                        figcaption {
                            background: var( --figureCaptionBackground );
                            border-top: var( --figureCaptionBorder ) 0.25rem solid;
                            color: var( --figureCaptionColor );
                            padding: 0.5rem 1rem;
                            margin-top: -1rem;
                            display: block;
                            font-size: 75%;
                            text-align: center;
                        }

                    figure.table {
                    }

                    .content > *:last-child {
                        margin-bottom: 0;
                    }

                .footnote {
                    display: block;
                    margin-top: 0.5rem;
                    text-align: center;
                }
                .footnote:empty {
                    display: none !important;
                }

                    .footnote a,
                    .footnote .tools summary {
                        color: #90a4ae;
                        line-height: 1.5;
                        margin: 0.5rem 1rem 0;
                        padding: 0;
                        text-decoration: none;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .footnote .tools summary + div {
                        background: white;
                        border-color: var( --pageBorder );
                        bottom: 2rem;
                    }
                    .footnote a {
                        display: inline-block;
                    }
                    a:hover,
                    a:active,
                    a:focus,
                    a.tool:hover,
                    a.tool:active,
                    a.tool:focus,
                    .footnote .tools summary:hover,
                    .footnote .tools summary:active,
                    .footnote .tools summary:focus {
                        color: var( --linkHoverColor );
                    }