/**
 * -------------------------------------------------------------------------
 *
 * The styles for the fronrend page.
 *
 * -------------------------------------------------------------------------
 *
 * @copyright  2022 MiMiMi Community
 *             https://mimimi.software/
 *
 * -------------------------------------------------------------------------
 */

    /**
     * ---------------------------------------------------------------------
     *
     * Reset the browser styles.
     *
     * ---------------------------------------------------------------------
     */

    * {
        background:      transparent;
        border:          none;
        box-shadow:      none;
        box-sizing:      border-box;
        border-radius:   0;
        color:           inherit;
        outline:         none;
        cursor:          default;
        font-family:     inherit;
        font-size:       inherit;
        font-style:      normal;
        font-weight:     normal;
        margin:          0 auto;
        padding:         0;
        max-width:       100%;
        text-align:      left;
        text-decoration: none;
        text-shadow:     none;
        vertical-align:  middle;
        position:        relative;
    }

    a,
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    input[type="image"],
    input[type="file"],
    .btn {
        cursor: pointer;
    }

    input.switch {
        cursor:         default;
        pointer-events: none;
        display:        block;
        height:         1px;
        width:          1px;
        overflow:       hidden;
        opacity:        0.0001;
        position:       fixed;
        bottom:         110vh;
        right:          110vw;
        z-index:        -1;
    }

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

    /**
     * ---------------------------------------------------------------------
     *
     * Define the colors.
     *
     * ---------------------------------------------------------------------
     */

    :root {
        --htmlBackground:                          white;
            --bodyBackground:                      transparent;
                --contentBackground:               transparent;
                --contentRemarkColor:              #bdbdbd;

                    --sectionContourColor:         #b71c1c;

                        --titleBackground:         transparent;
                        --titleColor:              #b71c1c;

                        --textColor:               #242424;
                            --abbrColor:           #1976d2;
                            --codeBackground:      var( --abbrColor );
                            --codeColor:           rgba( 255, 255, 255, 0.66 );

                        --hrColor:                 var( --textColor );

                        --buttonBackground:        var( --titleColor );
                        --buttonColor:             #ffebee;
                        --buttonHoverBackground:   #512da8;
                        --buttonHoverColor:        white;

                        --figureBackground:        transparent;

                        --blockquoteBackground:    var( --textColor );
                        --blockquoteColor:         rgba( 255, 255, 255, 0.5 );

                        --detailsBackground:       transparent;
                        --detalsColor:             inherit;

                            --summaryBackground:   transparent;
                            --summaryColor:        var( --titleColor );
                            --summaryHoverColor:   var( --buttonHoverBackground );

                        --tableHeaderBackground:   var( --textColor );
                        --tableHeaderColor:        rgba( 255, 255, 255, 0.5 );
                        --tableRowHoverBackground: #e0e0e0;
                        --tableCellBackground:     white;
                        --tableCellColor:          var( --textColor );
                        --tableLinkColor:          var( --titleColor );
                        --tableLinkHoverColor:     var( --buttonHoverBackground );

        --selectionBackground:                     #104221;
        --selectionColor:                          #19d276;

        /**
         * -----------------------------------------------------------------
         *
         * And determine the dimensions.
         *
         * -----------------------------------------------------------------
         */

        --defaultIndent:        1.5;
        --defaultLineHeight:    1.66;

        --indentByHorizontal:   calc( var( --defaultIndent ) * 1rem );
        --indentByVertical:     calc( var( --defaultIndent ) * 1rem );

        --sectionContourWidth:  0.33rem;
        --sectionContourIndent: calc( var( --sectionContourWidth ) * 2 );

        --titleLineHeight:      1.33;
        --titleFontSize:        calc( var( --indentByHorizontal ) * 3 );

        --hrWidth:              0.33rem;

        --contentMaxWidth:      2560px;
    }

    /**
     * ---------------------------------------------------------------------
     *
     * Declare the fonts.
     *
     * ---------------------------------------------------------------------
     */

    @font-face {
        font-family:  'Fredericka the Great';
        font-style:   normal;
        font-weight:  400;
        font-display: swap;
        src:          url('../fonts/FrederickatheGreat-Regular.ttf') format('truetype');
    }

    @font-face {
        font-family:  'Vast Shadow';
        font-style:   normal;
        font-weight:  400;
        font-display: swap;
        src:          url('../fonts/VastShadow-Regular.ttf') format('truetype');
    }

    @font-face {
        font-family:  'Rokkitt';
        font-style:   normal;
        font-weight:  400;
        font-display: swap;
        src:          url('../fonts/Rokkitt-Regular.ttf') format('truetype');
        size-adjust:  150%;
    }

    @font-face {
        font-family:  'Stint Ultra Expanded';
        font-style:   normal;
        font-weight:  400;
        font-display: swap;
        src:          url('../fonts/StintUltraExpanded-Regular.ttf') format('truetype');
    }

    :root {
        --fontName:              'Vast Shadow',          serif;
        --fontNameForBlockquote: 'Rokkitt',              serif;
        --fontNameForTitle:      'Fredericka the Great', serif;
        --fontNameForButton:     'Stint Ultra Expanded', monospace;
    }

    /**
     * ---------------------------------------------------------------------
     *
     * Adjust the font size to fit the current viewport.
     *
     * ---------------------------------------------------------------------
     */

    :root {
        --screenSizeX:   80;
        --screenSizeY:   25;

        --displayHeight: 100vh;
        --displayWidth:  min( var( --contentMaxWidth ), 100vw );

        --fontByHeight:  calc( var( --displayHeight ) / var( --screenSizeY ) );
        --fontByWidth:   calc( var( --displayWidth  ) / var( --screenSizeX ) );

        --fontMinimal:   12px;
        --fontOptimal:   min( var( --fontByHeight ), var( --fontByWidth ) );
        --fontSize:      max( var( --fontOptimal  ), var( --fontMinimal ) );
    }

    /**
     * ---------------------------------------------------------------------
     *
     * Stages of interaction.
     *
     * ---------------------------------------------------------------------
     */

    ::selection {
        background: var( --selectionBackground );
        color:      var( --selectionColor      );
    }

    /**
     * ---------------------------------------------------------------------
     *
     * The browser document.
     *
     * ---------------------------------------------------------------------
     */

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

        html * {
            line-height: var( --defaultLineHeight );
        }

        body {
            background: var( --bodyBackground );
            display:    block;
            width:      100%;
            min-height: 100vh;
        }

        /**
         * -----------------------------------------------------------------
         *
         * Document bodies by type.
         *
         * -----------------------------------------------------------------
         */

        body.home-page  { }
        body.landing    { }
        body.error-page { }

            /**
             * -------------------------------------------------------------
             *
             * Content wrapper.
             *
             * -------------------------------------------------------------
             */

            .content {
                background: var( --contentBackground );
                display:    block;
                max-width:  var( --contentMaxWidth );
                text-align: center;
            }

            .content[data-remark]::before {
                --remarkLogoHeight:   152px;
                --remarkMarginBottom: var( --indentByVertical   );
                --remarkMarginTop:    var( --indentByHorizontal );
                --remarkMaxWidth:     calc( 100vh - var( --indentByVertical   )
                                                  - var( --indentByVertical   )
                                                  - var( --remarkLogoHeight   )
                                                  - var( --indentByVertical   )
                                                  - var( --indentByVertical   )
                                                  - var( --remarkMarginBottom ) );

                content:       attr( data-remark );
                color:         var( --contentRemarkColor );
                display:       block;
                font-family:   var( --fontNameForBlockquote );
                font-size:     var( --fontMinimal );
                font-size:     50%;
                border-bottom: transparent calc( var( --remarkMaxWidth ) - 1.5rem ) solid;
                line-height:   0.75rem;
                height:        1.5rem;
                width:         var( --remarkMaxWidth );
                overflow:      hidden;
                text-overflow: ellipsis;
                text-align:    left;
                position:      absolute;
                top:           calc( 100vh - var( --remarkMaxWidth )
                                           - var( --remarkMarginBottom ) );
                left:          var( --remarkMarginTop );
                transform:     rotateZ( -90deg );
            }

            .error-page .content {
                display:       grid;
                align-content: center;
                min-height:    100vh;
            }

                /**
                 * ---------------------------------------------------------
                 *
                 * Content section wrapper.
                 *
                 * ---------------------------------------------------------
                 */

                .section,
                section {
                    background:  var( --sectionBackground );
                    display:     block;
                    padding:     var( --indentByVertical   )
                                 var( --indentByHorizontal );
                    text-align:  center;
                }

                .section::after,
                section::after {
                    clear:   both;
                    content: "";
                    display: block;
                    height:  1px;
                    width:   100%;
                    margin:  -1px 0 1px;
                }

                    /**
                     * -----------------------------------------------------
                     *
                     * A text.
                     *
                     * -----------------------------------------------------
                     */

                    .title,
                    h1,
                    h2,
                    h3,
                    h4,
                    h5,
                    h6 {
                        background:    var( --titleBackground );
                        color:         var( --titleColor );
                        display:       block;
                        font-family:   var( --fontNameForTitle );
                        font-size:     var( --titleFontSize    );
                        line-height:   var( --titleLineHeight  );
                        margin-bottom: var( --indentByVertical );
                        text-align:    left;
                        text-overflow: ellipsis;
                        overflow:      hidden;
                    }

                    p {
                        color:         var( --textColor );
                        display:       block;
                        margin-bottom: var( --indentByVertical );
                        font-size:     var( --indentByHorizontal );
                        text-align:    left;
                        text-overflow: ellipsis;
                        overflow:      hidden;
                    }

                        abbr {
                            color:         var( --abbrColor );
                            display:       inline-block;
                            text-indent:   0;
                            text-overflow: ellipsis;
                            overflow:      hidden;
                        }

                        code {
                            background:    var( --codeBackground );
                            border-radius: 0.125em;
                            color:         var( --codeColor );
                            display:       inline-block;
                            padding:       0 0.25em;
                            text-overflow: ellipsis;
                            overflow:      hidden;
                        }

                    blockquote {
                        background:     var( --blockquoteBackground );
                        border-radius:  calc( var( --indentByHorizontal ) * 1.66 )
                                        0;
                        color:          var( --blockquoteColor );
                        display:        block;
                        font-family:    var( --fontNameForBlockquote );
                        letter-spacing: 0.075em;
                        margin-bottom:  var( --indentByVertical   );
                        padding:        var( --indentByHorizontal )
                                        var( --indentByVertical   );
                        font-size:      80%;
                        text-align:     left;
                        text-overflow:  ellipsis;
                        overflow:       hidden;
                    }

                        blockquote p {
                            color:       inherit;
                            font-size:   inherit;
                            text-indent: 0;
                        }

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

                    details {
                        background:     var( --detailsBackground );
                        color:          var( --detailsColor      );
                        clear:          both;
                        display:        block;
                        margin-top:     var( --indentByVertical );
                        text-align:     left;
                        text-overflow:  ellipsis;
                        overflow:       hidden;
                    }

                        summary {
                            background:     var( --summaryBackground );
                            color:          var( --summaryColor      );
                            cursor:         pointer;
                            margin-bottom:  var( --indentByVertical );
                            text-align:     left;
                            text-overflow:  ellipsis;
                        }

                        summary:hover,
                        summary:active,
                        summary:focus {
                            color: var( --summaryHoverColor );
                        }

                    table {
                        border-collapse: collapse;
                        clear:           both;
                        font-size:       80%;
                        margin-bottom:   var( --indentByVertical );
                    }
                    table.version-history { }

                        thead {
                        }

                            tr {
                            }

                                th {
                                    background: var( --tableHeaderBackground );
                                    color:      var( --tableHeaderColor );
                                    padding:    1em;
                                    text-align: right;
                                }
                                th:first-child {
                                    width:      100%;
                                    text-align: left;
                                }

                        tbody {
                        }

                                td {
                                    background:    var( --tableCellBackground );
                                    border-bottom: var( --tableCellColor ) 1px solid;
                                    color:         var( --tableCellColor );
                                    padding:       1em;
                                    text-align:    right;
                                }
                                td:first-child {
                                    width:      100%;
                                    text-align: left;
                                }

                                tr:hover        td,
                                tr:active       td,
                                tr:focus-within td {
                                    background: var( --tableRowHoverBackground );
                                }

                                    table a {
                                        color: var( --tableLinkColor );
                                    }
                                    table a:hover,
                                    table a:active,
                                    table a:focus {
                                        color: var( --tableLinkHoverColor );
                                    }

                        tfoot {
                        }

                        @media (max-width: 767px) {
                            .version-history th:first-child,
                            .version-history td:first-child {
                                display: none;
                            }
                            .version-history th:first-child + th,
                            .version-history td:first-child + td {
                                width:      100%;
                                text-align: left;
                            }
                        }

                        @media (max-width: 511px) {
                            .version-history th:first-child + th + th + th,
                            .version-history td:first-child + td + td + td {
                                white-space: normal;
                            }
                        }

                    hr {
                        background:    var( --hrColor );
                        border-radius: var( --hrWidth );
                        clear:         both;
                        display:       block;
                        height:        var( --hrWidth );
                        margin:        var( --indentByVertical   )
                                       auto;
                    }

                    /**
                     * -----------------------------------------------------
                     *
                     * The images.
                     *
                     * -----------------------------------------------------
                     */

                    figure {
                        background:    var( --figureBackground );
                        display:       block;
                        font-size:     80%;
                        margin-bottom: var( --indentByVertical );
                        text-align:    center;
                    }

                        figure img {
                            display: block;
                        }

                    figure.logo {
                        height: 8em;
                        width:  13em;
                    }

                        figure.logo img {
                            max-height: 100%;
                            animation:  swingLogo 4s infinite linear;
                        }

                        @keyframes swingLogo {
                            0%   { transform: rotate(  0deg ); }
                            25%  { transform: rotate(  8deg ); }
                            75%  { transform: rotate( -8deg ); }
                        }

                    figure.hero {
                    }

                        figure.hero img {
                        }

                    /**
                     * -----------------------------------------------------
                     *
                     * The buttons.
                     *
                     * -----------------------------------------------------
                     */

                    .btn,
                    button {
                        background:     var( --buttonBackground );
                        border-radius:  calc( var( --indentByHorizontal ) / 1.5 )
                                        0;
                        color:          var( --buttonColor );
                        cursor:         pointer;
                        display:        inline-block;
                        font-family:    var( --fontNameForButton );
                        font-size:      var( --indentByHorizontal );
                        font-weight:    bold;
                        letter-spacing: 0.1em;
                        margin:         calc( var( --indentByHorizontal ) / 2 )
                                        calc( var( --indentByVertical   ) / 2 )
                                        0;
                        padding:        calc( var( --indentByHorizontal ) / 4 )
                                        calc( var( --indentByVertical   ) / 1 );
                        text-align:     center;
                        text-overflow:  ellipsis;
                        overflow:       hidden;
                        white-space:    nowrap;
                    }
                    .btn:hover,
                    .btn:active,
                    .btn:focus,
                    button:hover,
                    button:active,
                    button:focus {
                        background: var( --buttonHoverBackground );
                        color:      var( --buttonHoverColor );
                    }

                    /**
                     * -----------------------------------------------------
                     *
                     * Miscellaneous.
                     *
                     * -----------------------------------------------------
                     */

                    .error-page h1,
                    .error-page p {
                        text-align: inherit;
                    }

                /**
                 * ---------------------------------------------------------
                 *
                 * Any section on the landing page.
                 *
                 * ---------------------------------------------------------
                 */

                .landing .section,
                .landing section {
                    --sectionGapTop:              0em;
                    --sectionMarginLeft:          calc( var( --indentByHorizontal ) * 2 );
                    --sectionMarginRight:         var( --indentByHorizontal );
                    --sectionPaddingTop:          var( --indentByVertical   );
                    --sectionPaddingRight:        var( --indentByHorizontal );
                    --sectionPaddingBottom:       var( --indentByVertical   );
                    --sectionPaddingLeft:         calc( var( --indentByHorizontal ) * 2 );
                    --sectionFigurePaddingTop:    0em;
                    --sectionFigurePaddingRight:  0em;
                    --sectionFigurePaddingBottom: 0em;
                    --sectionFigurePaddingLeft:   0em;
                    --sectionFigureMaximalSize:   100vw;
                    --sectionImageMarginBottom:   var( --indentByVertical );
                    --sectionImageMinimalSize:    256px;
                }

                .landing .section:nth-of-type( 2n ),
                .landing section:nth-of-type(  2n ) {
                    --sectionMarginLeft:          var( --indentByHorizontal );
                    --sectionMarginRight:         calc( var( --indentByHorizontal ) * 2 );
                    --sectionPaddingRight:        calc( var( --indentByHorizontal ) * 2 );
                    --sectionPaddingLeft:         var( --indentByHorizontal );
                }

                @media (orientation: landscape) {
                    .landing .section:nth-of-type( 2n ),
                    .landing section:nth-of-type(  2n ) {
                        --sectionFigurePaddingLeft: var( --indentByHorizontal );
                        --sectionFigureMaximalSize:  50vw;
                    }
                    .landing .section:nth-of-type( 2n + 1 ),
                    .landing section:nth-of-type(  2n + 1 ) {
                        --sectionFigurePaddingRight: var( --indentByHorizontal );
                        --sectionFigureMaximalSize:  50vw;
                    }
                }

                .landing .section,
                .landing section {
                    --sectionImageWidth:  calc( var( --sectionFigureMaximalSize ) - var( --sectionPaddingLeft        )
                                                                                  - var( --sectionFigurePaddingLeft  )
                                                                                  - var( --sectionFigurePaddingRight )
                                                                                  - var( --sectionPaddingRight       ) );
                    --sectionImageHeight: calc( 100vh - var( --sectionGapTop              )
                                                      - var( --sectionPaddingTop          )
                                                      - var( --titleFontSize              ) * var( --titleLineHeight )
                                                      - var( --indentByVertical           )
                                                      - var( --sectionFigurePaddingTop    )
                                                      - var( --sectionFigurePaddingBottom )
                                                      - var( --sectionImageMarginBottom   )
                                                      - var( --sectionPaddingBottom       ) );
                    --sectionImageSize:   max( var( --sectionImageMinimalSize )   ,
                                               min( var( --sectionImageWidth  ) ,
                                                    var( --sectionImageHeight ) ) );

                    margin-left:    var( --sectionMarginLeft  );
                    margin-right:   var( --sectionMarginRight );
                    padding-top:    calc( var( --sectionGapTop     )
                                        + var( --sectionPaddingTop ) );
                    padding-right:  var( --sectionPaddingRight  );
                    padding-bottom: var( --sectionPaddingBottom );
                    padding-left:   var( --sectionPaddingLeft   );
                }

                /**
                 * ---------------------------------------------------------
                 *
                 * Section border.
                 *
                 * ---------------------------------------------------------
                 */

                .landing .section::before,
                .landing section::before {
                    border:        var( --sectionContourColor ) var( --sectionContourWidth ) dashed;
                    border-radius: calc( var( --indentByHorizontal ) * 3 )
                                   0
                                   0
                                   calc( var( --indentByHorizontal ) * 3 );
                    box-sizing:    border-box;
                    content:       "";
                    display:       block;
                    height:        calc( 100% + var( --sectionContourWidth ) - 1px );    /* -1px supresses the height of the section::AFTER pseudo-element styled above */
                    width:         calc( 50% - ( var( --sectionMarginLeft  )
                                               + var( --sectionMarginRight ) ) / 3 );
                    position:      absolute;
                    bottom:        var( --sectionContourIndent );
                }

                .landing .section:nth-of-type( 2n )::before,
                .landing section:nth-of-type(  2n )::before {
                    border-left:   none;
                    border-radius: 0
                                   calc( var( --indentByHorizontal ) * 3 )
                                   calc( var( --indentByHorizontal ) * 3 )
                                   0;
                    right:         var( --sectionContourIndent );
                }

                .landing .section:nth-of-type( 2n + 1 )::before,
                .landing section:nth-of-type(  2n + 1 )::before {
                    border-right: none;
                    left:         var( --sectionContourIndent );
                }

                /**
                 * ---------------------------------------------------------
                 *
                 * Section border disc.
                 *
                 * ---------------------------------------------------------
                 */

                .landing .section + .section h1:first-child::before,
                .landing .section + .section h2:first-child::before,
                .landing .section + .section h3:first-child::before,
                .landing .section + .section h4:first-child::before,
                .landing .section + .section h5:first-child::before,
                .landing .section + .section h6:first-child::before,
                .landing section  + section  h1:first-child::before,
                .landing section  + section  h2:first-child::before,
                .landing section  + section  h3:first-child::before,
                .landing section  + section  h4:first-child::before,
                .landing section  + section  h5:first-child::before,
                .landing section  + section  h6:first-child::before,
                .landing                     .footer::before {
                    background:    var( --htmlBackground      );
                    border:        var( --sectionContourColor ) dashed      var( --sectionContourWidth );
                    box-shadow:    var( --htmlBackground      ) 0 0 0       var( --sectionContourWidth )          inset,
                                   var( --htmlBackground      ) 0 0 0 calc( var( --sectionContourWidth ) * 1.25 ) inset,
                                   var( --sectionContourColor ) 0 0 0 calc( var( --sectionContourWidth ) * 10   ) inset,
                                   var( --htmlBackground      ) 0 0 0 calc( var( --sectionContourWidth ) * 1.5  );
                    border-radius: 50%;
                    content:       "";
                    display:       block;
                    height:        calc( 8 * var( --sectionContourWidth ) );
                    width:         calc( 8 * var( --sectionContourWidth ) );
                    position:      absolute;
                    top:           calc( var( --sectionContourWidth ) * -7.5
                                       + var( --sectionGapTop       ) * -1.0
                                       + var( --sectionPaddingTop   ) * -1.0
                                       + var( --sectionContourWidth ) * -0.0 );
                    left:          50%;
                    animation:     swingDisc 4s infinite linear;
                }

                .landing .section:nth-of-type( 2n ) + .section h1:first-child::before,
                .landing .section:nth-of-type( 2n ) + .section h2:first-child::before,
                .landing .section:nth-of-type( 2n ) + .section h3:first-child::before,
                .landing .section:nth-of-type( 2n ) + .section h4:first-child::before,
                .landing .section:nth-of-type( 2n ) + .section h5:first-child::before,
                .landing .section:nth-of-type( 2n ) + .section h6:first-child::before,
                .landing section:nth-of-type(  2n ) + section  h1:first-child::before,
                .landing section:nth-of-type(  2n ) + section  h2:first-child::before,
                .landing section:nth-of-type(  2n ) + section  h3:first-child::before,
                .landing section:nth-of-type(  2n ) + section  h4:first-child::before,
                .landing section:nth-of-type(  2n ) + section  h5:first-child::before,
                .landing section:nth-of-type(  2n ) + section  h6:first-child::before,
                .landing                     .footer::before {
                    margin-left: calc( -8.5 * var( --sectionContourWidth ) );
                }

                    @keyframes swingDisc {
                        0%   { transform: rotate(   0deg ); }
                        25%  { transform: rotate( -36deg ); }
                        75%  { transform: rotate(  36deg ); }
                    }

                .landing .footer::before {
                    margin-left: calc( -4 * var( --sectionContourWidth ) );
                    top:         calc( var( --sectionContourWidth ) * -4.75
                                     + var( --indentByVertical    ) * -0.5
                                     + var( --sectionContourWidth ) * -0.0 );
                }

                    /**
                     * -----------------------------------------------------
                     *
                     * Section text.
                     *
                     * -----------------------------------------------------
                     */

                    .landing .section .title,
                    .landing .section h1,
                    .landing .section h2,
                    .landing .section h3,
                    .landing .section h4,
                    .landing .section h5,
                    .landing .section h6,
                    .landing section  .title,
                    .landing section  h1,
                    .landing section  h2,
                    .landing section  h3,
                    .landing section  h4,
                    .landing section  h5,
                    .landing section  h6 {
                        text-align: inherit;
                        overflow:   visible;    /* because its BEFORE pseudo-element represents a border disc styled above */
                    }

                    .landing .section p,
                    .landing section  p {
                        text-indent: 2em;
                    }

                    /**
                     * -----------------------------------------------------
                     *
                     * Section image.
                     *
                     * -----------------------------------------------------
                     */

                    .landing .section .hero,
                    .landing section  .hero {
                        padding-right: var( --sectionFigurePaddingRight );
                        padding-left:  var( --sectionFigurePaddingLeft  );
                    }

                        .landing .section .hero img,
                        .landing section  .hero img {
                            height: auto;
                        }

                    @media (orientation: landscape) {
                        .landing .section .hero,
                        .landing section  .hero {
                            float:      left;
                            width:      50%;
                            max-height: var( --sectionImageSize );
                            text-align: right;
                        }
                            .landing .section .hero img,
                            .landing section  .hero img {
                                margin-right: 0;
                                width:        auto;
                                max-height:   var( --sectionImageSize );
                                object-fit:   contain;
                            }
                        .landing .section:nth-of-type( 2n ) .hero,
                        .landing section:nth-of-type(  2n ) .hero {
                            float:      right;
                            text-align: left;
                        }
                            .landing .section:nth-of-type( 2n ) .hero img,
                            .landing section:nth-of-type(  2n ) .hero img {
                                margin-right: auto;
                                margin-left:  0;
                            }
                     }

                    /**
                     * -----------------------------------------------------
                     *
                     * Section logo.
                     *
                     * -----------------------------------------------------
                     */

                    .landing .section .logo,
                    .landing section  .logo {
                        position:  absolute;
                        top:       calc( -5em - var( --sectionContourIndent ) );
                        transform: translateX(-35%);
                    }

                    .landing .section:nth-of-type( 2n ) .logo,
                    .landing section:nth-of-type(  2n ) .logo {
                        right: -11em;
                    }
                    .landing .section:nth-of-type( 2n + 1 ) .logo,
                    .landing section:nth-of-type(  2n + 1 ) .logo {
                        left: 0;
                    }

                    .landing .section .logo::before,
                    .landing section  .logo::before {
                        background:    white;
                        border-radius: 50%;
                        content:       "";
                        display:       block;
                        width:         calc( 8em + var( --indentByHorizontal ) );
                        height:        calc( 8em + var( --indentByHorizontal ) );
                        position:      absolute;
                        top:           calc( -0.5 * var( --indentByHorizontal ) );
                        left:          calc( 0.33 * var( --indentByHorizontal ) );
                    }

                /**
                 * ---------------------------------------------------------
                 *
                 * The WELCOME section if you need to redesign it only.
                 *
                 * ---------------------------------------------------------
                 */

                .welcome {
                    --sectionGapTop: calc( var( --indentByVertical ) * 1.5 ) !important;
                }

                .welcome::before {
                    border-top:    none !important;
                    border-radius: 0
                                   0
                                   0
                                   calc( var( --indentByHorizontal ) * 3 )
                                   !important;
                    height:        calc( 100% - var( --sectionGapTop     )
                                              - var( --sectionPaddingTop )
                                              - var( --indentByVertical  ) )
                                   !important;
                }

                    .welcome h1 {
                        background:     var( --textColor );
                        border-radius:  0 0 var( --indentByHorizontal ) var( --indentByHorizontal );
                        color:          var( --blockquoteColor );
                        font-family:    var( --fontNameForBlockquote );
                        font-size:      75%;
                        letter-spacing: 0.075em;
                        line-height:    var( --sectionGapTop );
                        height:         var( --sectionGapTop );
                        width:          100%;
                        padding:        0 var( --indentByHorizontal );
                        overflow:       hidden !important;
                        position:       absolute;
                        top:            0;
                        left:           0;
                    }

                        .welcome h1 span {
                            display:     inline-block;
                            white-space: nowrap;
                        }

                        .welcome h1 * {
                            animation: lightShow 2.5s infinite linear;
                        }
                        .welcome h1 *:nth-child(1) { animation-delay:  300ms; }
                        .welcome h1 *:nth-child(2) { animation-delay:  600ms; }
                        .welcome h1 *:nth-child(3) { animation-delay:  900ms; }
                        .welcome h1 *:nth-child(4) { animation-delay: 1200ms; }
                        .welcome h1 *:nth-child(5) { animation-delay: 1500ms; }

                            @keyframes lightShow {
                                0%  { opacity: 1.0;  }
                                50% { opacity: 0.25; }
                            }

                    .welcome h2 {
                    }

                    .welcome p {
                    }

                    .welcome .hero {
                    }

                        .welcome .hero img {
                        }

                    .landing .welcome .logo {
                        top: calc( var( --sectionGapTop    )
                                 + var( --indentByVertical ) );
                    }

                    .landing .welcome .logo::before {
                        top: calc( -0.1 * ( var( --sectionGapTop      )
                                          + var( --indentByHorizontal ) ) );
                    }

                        .welcome .logo img {
                        }

                /**
                 * ---------------------------------------------------------
                 *
                 * The WHY section if you need to redesign it only.
                 *
                 * ---------------------------------------------------------
                 */

                .why {
                }

                    .why h2 {
                    }

                    .why p {
                    }

                    .why .hero {
                    }

                        .why .hero img {
                        }

                    .why .logo {
                    }

                        .why .logo img {
                        }

                /**
                 * ---------------------------------------------------------
                 *
                 * The WHAT section if you need to redesign it only.
                 *
                 * ---------------------------------------------------------
                 */

                .what {
                }

                    .what h2 {
                    }

                    .what p {
                    }

                    .what .hero {
                    }

                        .what .hero img {
                        }

                    .what .logo {
                    }

                        .what .logo img {
                        }

                    .what details {
                    }

                        .what summary {
                        }

                        .what table {
                        }

                            .what thead {
                            }

                                .what tr {
                                }

                                    .what th {
                                    }

                            .what tbody {
                            }

                                    .what td {
                                    }

                /**
                 * ---------------------------------------------------------
                 *
                 * The DEMOSITE section if you need to redesign it only.
                 *
                 * ---------------------------------------------------------
                 */

                .demo {
                }

                    .demo h2 {
                    }

                    .demo p {
                    }

                    .demo .hero {
                    }

                        .demo .hero img {
                        }

                    .demo .btn {
                    }

                /**
                 * ---------------------------------------------------------
                 *
                 * The ERROR 404 section if you need to redesign it only.
                 *
                 * ---------------------------------------------------------
                 */

                .error-404 {
                }

                    .error-404 .logo {
                    }

                        .error-404 .logo img {
                        }

                    .error-404 h1 {
                    }

                    .error-404 p {
                    }

                    .error-404 .btn {
                    }

                /**
                 * ---------------------------------------------------------
                 *
                 * Page footer.
                 *
                 * ---------------------------------------------------------
                 */

                .footer {
                    background:  var( --footerBackground );
                    display:     block;
                    font-size:   80%;
                    margin:      0
                                 var( --indentByHorizontal );
                    padding:     var( --indentByVertical   )
                                 var( --indentByHorizontal );
                    text-align:  center;
                }