/**
 * -------------------------------------------------------------------------
 *
 * The styles extracted from code pen "Don Quixote - Pull Quotes - CSS" by
 * Josetxu (https://codepen.io/josetxu/pen/Poyygyg) and adapted to different
 * pages of this application.
 *
 * -------------------------------------------------------------------------
 */

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

    @import url('https://fonts.googleapis.com/css2?family=Norican&display=swap');

    :root {
        --linkColor:      #fff8;
        --sublinkColor:   #999;
        --linkHoverColor: #f80;
    }

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

    html {
        background: white;
        display: block;
        font-family: var( --fontName );
        font-size: var( --fontSize );
        width: 100vw;
    }

        body {
            display: block;
        }

            body > .wrapper {
                background: #1d1e1f;
                display: block;
                padding: 1.25rem 1.25rem 0.75rem;
            }

                .wrapper > .content {
                    background: white;
                    display: block;
                    width: 80vw;
                    margin: 0 auto;
                    padding: 1.25rem;
                }
                .wrapper > .content:has(> .form) {
                    padding: 0;
                }

                    article {
                        font-size: 0.85rem;
                        font-family: sans-serif; 
                    }

                    .content > article,
                    .ck.ck-editor__editable_inline > article,
                    .ck.ck-editor__editable_inline:not(:has(article)),
                    .form > .topbar + .aside + .left:not(:has(article)),
                    .form > .topbar + .aside + .left > article {
                        column-count: 3;
                        column-width: auto;
                    }
                    .form > .topbar + .aside + .left,
                    .ck.ck-editor__editable_inline {
                        padding: 1rem !important;
                    }

                        h1,
                        h2,
                        h3,
                        h4,
                        h5,
                        h6 {
                            color: #555;
                            display: block;
                            font-size: 1.25rem;
                            font-weight: bold;
                            margin: 0 auto 1rem !important;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        article p,
                        .ck.ck-editor__editable_inline p {
                            color: #555;
                            display: block;
                            margin: 0 auto 1rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        article p:has(code),
                        .ck.ck-editor__editable_inline p:has(code) {
                            border-top: 2px dotted #0002;
                            border-bottom: 2px dotted #0002;
                            color: #0008;
                            font-size: 0.8em;
                            padding: 1em;
                        }

                            article p code,
                            .ck.ck-editor__editable_inline p code {
                                background: transparent;
                                display: inline-block;
                                font-family: inherit;
                                padding: 0;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                vertical-align: bottom;
                            }

                                article p a,
                                .ck.ck-editor__editable_inline p a {
                                    color: inherit;
                                    display: inline-block;
                                    text-decoration: underline;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    vertical-align: bottom;
                                }

                        article ul,
                        article ol,
                        .ck.ck-editor__editable_inline ul,
                        .ck.ck-editor__editable_inline ol {
                            color: #555;
                            display: block;
                            margin: 0 auto 1rem;
                            margin-left: 2.5rem;
                        }

                        article hr,
                        .ck.ck-editor__editable_inline hr {
                            background: transparent;
                            border: none;
                            border-bottom: 0.25em solid #666;
                            display: block;
                            width: 100%;
                            height: 1px;
                            margin: 0 0 1rem;
                        }

                        article pre,
                        .ck.ck-editor__editable_inline pre {
                            background: linear-gradient(45deg, #fff0 15% ,#eee, #fff0 85%);
                            border: none;
                            box-sizing: border-box;
                            display: block;
                            --bd: #666;
                            color: var(--bd);
                            font-family: monospace;
                            width: 100%;
                            margin: 0 auto 1rem;
                            padding: 1rem;
                        }

                            article pre code,
                            .ck.ck-editor__editable_inline pre code {
                                display: inline-block;
                                font-family: inherit;
                                padding: 0;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                vertical-align: bottom;
                            }

                        article blockquote,
                        .ck.ck-editor__editable_inline blockquote {
                            border: none;
                            box-sizing: border-box;
                            display: block;
                            width: 100%;
                            margin: 0 auto;
                            padding: 0 0.5rem;
                            overflow: visible;
                        }

                            article blockquote p,
                            .ck.ck-editor__editable_inline blockquote p {
                                font-size: 1.65em;
                                font-family: 'Norican', cursive;
                                background: linear-gradient(45deg, #fff0 15% ,#eee, #fff0 85%);
                                padding: 1.5em;
                                box-sizing: border-box;
                                position: relative;
                                text-indent: 1em;
                                border-radius: 0.1em;
                                text-shadow: -1px -1px 1px #222, 0px 0px 1px #fffc;
                                --bd: #666;
                                color: var(--bd);
                                color: #fff5;
                                overflow: visible;
                            }

                            article blockquote p:before,
                            article blockquote p:after,
                            .ck.ck-editor__editable_inline blockquote p:before,
                            .ck.ck-editor__editable_inline blockquote p:after {
                                content: "\201C";
                                text-indent: 0.33em;
                                border-radius: 0.025em;
                                left: -0.06em;
                                top: -0.06em;
                                position: absolute;
                                height: 0.8em;
                                width: 0.8em;
                                font-size: 4em;
                                line-height: 1.65em;
                                --cxy: calc(0.1em + 1px);
                                --cg1: -96deg;
                                --cg2: -6deg;
                                --cg1x: 1em;
                                --cg1y: calc(0.1em + 1px);
                                --cg2x: calc(0.1em + 1px);
                                --cg2y: 1em;
                                background: 
                                    conic-gradient(from var(--cg1) at var(--cg1x) var(--cg1y), #fff0 0 0.5deg, var(--bd) 1deg 1.5deg, #fff0 2deg 2.5deg, var(--bd) 3deg 3.5deg, #fff0 4deg 4.5deg, var(--bd) 5deg 5.5deg, #fff0 6deg 6.5deg, var(--bd) 7deg 7.5deg, #fff0 8deg 8.5deg, var(--bd) 9deg 9.5deg, #fff0 10deg 10.5deg, var(--bd) 11deg 11.5deg, #fff0 12deg 12.5deg ),
                                    conic-gradient(from var(--cg2) at var(--cg2x) var(--cg2y), #fff0 0 0.5deg, var(--bd) 1deg 1.5deg, #fff0 2deg 2.5deg, var(--bd) 3deg 3.5deg, #fff0 4deg 4.5deg, var(--bd) 5deg 5.5deg, #fff0 6deg 6.5deg, var(--bd) 7deg 7.5deg, #fff0 8deg 8.5deg, var(--bd) 9deg 9.5deg, #fff0 10deg 10.5deg, var(--bd) 11deg 11.5deg, #fff0 12deg 12.5deg ),
                                    repeating-radial-gradient(circle at var(--cxy) var(--cxy), var(--bd) 0.035em, #fff0 calc(0.035em + 1px) 0.045em, var(--bd) calc(0.045em + 1px) 0.065em);
                                background-size:  calc(100% - 0.25em) 100%, 100% calc(100% - 0.25em), 0.22em 0.22em;
                                background-repeat: no-repeat;
                                background-position: 100% 50%, 50% 100%, 0 0;
                            }

                            article blockquote p:after,
                            .ck.ck-editor__editable_inline blockquote p:after {
                                content: "\201D";
                                left: inherit;
                                top: inherit;
                                right: -0.06em;
                                bottom: -0.06em;
                                display: flex;
                                justify-content: flex-end;
                                align-items: flex-end;
                                line-height: 0.35em;	
                                text-indent: -0.6em;
                                --cg1: 84deg;
                                --cg2: 174deg;
                                --cg1x: -0.5em;
                                --cg1y: calc(0.675em + 1px);
                                --cg2x: 0.7em;
                                --cg2y: calc(-0.5em + 1px);
                                background-position: 0% 50%, 50% 0%, 100% 100%;
                            }

                        figure {
                            box-sizing: border-box;
                            display: block;
                            width: 100%;
                            margin: 0 auto 1rem;
                        }
                        figure.image {
                        }

                            figure.image img {
                                display: block;
                                width: 100%;
                                filter: sepia(0);
                            }

                            figure.image figcaption {
                                color: #999;
                                display: block;
                                font-size: 0.75rem;
                                margin: 0.5rem 0 0;
                                text-align: right;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }

                                figure.image a {
                                    color: inherit;
                                    text-decoration: none;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }

                                figure.image a:hover,
                                figure.image a:active,
                                figure.image a:focus {
                                    color: var( --linkHoverColor );
                                }

                        @media only screen and (max-width:1200px) {
                            article {
                                column-count: 2;
                                column-width: auto;
                            }
                        }

                        @media only screen and (max-width: 600px) {
                            article {
                                column-count: 1;
                                column-width: auto;
                            }
                        }

                        @media only screen and (max-width: 800px) {
                            .form > .topbar {
                                background: #1d1e1f !important;
                            }
                                .form > .topbar span {
                                    color: var(--topbarXLColor);
                                }
                            .form > .aside {
                                background: #1d1e1f !important;
                            }
                        }

                        .form > .right {
                            background: #1d1e1f;
                        }

                            .form > .right .btn {
                                color: var( --linkColor ) !important;
                            }

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

                    .footnote a,
                    .footnote .tools summary {
                        color: var( --linkColor );
                        line-height: 1.5;
                        margin: 0.5rem 1rem 0;
                        text-decoration: none;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .footnote .tools summary + div {
                        background: white;
                        border-color: var( --sublinkColor );
                        bottom: 2rem;
                        left: 1rem;
                    }
                        .footnote .tools summary + div a {
                            color: var( --sublinkColor );
                        }
                        .footnote .tools summary + div a:hover,
                        .footnote .tools summary + div a:active,
                        .footnote .tools summary + div a:focus {
                            background: var( --linkHoverColor );
                            color: white;
                        }
                    .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 );
                    }