/**
 * -------------------------------------------------------------------------
 *
 * The main styles.
 *
 * -------------------------------------------------------------------------
 *
 * @package    MimimiFramework
 * @subpackage Examples / Five Viewers site
 * @license    GPL-2.0
 *             https://opensource.org/license/gpl-2-0/
 * @copyright  2022 MiMiMi Community
 *             https://mimimi.software/
 *
 * -------------------------------------------------------------------------
 */

    /**
     * ---------------------------------------------------------------------
     *
     * Reset styles.
     *
     * ---------------------------------------------------------------------
     */

    * {
        background: transparent;
        border: none;
        box-shadow: none;
        box-sizing: border-box;
        border-radius: 0;
        outline: none;
        font-family: inherit;
        font-style: inherit;
        font-weight: inherit;
        margin: 0 auto;
        padding: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        text-shadow: none;
        vertical-align: middle;
        position: relative;
    }

    a {
        color: #48c;
        cursor: pointer;
        text-decoration: underline;
        transition: all 0.33s;
    }

    /**
     * ---------------------------------------------------------------------
     *
     * A web document.
     *
     * ---------------------------------------------------------------------
     */

    html {
        background: #000810;
        color: #808890;
        display: block;
        font-family: monospace;
        font-size: 60px;
        font-style: normal;
        font-weight: normal;
        line-height: 1.5;
        height: 100%;
        overflow-y: auto;
    }

    html.home-page     { }
    html.channels-page { }
    html.channel-page  { }
    html.error404-page { }

        html > *:not(body),
        head,
            meta,
            link,
            style,
            script,
        slot,
        template,
        embed,
        .hidden,
        [hidden] {
            display: none !important;
        }

        /**
         * -----------------------------------------------------------------
         *
         * An adaptability.
         *
         * -----------------------------------------------------------------
         */

        @media (max-width: 4096px) {
            html {
                font-size: 56px;
            }
        }

        @media (max-width: 3840px) {
            html {
                font-size: 52px;
            }
        }

        @media (max-width: 3584px) {
            html {
                font-size: 48px;
            }
        }

        @media (max-width: 3328px) {
            html {
                font-size: 44px;
            }
        }

        @media (max-width: 3072px) {
            html {
                font-size: 41px;
            }
        }

        @media (max-width: 2816px) {
            html {
                font-size: 38px;
            }
        }

        @media (max-width: 2560px) {
            html {
                font-size: 35px;
            }
        }

        @media (max-width: 2304px) {
            html {
                font-size: 32px;
            }
        }

        @media (max-width: 2048px) {
            html {
                font-size: 29px;
            }
        }

        @media (max-width: 1792px) {
            html {
                font-size: 26px;
            }
        }

        @media (max-width: 1536px) {
            html {
                font-size: 24px;
            }
        }

        @media (max-width: 1280px) {
            html {
                font-size: 22px;
            }
        }

        @media (max-width: 1024px) {
            html {
                font-size: 20px;
            }
        }

        @media (max-width: 768px) {
            html {
                font-size: 18px;
            }
        }

        @media (max-width: 512px) {
            html {
                font-size: 16px;
            }
        }

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

        body {
            display: block;
            width: 100%;
            min-height: 100vh;
            overflow-y: auto;
        }

            .page {
                background: #012;
                display: grid;
                grid-template-columns: 11rem repeat(2, auto) 14rem;
                grid-template-rows: auto auto 1fr auto auto;
                grid-gap: 0;
                max-width: 4352px;
                min-height: 100vh;
            }

                /**
                 * ---------------------------------------------------------
                 *
                 * An adaptability.
                 *
                 * ---------------------------------------------------------
                 */

                @media (max-width: 4096px) {
                    .page {
                        max-width: 4096px;
                    }
                }

                @media (max-width: 3840px) {
                    .page {
                        max-width: 3840px;
                    }
                }

                @media (max-width: 3584px) {
                    .page {
                        max-width: 3584px;
                    }
                }

                @media (max-width: 3328px) {
                    .page {
                        max-width: 3328px;
                    }
                }

                @media (max-width: 3072px) {
                    .page {
                        max-width: 3072px;
                    }
                }

                @media (max-width: 2816px) {
                    .page {
                        max-width: 2816px;
                    }
                }

                @media (max-width: 2560px) {
                    .page {
                        max-width: 2560px;
                    }
                }

                @media (max-width: 2304px) {
                    .page {
                        max-width: 2304px;
                    }
                }

                @media (max-width: 2048px) {
                    .page {
                        max-width: 2048px;
                    }
                }

                @media (max-width: 1792px) {
                    .page {
                        max-width: 1792px;
                    }
                }

                @media (max-width: 1536px) {
                    .page {
                        max-width: 1536px;
                    }
                }

                @media (max-width: 1280px) {
                    .page {
                        grid-template-columns: 11rem auto;
                        grid-template-rows: auto 1fr auto auto;
                    }
                }

                @media (max-width: 800px) {
                    .page {
                        grid-template-columns: auto;
                        grid-template-rows: auto;
                    }
                }

                /**
                 * ---------------------------------------------------------
                 *
                 * A page header. To understand the purpose of these styles,
                 * please look at the "Themes/default/snippets/header.tpl"
                 * file.
                 *
                 * ---------------------------------------------------------
                 */

                .header {
                    background: #000a15;
                    color: #fff;
                    display: block;
                    grid-column: 2/-1;
                    font-size: 1.75rem;
                    font-weight: bold;
                    padding: 1rem;
                    width: 100%;
                    text-align: left;
                }

                    /**
                     * -----------------------------------------------------
                     *
                     * An adaptability.
                     *
                     * -----------------------------------------------------
                     */

                    @media (max-width: 800px) {
                        .header {
                            grid-column: 1/-1;
                        }
                    }

                /**
                 * ---------------------------------------------------------
                 *
                 * A sidebar on the left. To understand the purpose of these
                 * styles, please look at the "Themes/default/snippets/menu.tpl"
                 * file.
                 *
                 * ---------------------------------------------------------
                 */

                .menu {
                    background: #126;
                    border-right: #000a15 1rem solid;
                    display: block;
                    grid-column: 1;
                    grid-row: 1/-2;
                    padding: 1rem;
                    width: 100%;
                    text-align: right;
                    opacity: 0.8;
                    transition: all 0.33s;
                }

                .menu:hover,
                .menu:active,
                .menu:focus,
                .menu:focus-within {
                    opacity: 1;
                }

                    .menu > a {
                        color: #48c;
                        cursor: pointer;
                        display: block;
                        font-size: 1.4rem;
                        margin: 0 0 1em;
                        text-decoration: underline;
                        transition: all 0.33s;
                    }

                    .home-page     .home-link,
                    .channels-page .channels-link,
                    .channel-page  .channels-link,
                    .error404-page .error404-link {
                        background: #238;
                        box-shadow: 0 0 0 0.5rem #238;
                        border-radius: 0.066rem;
                    }

                    .menu a.servo {
                        font-size: 1rem;
                    }

                    .menu > a.no-gap {
                        margin-bottom: 0;
                    }

                    .menu > a:last-child {
                        margin-bottom: 0;
                    }

                    .menu > a:hover,
                    .menu > a:active,
                    .menu > a:focus {
                        color: #fc6;
                        cursor: pointer;
                        outline: none;
                        text-decoration: underline;
                    }

                    .menu > div {
                        display: block;
                        font-size: 0.7rem;
                        margin: 0 0 1em;
                        text-align: center;
                    }

                    .menu > div:last-child {
                        margin-bottom: 0;
                    }

                    .message[data-command="random"] {
                        background: #012;
                        border-top: #000a15 1rem solid;
                        max-width: none;
                        padding: 1.5em 1em 1em;
                        margin: 0 -1.5rem -1rem !important;
                        width: calc(1.5rem + 100% + 1.5rem);
                        text-align: center;
                        opacity: 0.8;
                    }

                    .home-page .message[data-command="random"] {
                        min-height: 20rem;
                    }

                        .home-page .message[data-command="random"] .message {
                            max-width: 729px;
                        }

                    .menu > [data-command="random"] {
                        background: #012;
                        max-width: none;
                        padding: 1.66em 1em !important;
                        margin: 0 -1rem !important;
                    }

                    .menu > [data-command="random"].idle::before,
                    .message[data-command="random"].idle::before              { color: #5a0; content: 'Standby time now...';          }
                    .menu > [data-command="random"][data-timer].idle::before,
                    .message[data-command="random"][data-timer].idle::before  { content: 'Waiting ' attr(data-timer) ' seconds...';   }
                    .menu > [data-command="random"].loading::before,
                    .message[data-command="random"].loading::before           { color: #5a0; content: 'Updating now, please wait...'; }
                    .menu > [data-command="random"].error-format::before,
                    .message[data-command="random"].error-format::before      { color: #f08; content: 'Error: Bad response!';         }
                    .menu > [data-command="random"].error-absent::before,
                    .message[data-command="random"].error-absent::before      { color: #f08; content: 'Error: Checkpoint not found!'; }
                    .menu > [data-command="random"].error-connection::before,
                    .message[data-command="random"].error-connection::before  { color: #f08; content: 'Error: No connection!';        }

                        [data-command="random"] .title {
                            font-size: inherit;
                        }

                    /**
                     * -----------------------------------------------------
                     *
                     * An adaptability.
                     *
                     * -----------------------------------------------------
                     */

                    @media (max-width: 800px) {
                        .menu {
                            border-right: none;
                            grid-column: 1/-1;
                            grid-row: auto;
                            padding: 0.25rem 0.5rem;
                            text-align: center;
                        }
                            .menu > a {
                                display: inline-block;
                                margin: 0.25rem 0.5rem !important;
                            }
                            .home-page     .home-link,
                            .channels-page .channels-link,
                            .channel-page  .channels-link,
                            .error404-page .error404-link {
                                box-shadow: none;
                                border-radius: 0.25rem;
                                padding: 0 0.5rem;
                            }
                            .menu > a + div {
                                margin-top: 0.5rem;
                            }
                            [data-command="random"] {
                                margin: 0 1em 1em !important;
                            }
                    }

                /**
                 * ---------------------------------------------------------
                 *
                 * A center area. To understand the purpose of these styles,
                 * please look at the "Themes/default/home.tpl" file, or at
                 * the "Themes/default/channels-list.tpl" file, or at the
                 * "Themes/default/channels-page.tpl" file.
                 *
                 * ---------------------------------------------------------
                 */

                .content {
                    display: grid;
                    grid-template-columns: repeat(6, 1fr);
                    grid-template-rows: 1fr;
                    grid-gap: 1rem;
                    grid-column: 2/-2;
                    grid-row: 2/-2;
                    padding: 1.5rem;
                    width: 100%;
                    text-align: center;
                }

                    /**
                     * -----------------------------------------------------
                     *
                     * An adaptability.
                     *
                     * -----------------------------------------------------
                     */

                    @media (max-width: 1280px) {
                        .content {
                            grid-column: 2/-1;
                            grid-row: auto;
                        }
                    }

                    @media (max-width: 800px) {
                        .content {
                            grid-column: 1/-1;
                            grid-row: auto;
                        }
                    }

                    /**
                     * -----------------------------------------------------
                     *
                     * A message in the channel.
                     *
                     * -----------------------------------------------------
                     */

                    .message {
                        color: inherit;
                        display: block;
                        grid-column: 1/-1;
                        width: 100%;
                        text-align: left;
                        text-decoration: none;
                        vertical-align: top;
                        opacity: 0.8;
                        transition: all 0.33s;
                    }

                    .message:hover,
                    .message:active,
                    .message:focus,
                    .message:focus-within,
                    .message.modal {
                        opacity: 1;
                    }

                    .message.light {
                        background: #234;
                        color: #8ab;
                        border-radius: 0.33rem;
                        padding: 1rem;
                    }

                    .message.wide { grid-column: span 4; }
                    .message.half { grid-column: span 3; }
                    .message.thin { grid-column: span 2; }

                    .channel-page .message,
                    .channel-page .message.wide,
                    .channel-page .message.half,
                    .channel-page .message.thin {
                        grid-column: 2/-2;
                    }

                    .message.hr {
                        background: transparent;
                        color: inherit;
                        border-radius: 0;
                        grid-column: 1/-1;
                        padding-top: 2rem;
                        overflow: visible;
                    }

                    .message.hr::before {
                        background: #000a15;
                        content: '';
                        display: block;
                        width: calc(1.5rem + 100% + 1.5rem);
                        height: 1rem;
                        position: absolute;
                        top: 0;
                        left: -1.5rem;
                    }

                    .message.interlude {
                        background: #126;
                        box-shadow: #126 1.5rem 0 0,
                                    #126 1.5rem 1rem 0,
                                    #126 -1.5rem 0 0,
                                    #126 -1.5rem 1rem 0;
                    }

                    [data-day]:not([data-day=""]):hover,
                    [data-day]:not([data-day=""]):active,
                    [data-day]:not([data-day=""]):focus-within {
                        overflow: visible;
                    }

                        [data-day]:not([data-day=""]) .info:first-child {
                            padding-top: 1.66rem;
                        }

                    [data-day]:not([data-day=""]):hover::before,
                    [data-day]:not([data-day=""]):active::before,
                    [data-day]:not([data-day=""]):focus-within::before {
                        background: #234;
                        box-shadow: #012 0 0 0 0.33em;
                        border-radius: 0.33em;
                        color: #8ab;
                        content: attr(data-day);
                        display: block;
                        font-size: 85%;
                        padding: 0.5em 1em;
                        white-space: nowrap;
                        position: absolute;
                        left: 50%;
                            transform: translate(-50%);
                        top: -1.5em;
                        z-index: 1;
                    }

                        [data-title]:not([data-title=""])::before {
                            content: attr(data-title);
                            color: #0a5;
                            display: block;
                            font-size: 66%;
                            font-weight: bold;
                            padding: 0 0 0.5em;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .message .message {
                            margin-bottom: 1rem;
                        }
                        .message .message:last-child {
                            margin-bottom: 0;
                        }

                        .buttons {
                            display: block;
                            text-align: center;
                        }

                            .btn,
                            button {
                                cursor: pointer;
                                background: #f52;
                                border-radius: 0.2em;
                                color: #fee;
                                display: inline-block;
                                margin: 0.25em 0.5em 0.25em 0;
                                padding: 0.25em 0.66em;
                                white-space: nowrap;
                                text-decoration: none;
                                transition: all 0.33s;
                            }

                            .btn:hover,
                            .btn:active,
                            .btn:focus,
                            button:hover,
                            button:active,
                            button:focus {
                                background: #fc6;
                                color: #012;
                                cursor: pointer;
                                outline: none;
                                text-decoration: none;
                            }

                            .buttons .btn,
                            .buttons button {
                                margin: 0.25em;
                            }

                            .btn[href=""]:not(:empty) {
                                background: #8ab !important;
                                color: #012 !important;
                                cursor: default;
                                pointer-events: none;
                            }

                            .btn:empty::before {
                                content: '>';
                            }

                            .btn[href=""]:empty {
                                cursor: default;
                                pointer-events: none;
                                display: block;
                                height: 0;
                                margin: -1rem 0 0;
                                padding: 0;
                            }

                        .avatar {
                            background: #012;
                            box-shadow: #012 0 0 0 0.6em;
                            border-radius: 50%;
                            float: left;
                            margin: 0 1rem 0.5rem -0.75rem;
                            height: 4rem;
                            width: 4rem;
                            z-index: 1;
                        }

                            .avatar img {
                                display: block;
                                height: 100%;
                                width: 100%;
                                object-fit: cover;
                            }

                        .splash {
                            background: #234;
                            border-radius: 0.33rem 0.33rem 0 0;
                            margin: 0;
                        }
                        .splash:active::before,
                        .splash:focus::before,
                        .splash:focus-within::before {
                            background: #000810;
                            content: '';
                            display: block;
                            width: 100vw;
                            height: 100vh;
                            opacity: 0.8;
                            position: fixed;
                            top: 0;
                            left: 0;
                            z-index: 65534;
                        }

                            .splash img {
                                border-radius: 0.33rem 0.33rem 0 0;
                                cursor: zoom-in;
                                display: block;
                                min-height: 5rem;
                                width: 100%;
                                object-fit: cover;
                            }

                            .splash img:active,
                            .splash img:focus {
                                border-radius: 0;
                                cursor: zoom-out;
                                min-height: auto;
                                height: calc(100vh - 1.5rem - 1.5rem);
                                width: calc(100vw - 1.5rem - 1.5rem);
                                object-fit: contain;
                                position: fixed;
                                top: 50%;
                                left: 50%;
                                z-index: 65535;
                                transform: translate(-50%, -50%);
                            }

                        .splash + .info {
                            border-radius: 0 0 0.33rem 0.33rem;
                        }
                        .splash + .info:not([data-title]):empty,
                        .splash + .info[data-title=""]:empty {
                            padding: 0;
                        }

                    /**
                     * -----------------------------------------------------
                     *
                     * An adaptability.
                     *
                     * -----------------------------------------------------
                     */

                    @media (min-width: 913px) and (max-width: 1024px) {
                        .message.wide,
                        .message.thin {
                            grid-column: 1/-1;
                        }
                    }

                    @media (min-width: 801px) and (max-width: 912px) {
                        .message.wide,
                        .message.half,
                        .message.thin {
                            grid-column: 1/-1;
                        }
                    }

                    @media (max-width: 768px) {
                        .message.wide,
                        .message.thin {
                            grid-column: 1/-1;
                        }
                    }

                    @media (max-width: 640px) {
                        .message.wide,
                        .message.half,
                        .message.thin {
                            grid-column: 1/-1;
                        }
                    }

                    @media (max-width: 384px) {
                        .message.wide,
                        .message.half,
                        .message.thin,
                        .channel-page .message,
                        .channel-page .message.wide,
                        .channel-page .message.half,
                        .channel-page .message.thin {
                            grid-column: 1/-1;
                        }
                    }

                        /**
                         * -------------------------------------------------
                         *
                         * A message typography. To understand the purpose
                         * of these styles, please look at the file
                         * "Themes/default/home.tpl".
                         *
                         * -------------------------------------------------
                         */

                        h1,
                        h2,
                        h3,
                        h4,
                        h5,
                        h6,
                        .title {
                            color: #bdf;
                            display: block;
                            font-size: 1rem;
                            font-weight: bold;
                            line-height: 1.33;
                            margin-bottom: 1rem;
                        }

                        h1:last-child,
                        h2:last-child,
                        h3:last-child,
                        h4:last-child,
                        h5:last-child,
                        h6:last-child,
                        .title:last-child {
                            margin-bottom: 0;
                        }

                        h5     { font-size: 1.1rem; }
                        h4     { font-size: 1.2rem; }
                        h3     { font-size: 1.3rem; }
                        h2     { font-size: 1.4rem; }
                        h1     { font-size: 1.5rem; }
                        .title { font-size: 1.5rem; }

                            h1 b,
                            h2 b,
                            h3 b,
                            h4 b,
                            h5 b,
                            h6 b,
                            .title b {
                                background: #fa5;
                                border-radius: 0.125em;
                                color: #012;
                                display: inline-block;
                                padding: 0 0.25em;
                            }

                            p {
                                display: block;
                                margin-bottom: 1rem;
                            }
                            p:last-child {
                                margin-bottom: 0;
                            }

                                b {
                                    color: #fff;
                                    display: inline-block;
                                    font-weight: bold;
                                }
                                strong {
                                    color: #fa5;
                                    display: inline-block;
                                }

                                i,
                                em {
                                    color: #5a0;
                                    display: inline-block;
                                }
                                em { color: #f08; }

                                u {
                                    color: #5af;
                                    display: inline-block;
                                    text-decoration: none;
                                    white-space: nowrap;
                                }
                                u[title]:empty::before {
                                    content: attr(title);
                                }

                                code {
                                    background: #000a15;
                                    border-radius: 0.33rem;
                                    color: inherit;
                                    display: inline-block;
                                    padding: 0 0.75em;
                                    white-space: nowrap;
                                }

                                ins {
                                    color: #246;
                                    display: inline;
                                    text-decoration: none;
                                }

                                del {
                                    display: inline-block;
                                    text-decoration: line-through;
                                }

                                .newly {
                                    overflow: visible;
                                }
                                .newly::after {
                                    background: #5a0;
                                    border-radius: 50%;
                                    content: '';
                                    display: block;
                                    height: 0.33em;
                                    width: 0.33em;
                                    position: absolute;
                                    top: -0.16em;
                                    right: -0.33em;
                                    animation: blinkNewly 2s infinite linear;
                                }
                                @keyframes blinkNewly {
                                    0%  { opacity: 1; }
                                    50% { opacity: 0; }
                                }

                            ol,
                            ul {
                                display: block;
                                margin-bottom: 1rem;
                                padding-left: 3rem;
                            }
                            ol:last-child,
                            ul:last-child {
                                margin-bottom: 0;
                            }

                                li {
                                    overflow: visible;
                                }

                                .cellular > li + li {
                                    margin-top: 1rem;
                                }

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

                        figure {
                            display: block;
                            margin-bottom: 1rem;
                            text-align: center;
                        }

                        figure:last-child {
                            margin-bottom: 0;
                        }

                            img,
                            svg,
                            audio,
                            video {
                                border-radius: 0.25em;
                                display: block;
                                margin-bottom: 1rem;
                                width: 100%;
                                max-height: 100vh;
                            }
                            img {
                                object-fit: cover;
                            }

                            img:last-child,
                            svg:last-child,
                            audio:last-child,
                            video:last-child {
                                margin-bottom: 0;
                            }

                            figcaption {
                                color: inherit;
                                display: block;
                                font-size: 0.75rem;
                            }

                                figure a {
                                    color: inherit;
                                    cursor: pointer;
                                    display: inline-block;
                                    text-decoration: underline;
                                    transition: all 0.33s;
                                }

                                figure a:hover,
                                figure a:active,
                                figure a:focus {
                                    color: #fc6;
                                    cursor: pointer;
                                    outline: none;
                                    text-decoration: underline;
                                }

                        pre {
                            background: #000a15;
                            border-radius: 0.33rem;
                            color: inherit;
                            display: block;
                            font-size: 80%;
                            margin-bottom: 1rem;
                            padding: 1rem;
                            overflow: auto;
                            text-overflow: unset;
                        }

                        pre:last-child {
                            margin-bottom: 0;
                        }

                        .message.interlude pre {
                            background: #081133;
                        }

                        pre.filelist {
                            line-height: 1;
                        }

                        pre[data-title]:not([data-title=""])::before {
                            background: #234;
                            color: #8ab;
                            font-size: 0.75em;
                            font-weight: normal;
                            margin: -1rem -1rem 0.5rem;
                            padding: 0.5em 1.25em;
                        }

                            pre b      { font-weight: normal; }
                            pre strong { }
                            pre i      { }
                            pre em     { }
                            pre u      { }
                            pre ins    { }
                            pre del    { }

                        .btn + .message,
                        .btn + h1,
                        .btn + h2,
                        .btn + h3,
                        .btn + h4,
                        .btn + h5,
                        .btn + h6,
                        .btn + .title,
                        .btn + p,
                        .btn + ul,
                        .btn + ol,
                        .btn + dl,
                        .btn + figure,
                        .btn + img,
                        .btn + svg,
                        .btn + video,
                        .btn + audio,
                        .btn + table,
                        .btn + details,
                        .btn + .buttons,
                        .buttons + .message,
                        .buttons + h1,
                        .buttons + h2,
                        .buttons + h3,
                        .buttons + h4,
                        .buttons + h5,
                        .buttons + h6,
                        .buttons + .title,
                        .buttons + p,
                        .buttons + ul,
                        .buttons + ol,
                        .buttons + dl,
                        .buttons + figure,
                        .buttons + img,
                        .buttons + svg,
                        .buttons + video,
                        .buttons + audio,
                        .buttons + table,
                        .buttons + details,
                        .buttons + .buttons {
                            margin-top: 1rem;
                        }

                    /**
                     * -----------------------------------------------------
                     *
                     * A channel in the list. To understand the purpose of
                     * these styles, please look at the file
                     * "Themes/default/channels-list.tpl".
                     *
                     * -----------------------------------------------------
                     */

                    a.message {
                        cursor: pointer;
                        text-decoration: none;
                        overflow: visible;
                    }

                    a.message:hover,
                    a.message:active,
                    a.message:focus {
                        cursor: pointer;
                        outline: none;
                        text-decoration: none;
                    }

                        a.message .avatar {
                        }

                            a.message .avatar img {
                            }

                        a.message .title {
                            color: #48c;
                            text-decoration: underline;
                        }

                        [data-count]:not([data-count="0"]):not([data-count=""]) {
                            padding-right: 4.2em;
                            overflow: visible;
                        }

                        [data-count]:not([data-count="0"]):not([data-count=""])::before {
                            background: #5a6;
                            border-radius: 0.125em;
                            box-shadow: #012 0 0 0 0.6em;
                            color: #dfe;
                            content: attr(data-count);
                            display: block;
                            font-size: 70%;
                            padding: 0.25em 1em;
                            position: absolute;
                            right: 1.3em;
                            bottom: -1.5em;
                            z-index: 1;
                        }

                        a.message:hover  .title,
                        a.message:active .title,
                        a.message:focus  .title {
                            color: #fc6;
                            text-decoration: underline;
                        }

                        .info {
                            background: #234;
                            color: #8ab;
                            border-radius: 0.33rem;
                            display: block;
                            padding: 1rem;
                        }

                        [data-count]:not([data-count="0"]):not([data-count=""]) + .info {
                            padding-right: 6.2em;
                        }

                        [data-date]:not([data-date=""]),
                        [data-time]:not([data-time=""]) {
                            margin-bottom: 1.5em;
                            padding-bottom: 1.66rem;
                            overflow: visible;
                        }

                        [data-date]:not([data-date=""])::after,
                        [data-time]:not([data-time=""])::after {
                            background: #012;
                            border-radius: 0.33em;
                            color: inherit;
                            display: block;
                            font-size: 85%;
                            padding: 0.5em 1em;
                            position: absolute;
                            left: 1.15em;
                            bottom: -1.5em;
                            z-index: 1;
                        }
                        [data-time]:not([data-time=""])::after {
                            left: auto;
                            right: 1.15em;
                        }

                        [data-date]:not([data-date=""])::after { content: attr(data-date); }
                        [data-time]:not([data-time=""])::after { content: attr(data-time); }

                    /**
                     * -----------------------------------------------------
                     *
                     * An error message. To understand the purpose of these
                     * styles, please look at the "Themes/default/error-404.tpl"
                     * file.
                     *
                     * -----------------------------------------------------
                     */

                    .message.modal {
                        color: #8ab;
                        width: 45vw;
                        max-width: 45%;
                        padding: 1rem;
                        overflow: visible;
                        position: fixed;
                        top: 50%;
                        left: 50%;
                        z-index: 1;
                        transform: translate(-50%, -50%);
                    }

                    .message.modal::before {
                        background: #000810;
                        content: '';
                        display: block;
                        width: 150vw;
                        height: 150vh;
                        opacity: 0.8;
                        position: fixed;
                        top: -50vh;
                        left: -50vw;
                        z-index: 1;
                    }

                    .message.modal::after {
                        background: #012;
                        border-radius: 0.33rem;
                        content: '';
                        display: block;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 1;
                    }

                        .message.modal > * {
                            z-index: 2;
                        }

                /**
                 * ---------------------------------------------------------
                 *
                 * A sidebar on the right.
                 *
                 * ---------------------------------------------------------
                 */

                .hint {
                    border-left: #000a15 1rem solid;
                    color: #238;
                    display: block;
                    grid-column: span 1;
                    grid-row: 2/-1;
                    font-size: 0.65rem;
                    line-height: 1.75;
                    padding: 1rem;
                    width: 100%;
                    text-align: left;
                }

                    .hint .avatar {
                        box-shadow: none;
                        border-radius: 0;
                        float: none;
                        margin: 0 0 1rem;
                        height: auto;
                        width: 100%;
                    }

                    .hint .avatar:active::before,
                    .hint .avatar:focus::before,
                    .hint .avatar:focus-within::before {
                        background: #000810;
                        content: '';
                        display: block;
                        width: 100vw;
                        height: 100vh;
                        opacity: 0.8;
                        position: fixed;
                        top: 0;
                        left: 0;
                        z-index: 65534;
                    }

                        .hint .avatar img {
                            cursor: zoom-in;
                        }

                        .hint .avatar img:active,
                        .hint .avatar img:focus {
                            border-radius: 0;
                            cursor: zoom-out;
                            min-height: auto;
                            height: calc(100vh - 1.5rem - 1.5rem);
                            width: calc(100vw - 1.5rem - 1.5rem);
                            object-fit: contain;
                            position: fixed;
                            top: 50%;
                            left: 50%;
                            z-index: 65535;
                            transform: translate(-50%, -50%);
                        }

                    .hint ul,
                    .hint ol {
                        padding-left: 1.25em;
                    }

                        .hint ul ul u,
                        .hint ul ol u,
                        .hint ol ul u,
                        .hint ol ol u {
                            color: inherit;
                        }

                            .hint ul ul ul,
                            .hint ol ol ol {
                                color: #555;
                            }

                    .hint h1:not(:first-child),
                    .hint h2:not(:first-child),
                    .hint h3:not(:first-child),
                    .hint h4:not(:first-child),
                    .hint h5:not(:first-child),
                    .hint h6:not(:first-child) {
                        margin-top: 1rem;
                        padding-top: 2rem;
                        overflow: visible;
                    }

                    .hint h1:not(:first-child)::before,
                    .hint h2:not(:first-child)::before,
                    .hint h3:not(:first-child)::before,
                    .hint h4:not(:first-child)::before,
                    .hint h5:not(:first-child)::before,
                    .hint h6:not(:first-child)::before {
                        background: #000a15;
                        content: '';
                        display: block;
                        height: 1rem;
                        width: calc(1rem + 100% + 1rem);
                        position: absolute;
                        top: 0;
                        left: -1rem;
                    }

                    /**
                     * -----------------------------------------------------
                     *
                     * An adaptability.
                     *
                     * -----------------------------------------------------
                     */

                    @media (max-width: 1280px) {
                        .hint {
                            border-top: #000a15 1rem solid;
                            border-left: none;
                            font-size: 0.7rem;
                            grid-column: 2/-1;
                            grid-row: auto;
                        }
                    }

                    @media (max-width: 1024px) {
                        .hint {
                            font-size: 0.75rem;
                        }
                    }

                    @media (max-width: 800px) {
                        .hint {
                            border-left: none;
                            grid-column: 1/-1;
                            grid-row: auto;
                        }
                    }

                    @media (max-width: 768px) {
                        .hint {
                            font-size: 0.8rem;
                        }
                    }

                    @media (max-width: 512px) {
                        .hint {
                            font-size: 0.85rem;
                        }
                    }

                /**
                 * ---------------------------------------------------------
                 *
                 * A page footer. To understand the purpose of these styles,
                 * please look at the "Themes/default/snippets/footer.tpl"
                 * file.
                 *
                 * ---------------------------------------------------------
                 */

                .footer {
                    background: #000a15;
                    display: block;
                    grid-column: span 3;
                    font-size: 0.75rem;
                    line-height: 1.33rem;
                    padding: 1rem;
                    width: 100%;
                    text-align: right;
                }

                    .copyright {
                        display: inline-block;
                    }

                    .credits {
                        display: inline-block;
                        margin: 0 0 0 2rem;
                    }

                        .credits a {
                            color: inherit;
                            cursor: pointer;
                            display: inline-block;
                            text-decoration: underline;
                            transition: all 0.33s;
                        }

                        .credits a:hover,
                        .credits a:active,
                        .credits a:focus {
                            color: #fc6;
                            cursor: pointer;
                            outline: none;
                            text-decoration: underline;
                        }

                    /**
                     * -----------------------------------------------------
                     *
                     * An adaptability.
                     *
                     * -----------------------------------------------------
                     */

                    @media (max-width: 1280px) {
                        .footer {
                            grid-column: 1/-1;
                        }
                    }
