/**
 * -------------------------------------------------------------------------
 *
 * CSS variables.
 *
 * -------------------------------------------------------------------------
 */

:root {
    --font:               'EB Garamond', serif;
    --font-title:         'Playfair Display', serif;
    --font-sans-serif:    'Manrope', sans-serif;

    --background:         #fff;
    --background-active:  #e8eaf6;
    --foreground:         #1c1f33;
    --foreground-light:   #1c1f3388;
    --foreground-active:  #1a237e;
    --foreground-admin:   #455a64;

    --background-error:   #e53935;
    --foreground-error:   #ffebee;

    --background-success: #43a047;
    --foreground-success: #e8f5e9;

    --filled:             #666;
    --filled-light:       var(--foreground-light);

    --moderating:         #ec407a;
}

/**
 * -------------------------------------------------------------------------
 *
 * Initialize some styles.
 *
 * -------------------------------------------------------------------------
 */

* {
    box-sizing: border-box;
}

a {
    color: var(--foreground);
    display: inline-block;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
a:hover,
a:focus,
a:active,
a:visited {
    color: var(--foreground-active);
    transition: 0.33s ease;
}

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

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

small {
    font-size: 80%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    vertical-align: bottom;
}

code {
    font-family: monospace;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    vertical-align: bottom;
}

hr {
    background: transparent;
    border: none;
    border-top: solid 1px var(--foreground-light);
    border-bottom: solid 2px var(--foreground);
    display: block;
    height: 6px;
    margin: 1em 0;
}

.switch {
    background: transparent;
    border: none;
    color: transparent;
    outline: none;
    cursor: default;
    pointer-events: none;
    display: block;
    height: 10px;
    width: 10px;
    overflow: hidden;
    position: fixed;
    top: -100px;
    left:-100px;
    z-index: -1;
}

/**
 * -------------------------------------------------------------------------
 *
 * A page document.
 *
 * -------------------------------------------------------------------------
 */

html {
    display: block;
    margin: 0;
    padding: 0;
}

html.home             { }
html.newspaper.read   { }
html.newspaper.add    { }
html.newspaper.delete { }
html.newspaper.edit   { }
html.settings.edit    { }
html.error404         { }

    body {
        background: var(--background);
        background: url('../images/paper_fibers.png') repeat;
        color: var(--foreground);
        display: block;
        font-family: var(--font);
        font-size: 1.1rem;
        padding: 4rem 2rem;
        line-height: 1.3;
        text-align: justify;
        column-break-inside: avoid;
    }

/**
 * -------------------------------------------------------------------------
 *
 * A page screen area.
 *
 * -------------------------------------------------------------------------
 */

.page {
    display: block;
    max-width: 1135px;
    margin: auto;
    position: relative;
}

    .page > .wrapper {
        display: block;
    }

    .page > #switch-test:not(:checked) ~ .wrapper.test,
    .page > #switch-test:checked ~ *:not(.wrapper.test):not(.btn.test) {
        display: none !important;
    }

    @media (min-width: 704px) {
        .page > .wrapper {
            display: grid;
            grid-template-columns: repeat(4, 1fr) 23%;
            grid-template-rows: repeat(5, auto);
            grid-gap: 1.33rem;
        }
    }

        /**
         * -----------------------------------------------------------------
         *
         * All blocks on the page.
         *
         * -----------------------------------------------------------------
         */

        .page .edition,
        .page .header,
        .page .content,
        .page .form,
        .page .tools,
        .page .footer {
            display: block;
            grid-column: 1/-1;
        }

        @media (min-width: 484px) {
            html.newspaper.read .page .content,
            html.newspaper.add .page > .wrapper.test .content,
            html.newspaper.edit .page > .wrapper.test .content {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-gap: 1.33rem;
            }
        }

        @media (min-width: 704px) {
            html.newspaper.read .page .content,
            html.newspaper.add .page > .wrapper.test .content,
            html.newspaper.edit .page > .wrapper.test .content {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (min-width: 960px) {
            html.newspaper.read .page .content,
            html.newspaper.add .page > .wrapper.test .content,
            html.newspaper.edit .page > .wrapper.test .content {
                grid-template-columns: repeat(4, 1fr) 22.5%;
            }
        }

        /**
         * -----------------------------------------------------------------
         *
         * The block "Name of Newspaper". It is the topmost block.
         *
         * -----------------------------------------------------------------
         */

        .edition {
            font: 50px/1 'Playfair Display SC';
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

        @media (min-width: 704px) {
            .edition {
                font: 70px/1 'Playfair Display SC';
            }
        }

        /**
         * -----------------------------------------------------------------
         *
         * The second top block and the bottommost block.
         *
         * -----------------------------------------------------------------
         */

        .header,
        .footer {
            border: solid var(--foreground);
            border-width: 2px 0;
            margin: 1.5rem 0;
            padding: 3px 0;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .footer {
            border-width: 2px 0 0;
            text-transform: none;
        }

        @media (min-width: 704px) {
            .header,
            .footer {
                margin: 0;
            }
        }

            .header > .wrapper,
            .footer > .wrapper {
                display: flex;
                align-items: center;
                border: solid var(--foreground-light);
                border-width: 1px 0;
            }

            .footer > .wrapper {
                border-width: 1px 0 0;
            }

                .header > .wrapper > *,
                .footer > .wrapper > * {
                    display: block;
                    flex: 1;
                    padding: 8px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 100%;
                }

                .header .number    {                        }
                .header .date      { text-transform: none;  }
                .header .slogan    {                        }
                .footer .copyright { display: inline-block;                                                 }
                .footer .credits   { display: inline-block; color: var(--foreground-light); font-size: 75%; }

                .header a,
                .footer a {
                    outline: none;
                    cursor: pointer;
                    color: inherit;
                    text-decoration: none;
                }

                .header a[href=""],
                .footer a[href=""] {
                    cursor: default;
                    pointer-events: none;
                }

                .header a:visited,
                .footer a:visited {
                    outline: none;
                    text-decoration: none;
                }

                .header a:hover,
                .header a:active,
                .header a:focus,
                .footer a:hover,
                .footer a:active,
                .footer a:focus {
                    outline: none;
                    color: var(--foreground-active);
                    text-decoration: none;
                }

                @media (max-width: 484px) {
                    .header .number,
                    .header .date,
                    .header .slogan {
                        font-size: 75%;
                    }
                    .footer > .wrapper {
                        display: block;
                    }
                        .footer .copyright,
                        .footer .credits {
                            display: block;
                            padding-bottom: 0;
                        }
                }

        /**
         * -----------------------------------------------------------------
         *
         * The block with the page main content.
         *
         * -----------------------------------------------------------------
         */

        .content {
        }

            p {
                display: block;
                line-height: 1.3;
                margin: 0;
            }

            p + p {
                margin-top: 1em;
            }

                p a {
                    display: inline;
                }

            /**
             * -------------------------------------------------------------
             *
             * The sidebar.
             *
             * -------------------------------------------------------------
             */

            .content .sidebar {
                border-top: transparent 3px solid;
                box-shadow: var(--foreground) 0 2px 0 inset,
                            var(--foreground-light) 0 -1px 0;
                display: block;
                margin-top: 1.33rem;
                padding-top: 1.33rem;
            }

            @media (min-width: 484px) {
                .content .sidebar {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-gap: 1.33rem;
                    grid-column: span 4;
                    margin: 0;
                }
                    .content .sidebar > .title {
                        grid-column: 1/-1;
                    }
            }

            @media (min-width: 704px) {
                .content .sidebar {
                }
            }

            @media (min-width: 960px) {
                .content .sidebar {
                    border: none;
                    border-left: transparent 3px solid;
                    box-shadow: var(--foreground) 2px 0 0 inset,
                                var(--foreground-light) -1px 0 0;
                    display: block;
                        /* grid-template-columns: 1fr; */
                    grid-column: span 1/-1;
                    grid-row: 1/span 5;
                    padding-top: 0;
                    padding-left: 1.33rem;
                }
                .content > .size5x1:first-child ~ .sidebar {
                    grid-row: 2/span 5;
                }
                    .content .sidebar > .article {
                        grid-template-columns: 1fr !important;
                    }
            }

                .content .sidebar > .title {
                    font: italic 20px var(--font-title);
                }

                .content .sidebar > .article {
                    margin-top: 1.33rem;
                }

                    .content .sidebar > .article .image {
                    }

                        .content .sidebar > .article .image img,
                        .content .sidebar > .article .image svg {
                            height: auto;
                        }

            /**
             * -------------------------------------------------------------
             *
             * The article.
             *
             * -------------------------------------------------------------
             */

            .content .article {
                display: block;
            }

            .article + .article {
                margin: 1.33rem 0 0;
            }

            .content .layoutI-T-C,
            .content .layoutI-T-CC,
            .content .layoutI-T-CCC,
            .content .layoutI-T-CCCC,
            .content .sidebarI-T-C {
                display: grid;
                grid-template-columns: repeat(3, 1fr) 25%;
                grid-template-rows: repeat(2, auto);
                grid-gap: 1.33rem;
                grid-column: 1/-1;
                grid-row: auto;
            }

            .content .size1x1,
            .content .size2x1,
            .content .size3x1,
            .content .size4x1,
            .content .size5x1 {
                grid-template-rows: 1fr !important;
            }

                .content .layoutI-T-C > *,
                .content .layoutI-T-CC > *,
                .content .layoutI-T-CCC > *,
                .content .layoutI-T-CCCC > *,
                .content .sidebarI-T-C > * {
                    grid-column: 1/-1;
                }

            /**
             * -------------------------------------------------------------
             *
             * If the article is styled as SOURCE CODE.
             *
             * -------------------------------------------------------------
             */

            .content .coding {
            }

                .coding > .credits,
                .coding > .title {
                }

                    .coding > .credits .title {
                    }

                        .coding > .title small,
                        .coding > .credits .title small {
                        }

                .coding .image {
                }

                    .coding .image .credits {
                    }

                    .coding .image img {
                    }

                    .coding .image .alt {
                    }

                .coding .text {
                    background-color: var(--filled-light);
                    color: var(--background);
                    font-family: monospace;
                    font-size: 0.85rem;
                    padding: 0.66em;
                    white-space: pre;
                    overflow-x: auto;
                }

                    .coding .text p {
                        margin: 0;
                    }

            /**
             * -------------------------------------------------------------
             *
             * If the article is styled as a GRAY BLOCK.
             *
             * -------------------------------------------------------------
             */

            .content .filled {
                grid-template-columns: 1fr 3fr !important;
                grid-template-rows: auto 1fr !important;
                grid-gap: 0 !important;
                margin: 1.5rem auto;
            }

                .filled > .credits,
                .filled > .title {
                    background-color: var(--filled-light);
                    color: var(--background) !important;
                    box-shadow: none !important;
                    grid-column: span 1/-1 !important;
                    font: 16px var(--font-sans-serif) !important;
                    padding: 0.4rem 1rem;
                    line-height: 1;
                    text-transform: uppercase;
                }

                    .filled > .credits .title {
                    }

                        .filled > .title small,
                        .filled > .credits .title small {
                            border-top-color: var(--background);
                            color: inherit;
                        }

                .filled .image {
                    grid-column: span 1 !important;
                    grid-row: 1/-1;
                }

                @media (max-width: 484px) {
                    .layoutTI-C.filled   .image:not(:first-child),
                    .layoutTI-CC.filled  .image:not(:first-child),
                    .layoutTI-CCC.filled .image:not(:first-child),
                    .layoutIT-C.filled   .image:not(:first-child),
                    .layoutIT-CC.filled  .image:not(:first-child),
                    .layoutIT-CCC.filled .image:not(:first-child) {
                        margin-top: 0 !important;
                    }
                }

                @media (max-width: 704px) {
                    .layoutTI-C.filled   > .title,
                    .layoutTI-C.filled   > .credits,
                    .layoutTI-C.filled   .image,
                    .layoutTI-C.filled   .text,
                    .layoutTI-CC.filled  > .title,
                    .layoutTI-CC.filled  > .credits,
                    .layoutTI-CC.filled  .image,
                    .layoutTI-CC.filled  .text,
                    .layoutTI-CCC.filled > .title,
                    .layoutTI-CCC.filled > .credits,
                    .layoutTI-CCC.filled .image,
                    .layoutTI-CCC.filled .text,
                    .layoutIT-C.filled   > .title,
                    .layoutIT-C.filled   > .credits,
                    .layoutIT-C.filled   .image,
                    .layoutIT-C.filled   .text,
                    .layoutIT-CC.filled  > .title,
                    .layoutIT-CC.filled  > .credits,
                    .layoutIT-CC.filled  .image,
                    .layoutIT-CC.filled  .text,
                    .layoutIT-CCC.filled > .title,
                    .layoutIT-CCC.filled > .credits,
                    .layoutIT-CCC.filled .image,
                    .layoutIT-CCC.filled .text {
                        grid-column: 1/-1 !important;
                    }
                }

                .sidebarI-T-C.filled > .title,
                .sidebarI-T-C.filled > .credits,
                .sidebarI-T-C.filled .image,
                .sidebarI-T-C.filled .text,
                .sidebarT-I-C.filled > .title,
                .sidebarT-I-C.filled > .credits,
                .sidebarT-I-C.filled .image,
                .sidebarT-I-C.filled .text {
                    grid-column: 1/-1 !important;
                }

                    .filled .image .credits {
                    }

                    .filled .image img {
                        border: none;
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                    }

                    .filled .image .alt {
                        padding-right: 0.5rem;
                    }

                .filled .text {
                    background-color: var(--filled);
                    color: var(--background);
                    grid-column: span 1/-1 !important;
                    padding: 1rem;
                }
                .filled .title   ~ .text,
                .filled .credits ~ .text,
                .filled .image   ~ .text {
                    margin-top: 0 !important;
                }

                    .filled .text p {
                    }

            /**
             * -------------------------------------------------------------
             *
             * If the article is styled as a BORDERED BLOCK.
             *
             * -------------------------------------------------------------
             */

            .content .contour {
                grid-template-rows: auto auto 1fr !important;
                background-color: var(--background);
                border: var(--foreground) 1px solid;
                box-shadow: var(--background) 0 0 0 2px,
                            var(--foreground) 0 0 0 5px;
                margin: 1.5rem auto;
                text-align: center;
                position: relative;
                overflow: hidden;
            }

                .contour > .title,
                .contour > .credits {
                    background: var(--foreground);
                    box-shadow: var(--background) 0 3px 0;
                    color: var(--background-active) !important;
                    font: 800 21px/1.25 var(--font-sans-serif) !important;
                    padding: 0.8rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 100%;
                    text-align: inherit !important;
                    text-transform: uppercase;
                    position: relative;
                    z-index: 1;
                }

                    .contour > .credits .title {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-width: 100%;
                    }

                        .contour > .title small,
                        .contour > .credits .title small {
                            border-top-color: var(--background);
                            color: inherit;
                        }

                .contour .image {
                    grid-row: -1;
                    position: static;
                }

                    .contour .image .credits {
                    }

                    .contour .image img {
                        border: none;
                        height: 100%;
                        width: 100%;
                        object-position: center;
                        position: absolute;
                        left: 0;
                        top: 17%;
                    }

                    .contour .image .alt {
                        padding: 0 0.5rem 0.5rem;
                        text-shadow: var(--background) 1px 1px 1px;
                        position: relative;
                        z-index: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-width: 100%;
                    }

                .contour .text {
                    font-size: 22px;
                    font-style: italic;
                    padding: 0 0.8rem 0.8rem;
                    text-shadow: var(--background) 1px 1px 1px;
                    transform: rotate(-5deg);
                    position: relative;
                    z-index: 1;
                }

                    .contour .text p {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-width: 100%;
                    }

            @media (min-width: 484px) {
                .content .article {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr) 25%;
                    grid-template-rows: auto 1fr;
                    grid-gap: 1.33rem;
                    grid-column: 1/-1;
                    grid-row: auto;
                    margin: 0;
                }
                .content .size1x1,
                .content .size1x2,
                .content .size1x3,
                .content .size1x4,
                .content .size1x5 {
                    grid-column: span 2;
                }
                .content .size2x1,
                .content .size2x2,
                .content .size2x3,
                .content .size2x4,
                .content .size2x5 {
                    grid-column: span 4;
                }
                .content .size3x1,
                .content .size3x2,
                .content .size3x3,
                .content .size3x4,
                .content .size3x5 {
                    grid-column: span 4;
                }
                .content .size4x1,
                .content .size4x2,
                .content .size4x3,
                .content .size4x4,
                .content .size4x5 {
                    grid-column: span 4;
                }
                .content .size5x1 {
                    grid-column: span 4;
                }
                .content .size1x2,
                .content .size2x2,
                .content .size3x2,
                .content .size4x2 {
                    grid-row: span 2;
                }
                .content .size1x3,
                .content .size2x3,
                .content .size3x3,
                .content .size4x3 {
                    grid-row: span 3;
                }
                .content .size1x4,
                .content .size2x4,
                .content .size3x4,
                .content .size4x4 {
                    grid-row: span 4;
                }
                .content .size1x5,
                .content .size2x5,
                .content .size3x5,
                .content .size4x5 {
                    grid-row: span 5;
                }
            }

            @media (min-width: 704px) {
                .content .article {
                }
                .content .no-decor {
                }
                .content .contour {
                    margin: 0;
                }
                .content .border,
                .content .borderT,
                .content .borderTR,
                .content .borderTRB,
                .content .borderTRL,
                .content .borderTB,
                .content .borderTBL,
                .content .borderTL {
                    border-top: var(--foreground) 1px solid;
                    padding-top: 1.33rem;
                }
                .content .border,
                .content .borderTR,
                .content .borderTRB,
                .content .borderTRL,
                .content .borderRB,
                .content .borderRBL,
                .content .borderRL,
                .content .borderR {
                    border-right: var(--foreground) 1px solid;
                    padding-right: 1.33rem;
                }
                .content .border,
                .content .borderTRB,
                .content .borderTB,
                .content .borderTBL,
                .content .borderRB,
                .content .borderRBL,
                .content .borderLB,
                .content .borderB {
                    border-bottom: var(--foreground) 1px solid;
                    padding-bottom: 1.33rem;
                }
                .content .border,
                .content .borderTRL,
                .content .borderTBL,
                .content .borderTL,
                .content .borderRBL,
                .content .borderRL,
                .content .borderLB,
                .content .borderL {
                    border-left: var(--foreground) 1px solid;
                    padding-left: 1.33rem;
                }
                .content .size1x1,
                .content .size1x2,
                .content .size1x3,
                .content .size1x4,
                .content .size1x5 {
                    grid-column: span 1;
                }
                .content .size2x1,
                .content .size2x2,
                .content .size2x3,
                .content .size2x4,
                .content .size2x5 {
                    grid-column: span 2;
                }
                .content .size3x1,
                .content .size3x2,
                .content .size3x3,
                .content .size3x4,
                .content .size3x5 {
                    grid-column: span 3;
                }
            }

            @media (min-width: 960px) {
                .content .article,
                .content .article.size1x1,
                .content .article.size1x2,
                .content .article.size1x3,
                .content .article.size1x4,
                .content .article.size1x5 {
                    grid-column: span 1;
                }
                .content .article.size2x1,
                .content .article.size2x2,
                .content .article.size2x3,
                .content .article.size2x4,
                .content .article.size2x5 {
                    grid-column: span 2;
                }
                .content .article.size3x1,
                .content .article.size3x2,
                .content .article.size3x3,
                .content .article.size3x4,
                .content .article.size3x5 {
                    grid-column: span 3;
                }
                .content .article.size4x1,
                .content .article.size4x2,
                .content .article.size4x3,
                .content .article.size4x4,
                .content .article.size4x5 {
                    grid-column: span 4;
                }
                .content .article.size5x1 {
                    grid-column: span 5;
                }
            }

                /**
                 * ---------------------------------------------------------
                 *
                 * The article's title.
                 *
                 * ---------------------------------------------------------
                 */

                .article > .title,
                .article > .credits {
                    display: block;
                    grid-column: 1/-1;
                    font-family: var(--font-title);
                    font-size: 32px;
                    font-style: italic;
                    font-weight: normal;
                    text-align: left;
                }

                .article > .credits {
                    color: var(--foreground);
                    outline: none;
                    cursor: pointer;
                    text-decoration: none;
                }

                .article > .credits:hover,
                .article > .credits:active,
                .article > .credits:focus {
                    background: var(--foreground-active);
                    box-shadow: var(--foreground-active) 0 0 0 0.165em;
                    color: var(--background-active);
                    outline: none;
                    text-decoration: none;
                }

                    .credits .title {
                        display: block;
                        font-family: inherit;
                        font-size: inherit;
                        font-style: inherit;
                        font-weight: inherit;
                    }

                        .title small,
                        .credits .title small {
                            border-top: var(--foreground) 1px solid;
                            color: var(--filled);
                            display: block;
                            font-family: var(--font);
                            font-size: 1rem;
                            font-style: normal;
                            font-weight: normal;
                            margin: 0.33em 0 0;
                            padding: 0.33em 0 0;
                            text-transform: none;
                        }

                        .credits:hover  .title small,
                        .credits:active .title small,
                        .credits:focus  .title small {
                            border-top-color: var(--background);
                            color: var(--background);
                        }

                @media (min-width: 704px) {
                    .article > .title,
                    .article > .credits {
                        font-size: 42px;
                    }
                }

                .article ~ .article > .title,
                .article ~ .article > .credits,
                .sidebar .article > .title,
                .sidebar .article > .credits {
                    font-size: 24px;
                    font-style: normal;
                    font-weight: normal;
                }

                /**
                 * ---------------------------------------------------------
                 *
                 * The article's image.
                 *
                 * ---------------------------------------------------------
                 */

                .image {
                    display: grid;
                    grid-template-rows: 1fr auto;
                    margin: 1rem 0 0;
                    position: relative;
                }

                .image:last-child {
                    grid-column: 1/-1 !important;
                }

                .layoutI-T-C    .image,
                .layoutI-T-CC   .image,
                .layoutI-T-CCC  .image,
                .layoutI-T-CCCC .image,
                .sidebarI-T-C   .image {
                    grid-row: 1/span 1;
                }

                @media (max-width: 704px) {
                    .article .image {
                        margin: 0;
                        grid-column: 1/-1;
                    }
                    .article .text {
                        grid-column: 1/-1;
                    }
                    .layoutTI-C     > .title,
                    .layoutTI-CC    > .title,
                    .layoutTI-CCC   > .title,
                    .layoutTI-C     > .credits,
                    .layoutTI-CC    > .credits,
                    .layoutTI-CCC   > .credits,
                    .layoutTI-C     .image,
                    .layoutTI-CC    .image,
                    .layoutTI-CCC   .image,
                    .layoutTI-C     .text,
                    .layoutTI-CC    .text,
                    .layoutTI-CCC   .text,
                    .layoutIT-C     > .title,
                    .layoutIT-CC    > .title,
                    .layoutIT-CCC   > .title,
                    .layoutIT-C     > .credits,
                    .layoutIT-CC    > .credits,
                    .layoutIT-CCC   > .credits,
                    .layoutIT-C     .image,
                    .layoutIT-CC    .image,
                    .layoutIT-CCC   .image,
                    .layoutIT-C     .text,
                    .layoutIT-CC    .text,
                    .layoutIT-CCC   .text {
                        grid-column: 1/-1;
                        grid-row: span 1;
                    }
                    .layoutIT-C     .image:not(:first-child),
                    .layoutIT-CC    .image:not(:first-child),
                    .layoutIT-CCC   .image:not(:first-child) {
                        grid-row: 1/span 1;
                    }
                }

                @media (min-width: 704px) {
                    .article .image {
                        margin: 0;
                        grid-column: 1/-1;
                    }
                    .layoutTI-C    .image,
                    .layoutTI-CC   .image,
                    .layoutTI-CCC  .image,
                    .layoutIT-C    .image,
                    .layoutIT-CC   .image,
                    .layoutIT-CCC  .image {
                        grid-column: 1/span 1;
                    }
                    .layoutIT-C    .image:not(:last-child),
                    .layoutIT-CC   .image:not(:last-child),
                    .layoutIT-CCC  .image:not(:last-child),
                    .layoutIT-C    .title ~ .image,
                    .layoutIT-CC   .title ~ .image,
                    .layoutIT-CCC  .title ~ .image,
                    .layoutIT-C    .credits ~ .image,
                    .layoutIT-CC   .credits ~ .image,
                    .layoutIT-CCC  .credits ~ .image {
                        grid-row: 1/span 2;
                    }
                    .layoutTI-C    .image:first-child:last-child,
                    .layoutTI-CC   .image:first-child:last-child,
                    .layoutTI-CCC  .image:first-child:last-child,
                    .layoutIT-C    .image:first-child:last-child,
                    .layoutIT-CC   .image:first-child:last-child,
                    .layoutIT-CCC  .image:first-child:last-child {
                        grid-column: 1/-1;
                    }
                }

                @media (min-width: 960px) {
                    .article .image {
                        grid-column: 1/3;
                    }
                    .layoutT-CI    .image:not(:last-child),
                    .layoutT-CCI   .image:not(:last-child),
                    .layoutT-CCCI  .image:not(:last-child),
                    .layoutT-CCCCI .image:not(:last-child) {
                        grid-column: 3/5;
                    }
                    .layoutTI-C    .image,
                    .layoutTI-CC   .image,
                    .layoutTI-CCC  .image,
                    .layoutIT-C    .image,
                    .layoutIT-CC   .image,
                    .layoutIT-CCC  .image {
                        grid-column: 1/span 1;
                    }
                    .layoutIT-C    .image:not(:last-child),
                    .layoutIT-CC   .image:not(:last-child),
                    .layoutIT-CCC  .image:not(:last-child),
                    .layoutIT-C    .title ~ .image,
                    .layoutIT-CC   .title ~ .image,
                    .layoutIT-CCC  .title ~ .image,
                    .layoutIT-C    .credits ~ .image,
                    .layoutIT-CC   .credits ~ .image,
                    .layoutIT-CCC  .credits ~ .image {
                        grid-row: 1/span 2;
                    }
                    .layoutTI-C    .image:first-child:last-child,
                    .layoutTI-CC   .image:first-child:last-child,
                    .layoutTI-CCC  .image:first-child:last-child,
                    .layoutIT-C    .image:first-child:last-child,
                    .layoutIT-CC   .image:first-child:last-child,
                    .layoutIT-CCC  .image:first-child:last-child {
                        grid-column: 1/-1;
                    }
                    .layoutT-I-C    .image,
                    .layoutT-I-CC   .image,
                    .layoutT-I-CCC  .image,
                    .layoutT-I-CCCC .image,
                    .layoutI-T-C    .image,
                    .layoutI-T-CC   .image,
                    .layoutI-T-CCC  .image,
                    .layoutI-T-CCCC .image,
                    .sidebarT-I-C   .image,
                    .sidebarI-T-C   .image {
                        grid-column: 1/-1;
                    }
                }

                    .image .credits {
                        background: transparent;
                        outline: none;
                        color: transparent;
                        cursor: pointer;
                        display: block;
                        height: 100%;
                        width: 100%;
                        text-decoration: none;
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 1;
                    }

                    .credits + .image .credits,
                    .image .credits[href=""] {
                        display: none;
                    }

                    .image .credits:hover,
                    .image .credits:active,
                    .image .credits:focus,
                    .image .credits:visited {
                        background: transparent;
                        outline: none;
                        color: transparent;
                        text-decoration: none;
                    }

                    .image img,
                    .image svg {
                        background: transparent;
                        border: 4px solid var(--background);
                        outline: none;
                        box-shadow: none;
                        color: var(--foreground-light);
                        display: block;
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                        object-position: left;
                        filter: grayscale(100%);
                        transition: 0.33s ease;
                    }

                    .image:hover  img,
                    .image:active img,
                    .image:focus  img,
                    .image:hover  svg,
                    .image:active svg,
                    .image:focus  svg {
                        filter: grayscale(0);
                    }

                    .image .credits:hover ~  img,
                    .image .credits:active ~ img,
                    .image .credits:focus ~  img,
                    .image .credits:hover ~  svg,
                    .image .credits:active ~ svg,
                    .image .credits:focus ~  svg {
                        border-color: var(--foreground-active);
                        color: var(--foreground-active);
                        filter: grayscale(0);
                    }

                    .image .alt {
                        display: block;
                        font-style: italic;
                        font-size: 90%;
                        margin: 1rem 0 0;
                    }

                    .image img[alt=""] ~ .alt,
                    .image svg[alt=""] ~ .alt,
                    .image .alt:empty {
                        display: none;
                    }

                    .image .credits:hover ~  .alt,
                    .image .credits:active ~ .alt,
                    .image .credits:focus ~  .alt {
                        color: var(--foreground-active);
                    }

                /**
                 * ---------------------------------------------------------
                 *
                 * The article's text.
                 *
                 * ---------------------------------------------------------
                 */

                .article .text {
                    display: block;
                    margin: 1rem 0 0;
                }

                .article .text:empty {
                    display: none;
                }

                .article > .title +   .text:last-child,
                .article > .credits + .text:last-child,
                .article              .text:first-child {
                    grid-column: 1/-1 !important;
                }

                @media (min-width: 704px) {
                    .article .text {
                        margin: 0;
                        grid-column: 1/-1;
                    }
                    .layoutTI-C    > .title,
                    .layoutTI-CC   > .title,
                    .layoutTI-CCC  > .title,
                    .layoutTI-C    > .credits,
                    .layoutTI-CC   > .credits,
                    .layoutTI-CCC  > .credits,
                    .layoutTI-C    .image ~ .text,
                    .layoutTI-CC   .image ~ .text,
                    .layoutTI-CCC  .image ~ .text,
                    .layoutIT-C    > .title,
                    .layoutIT-CC   > .title,
                    .layoutIT-CCC  > .title,
                    .layoutIT-C    > .credits,
                    .layoutIT-CC   > .credits,
                    .layoutIT-CCC  > .credits,
                    .layoutIT-C    .image ~ .text,
                    .layoutIT-CC   .image ~ .text,
                    .layoutIT-CCC  .image ~ .text {
                        grid-column: 2/-1;
                    }
                }

                @media (min-width: 960px) {
                    .article .image ~ .text {
                        grid-column: span 2;
                    }
                    .layoutT-CI    .image ~ .text,
                    .layoutT-CCI   .image ~ .text,
                    .layoutT-CCCI  .image ~ .text,
                    .layoutT-CCCCI .image ~ .text {
                        grid-column: 1/3;
                        grid-row: 2;
                    }
                    .layoutT-CI    .image:first-child ~ .text,
                    .layoutT-CCI   .image:first-child ~ .text,
                    .layoutT-CCCI  .image:first-child ~ .text,
                    .layoutT-CCCCI .image:first-child ~ .text {
                        grid-row: 1;
                    }
                    .layoutT-I-C    .image ~ .text,
                    .layoutT-I-CC   .image ~ .text,
                    .layoutT-I-CCC  .image ~ .text,
                    .layoutT-I-CCCC .image ~ .text,
                    .layoutI-T-C    .image ~ .text,
                    .layoutI-T-CC   .image ~ .text,
                    .layoutI-T-CCC  .image ~ .text,
                    .layoutI-T-CCCC .image ~ .text,
                    .sidebarT-I-C   .image ~ .text,
                    .sidebarI-T-C   .image ~ .text {
                        grid-column: 1/-1;
                    }
                    .layoutTI-C    > .title,
                    .layoutTI-CC   > .title,
                    .layoutTI-CCC  > .title,
                    .layoutTI-C    > .credits,
                    .layoutTI-CC   > .credits,
                    .layoutTI-CCC  > .credits,
                    .layoutTI-C    .image ~ .text,
                    .layoutTI-CC   .image ~ .text,
                    .layoutTI-CCC  .image ~ .text,
                    .layoutIT-C    > .title,
                    .layoutIT-CC   > .title,
                    .layoutIT-CCC  > .title,
                    .layoutIT-C    > .credits,
                    .layoutIT-CC   > .credits,
                    .layoutIT-CCC  > .credits,
                    .layoutIT-C    .image ~ .text,
                    .layoutIT-CC   .image ~ .text,
                    .layoutIT-CCC  .image ~ .text {
                        grid-column: 2/-1;
                    }
                }

                @media (min-width: 512px) {
                    .layoutT-ICC    .text,
                    .layoutT-CCI    .text,
                    .layoutT-ICCC   .text,
                    .layoutT-CCCI   .text,
                    .layoutT-ICCCC  .text,
                    .layoutT-CCCCI  .text,
                    .layoutT-I-CC   .text,
                    .layoutI-T-CC   .text,
                    .layoutT-I-CCC  .text,
                    .layoutI-T-CCC  .text,
                    .layoutT-I-CCCC .text,
                    .layoutI-T-CCCC .text,
                    .layoutTI-CC    .text,
                    .layoutTI-CCC   .text,
                    .layoutIT-CC    .text,
                    .layoutIT-CCC   .text {
                        column-count: 2;
                        column-gap: 1.33rem;
                    }
                }

                @media (min-width: 608px) {
                    .layoutT-ICCCC  .text,
                    .layoutT-CCCCI  .text,
                    .layoutT-I-CCCC .text,
                    .layoutI-T-CCCC .text,
                    .layoutTI-CCC   .text,
                    .layoutIT-CCC   .text {
                        column-count: 3;
                        column-gap: 1.33rem;
                    }
                }

                @media (min-width: 704px) {
                    .layoutT-ICC  .text,
                    .layoutT-CCI  .text,
                    .layoutT-I-CC .text,
                    .layoutI-T-CC .text {
                        column-count: 2;
                        column-gap: 1.33rem;
                    }
                    .layoutT-ICCC  .text,
                    .layoutT-CCCI  .text,
                    .layoutT-I-CCC .text,
                    .layoutI-T-CCC .text,
                    .layoutTI-CCC  .text,
                    .layoutIT-CCC  .text {
                        column-count: 3;
                        column-gap: 1.33rem;
                    }
                    .layoutT-ICCCC  .text,
                    .layoutT-CCCCI  .text,
                    .layoutT-I-CCCC .text,
                    .layoutI-T-CCCC .text {
                        column-count: 4;
                        column-gap: 1.33rem;
                    }
                }

            /**
             * -------------------------------------------------------------
             *
             * Article by number.
             *
             * -------------------------------------------------------------
             */

            .content .post-1  { }
            .content .post-2  { }
            .content .post-3  { }
            .content .post-4  { }
            .content .post-5  { }
            .content .post-6  { }
            .content .post-7  { }
            .content .post-8  { }
            .content .post-9  { }
            .content .post-10 { }
            .content .post-11 { }
            .content .post-12 { }
            .content .post-13 { }
            .content .post-14 { }
            .content .post-15 { }
            .content .post-16 { }
            .content .post-17 { }
            .content .post-18 { }
            .content .post-19 { }
            .content .post-20 { }

        /**
         * -----------------------------------------------------------------
         *
         * The block with a form for editing something.
         *
         * -----------------------------------------------------------------
         */

        .form {
            text-align: center;
        }

        .form.newspaper { }
        .form.settings  { }

            /**
             * -------------------------------------------------------------
             *
             * Error and success messages to display on forms.
             *
             * -------------------------------------------------------------
             */

            .error,
            .success {
                display: block;
                margin: 0 auto 1em;
                padding: 0.5em;
                width: 80%;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
            }

            .error {
                background: var(--background-error);
                color: var(--foreground-error);
            }

            .success {
                background: var(--background-success);
                color: var(--foreground-success);
            }

            .error:empty,
            .success:empty {
                display: none;
            }

            @media (max-width: 704px) {
                .error,
                .success {
                    width: 100%;
                }
            }

            /**
             * -------------------------------------------------------------
             *
             * A table for listing something.
             *
             * -------------------------------------------------------------
             */

            .list {
                border-collapse: collapse;
                border-spacing: 0;
                display: table;
                margin: 0;
                width: 100%;
            }

            .list.newspapers { }
            .list.settings   { }

            @media (max-width: 704px) {
                .list:not(.newspapers) {
                    display: block;
                }
            }

                .list > .wrapper {
                    display: table-row-group;
                }

                @media (max-width: 704px) {
                    .list:not(.newspapers) > .wrapper {
                        display: block;
                    }
                }

                    .list .row {
                        display: table-row;
                    }
                    .list .row.preamble { }
                    .list .row.newspaper { }
                        .list .row.preamble + .row,
                        .list .row.newspaper + .row {
                            border: solid transparent;
                            border-width: 2em 0 0;
                            box-shadow: var(--foreground) 0 -2px 0;
                        }
                    .list .row.setting   { }

                    [data-moderating]:not([data-moderating=""]) {
                        position: relative;
                    }
                    [data-moderating]:not([data-moderating=""])::before {
                        background: var(--moderating);
                            color: var(--background);
                            opacity: 1;
                        content: attr(data-moderating);
                        display: block;
                            padding: 0 0.5rem;
                            white-space: nowrap;
                        position: absolute;
                            top: -2em;
                            right: 0;
                        animation: blinkModerating 4s infinite linear;
                    }
                    td[data-moderating]:not([data-moderating=""])::before {
                        top: -1.75em;
                    }

                    @keyframes blinkModerating {
                        0%  { opacity: 1; }
                        33% { opacity: 1; }
                        66% { opacity: 0; }
                    }

                    @media (max-width: 704px) {
                        .list:not(.newspapers) .row {
                            display: block;
                        }
                    }

                        .list .cell {
                            display: table-cell;
                            padding: 0.5em 0;
                            text-align: left;
                            vertical-align: top;
                            /* overflow: hidden; */
                            text-overflow: ellipsis;
                            max-width: 100%;
                        }

                        .list .cell[data-remark]:not([data-remark=""])::after {
                            background-color: var(--foreground-light);
                            color: var(--background);
                            content: attr(data-remark);
                            display: block;
                            font-family: monospace;
                            font-size: 66%;
                            margin: 0 auto 0 0;
                            padding: 0.2em 0.5em;
                            width: min-content;
                            white-space: nowrap;
                        }

                        .list .cell.index { white-space: nowrap; text-align: right; font-size: 80%; padding-top: 1em; }
                        .list .cell.date  { white-space: nowrap; text-align: right; }
                        .list .cell.alias { white-space: nowrap;                    }
                        .list .cell.value { width: 100%;                            }
                        .list .cell.name  { width: 100%;                            }
                            .list .goto {
                                border-bottom: dashed var(--foreground-light);
                                border-width: 0 0 1px;
                                outline: none;
                                cursor: pointer;
                                color: inherit;
                                display: block;
                                font-size: 150%;
                                margin: -0.5em 0 0;
                                padding: 0.33em;
                                text-decoration: none;
                            }
                            .list .goto:visited {
                                color: inherit;
                            }
                            .list .goto:hover,
                            .list .goto:active,
                            .list .goto:focus {
                                background: var(--background-active);
                                outline: none;
                                color: var(--foreground-active);
                                text-decoration: none;
                            }
                            .list .number,
                            .list .slogan,
                            .list .info {
                                display: inline-block;
                                margin: 0.66em 0 0 0.66em;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                max-width: 100%;
                            }
                            .list .number {
                                margin-right: -0.33em;
                            }
                            .list .number::after {
                                content: '»';
                                margin-left: 0.33em;
                            }
                            .list .info {
                                display: block;
                                font-style: italic;
                                margin-top: 0.33em;
                            }
                            .list .number:empty,
                            .list .slogan:empty,
                            .list .info:empty {
                                display: none;
                            }
                        .list .cell + .cell {
                            padding-left: 0.66em;
                        }

                        @media (max-width: 704px) {
                            .list:not(.newspapers) .cell {
                                display: block;
                            }
                                .list:not(.newspapers) .cell + .cell {
                                    padding-left: 0;
                                    padding-top: 0;
                                }
                            .list.newspapers .cell.date {
                                white-space: normal;
                            }
                        }

                            /**
                             * ---------------------------------------------
                             *
                             * Fields of the input form.
                             *
                             * ---------------------------------------------
                             */

                            .form .switcher {
                                display: block;
                                margin: 1em 0 0;
                                text-align: center;
                            }

                                .form .switcher label {
                                    cursor: pointer;
                                    outline: none;
                                    color: inherit;
                                    display: inline-block;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    max-width: 100%;
                                }

                                    .form .switcher input[type="checkbox"] {
                                        outline: none;
                                    }

                                .form .switcher label:hover,
                                .form .switcher label:active,
                                .form .switcher label:focus-within,
                                .form .switcher label:hover input[type="checkbox"],
                                .form .switcher label:active input[type="checkbox"],
                                .form .switcher label:focus-within input[type="checkbox"] {
                                    outline: none;
                                    color: var(--foreground-active);
                                }

                            .form .editbox,
                            .form .editcard {
                                display: block;
                                margin: 1em auto 0;
                                text-align: left;
                                vertical-align: top;
                            }
                            .form .editcard {
                                border: transparent 0.5em solid;
                                box-shadow: var(--foreground-light) 0 0 0 1px inset;
                                display: inline-block;
                                width: calc(50% - 2px);
                                padding: 1em;
                            }
                            .form .editcard.inactive { }

                            .form .editbox.language  { display: inline-block; width: calc(25% - 0.66em - 2px);                      }
                            .form .editbox.url       { display: inline-block; width: calc(50% - 0.66em - 2px); margin-left: 0.7em;  }
                            .form .editbox.enabled   { display: inline-block; width: calc(25% - 0.66em - 2px); margin-left: 0.7em;  }
                            .form .editbox.number    { display: inline-block; width: calc(25% - 0.66em - 2px);                      }
                            .form .editbox.date      { display: inline-block; width: calc(25% - 0.66em - 2px); margin-left: 0.7em;  }
                            .form .editbox.slogan    { display: inline-block; width: calc(25% - 0.66em - 2px); margin-left: 0.7em;  }
                            .form .editbox.aside     { display: inline-block; width: calc(25% - 0.66em - 2px); margin-left: 0.7em;  }
                            .form .editbox.copyright { display: inline-block; width: calc(50% - 0.66em - 2px);                      }
                            .form .editbox.backlink  { display: inline-block; width: calc(50% - 0.66em - 2px); margin-left: 0.99em; }

                            @media (max-width: 512px) {
                                .form .editcard label {
                                    display: block !important;
                                    width: 100%    !important;
                                    margin-left: 0 !important;
                                }
                            }

                            @media (max-width: 608px) {
                                .form .editbox {
                                    display: block !important;
                                    width: 100%    !important;
                                    margin-left: 0 !important;
                                }
                            }

                            @media (max-width: 704px) {
                                .form .editcard {
                                    display: block;
                                    width: 100%;
                                }
                            }

                                .form .editcard .tools {
                                    background: var(--foreground-admin);
                                    clear: both;
                                    display: block;
                                    margin: -1em -1em 0;
                                    text-align: center;
                                    white-space: nowrap;
                                }
                                .form .editcard .tools::after {
                                    content: '';
                                    clear: both;
                                    display: block;
                                    height: 1px;
                                    width: 100%;
                                }

                                    .form .editcard .btn {
                                        display: inline-block;
                                        margin: 0;
                                    }
                                    .form .editcard .btn.move-left   { float: left;   }
                                    .form .editcard .btn.make-new    { margin: 0 1em; }
                                    .form .editcard .btn.delete-this { margin: 0 1em; }
                                    .form .editcard .btn.move-right  { float: right;  }

                                .form .editbox label,
                                .form .editcard label {
                                    display: block;
                                }
                                .form .editcard label {
                                    margin: 0.66em 0 0;
                                }

                                .form .editcard.inactive label {
                                    opacity: 0.5;
                                }
                                    .form .editcard.inactive label * {
                                        cursor: default;
                                        pointer-events: none;
                                    }

                                .form .editcard label.size   { display: inline-block; width: calc(33% - 0.66em - 2px);                        }
                                .form .editcard label.layout { display: inline-block; width: calc(33% - 0.66em - 2px);   margin-left: 0.99em; }
                                .form .editcard label.decor  { display: inline-block; width: calc(33% - 0.66em - 2px);   margin-left: 0.99em; }
                                .form .editcard label.image  { display: inline-block; width: calc(59.5% - 0.66em - 2px);                      }
                                .form .editcard label.file   { display: inline-block; width: calc(39.5% - 0.66em - 2px); margin-left: 0.99em; }

                                    .form .editbox .title,
                                    .form .editcard .title {
                                        display: block;
                                        margin: 0 auto 0.5em;
                                        overflow: visible;
                                        font-size: 80%;
                                    }

                                        .form .editbox .title small,
                                        .form .editcard .title small {
                                            background-color: var(--foreground-light);
                                            border: none;
                                            color: var(--background);
                                            display: block;
                                            font-family: monospace;
                                            font-size: 85%;
                                            width: min-content;
                                            margin: 0.33em auto -0.66em 0;
                                            padding: 0 0.5em;
                                            white-space: nowrap;
                                        }

                                    .form .editbox .remark,
                                    .form .editcard .remark {
                                        color: var(--foreground-light);
                                        display: block;
                                        margin: 0.66em 0 0;
                                        font-size: 80%;
                                        line-height: 1.66;
                                    }
                                    .form .editbox .remark:empty,
                                    .form .editcard .remark:empty {
                                        display: none;
                                    }

                                    .form input[type="text"],
                                    .form input[type="password"],
                                    .form input[type="email"],
                                    .form input[type="tel"],
                                    .form input[type="number"],
                                    .form input[type="date"],
                                    .form input[type="datetime-local"],
                                    .form input[type="time"],
                                    .form input[type="month"],
                                    .form input[type="search"],
                                    .form input[type="file"],
                                    .form textarea,
                                    .form select {
                                        background: var(--background);
                                        border: solid var(--foreground-light);
                                        border-width: 1px;
                                        color: var(--foreground);
                                        outline: none;
                                        display: block;
                                        font-family: monospace;
                                        width: 100%;
                                        margin: 0;
                                        padding: 0.66em;
                                    }

                                    .form textarea {
                                        height: 10em;
                                        resize: vertical;
                                    }
                                    .form .editcard textarea {
                                        min-height: 10em;
                                    }

                                    .form input[type="text"]:active,
                                    .form input[type="text"]:focus,
                                    .form input[type="password"]:active,
                                    .form input[type="password"]:focus,
                                    .form input[type="email"]:active,
                                    .form input[type="email"]:focus,
                                    .form input[type="tel"]:active,
                                    .form input[type="tel"]:focus,
                                    .form input[type="number"]:active,
                                    .form input[type="number"]:focus,
                                    .form input[type="date"]:active,
                                    .form input[type="date"]:focus,
                                    .form input[type="datetime-local"]:active,
                                    .form input[type="datetime-local"]:focus,
                                    .form input[type="time"]:active,
                                    .form input[type="time"]:focus,
                                    .form input[type="month"]:active,
                                    .form input[type="month"]:focus,
                                    .form input[type="search"]:active,
                                    .form input[type="search"]:focus,
                                    .form input[type="file"]:active,
                                    .form input[type="file"]:focus,
                                    .form textarea:active,
                                    .form textarea:focus,
                                    .form select:active,
                                    .form select:focus {
                                        background: var(--background-active);
                                        border-color: var(--foreground-active);
                                        color: var(--foreground-active);
                                        outline: none;
                                    }
                                        .form select:focus option[selected] {
                                            background: var(--background);
                                            color: var(--foreground);
                                        }

            /**
             * -------------------------------------------------------------
             *
             * A button.
             *
             * -------------------------------------------------------------
             */

            .btn {
                background: var(--foreground);
                border: none;
                color: var(--background);
                outline: none;
                cursor: pointer;
                display: inline-block;
                font: inherit;
                vertical-align: middle;
                margin: 1em 0.5em 0;
                padding: 0.33em 0.66em;
                max-width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-decoration: none;
                transition: 0.33s ease;
            }

            .signpost {
                display: block;
                width: 100%;
                white-space: nowrap;
                position: absolute;
                top: -2.5em;
                left: 0;
            }

                .btn.home { float: left;  margin: 0;             }
                .btn.next { float: right; margin: 0 0 0.5em 1em; }
                .btn.prev { float: right; margin: 0 0 0.5em 1em; }

            .btn.submit      { }
            .btn.cancel      { background: var(--foreground-admin); }
            .btn.add         { }
            .btn.delete      { }
            .btn.edit        { }
            .btn.settings    { background: var(--foreground-admin); }
            .btn.robots      { background: var(--foreground-admin); }
            .btn.sitemap     { background: var(--foreground-admin); }
            .btn.move-left   { background: var(--foreground-admin); }
            .btn.make-new    { background: var(--foreground-admin); }
            .btn.delete-this { background: var(--foreground-admin); }
            .btn.move-right  { background: var(--foreground-admin); }

            .btn.test {
                background: var(--foreground-admin);
                position: fixed;
                bottom: 1rem;
                right: 1rem;
                z-index: 1;
            }
            #switch-test:checked ~ .btn.test {
                background: var(--moderating);
            }

            .btn:visited {
                color: var(--background);
            }

            .btn:hover,
            .btn:active,
            .btn:focus {
                background: var(--foreground-active);
                border: none;
                color: var(--background);
                outline: none;
                text-decoration: none;
            }

        /**
         * -----------------------------------------------------------------
         *
         * The block with editing and administrative tools.
         *
         * -----------------------------------------------------------------
         */

        .page > .wrapper > .tools {
            border-top: solid 3px transparent;
            box-shadow: var(--foreground) 0 2px 0 inset,
                        var(--foreground-light) 0 -1px 0;
            margin: 1em 0 0.5em;
            padding: 0.5em 0 0;
            text-align: center;
        }

            .page > .wrapper > .tools .btn {
            }
