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

    :root {
        --htmlBackground:      silver;

        --bodyBackground:      white;
        --bodyColor:           black;
        --bodyBorderRadius:    1rem;
        --bodyPadding:         calc( var( --bodyBorderRadius ) * 1.5 );

        --bottleneckRadius:          var( --bodyBorderRadius );
        --bottleneckMargin:    calc( var( --bodyBorderRadius ) * 2 );
        --bottleneckPadding:   var( --bodyPadding );

        --detailsBackground:   var( --bodyColor );
        --detailsColor:        var( --bodyBackground );
        --detailsBorderRadius: calc( var( --bodyBorderRadius ) / 2 );
        --detailsPadding:            var( --bodyBorderRadius );
        --detailsFontSize:     80%;

        --figureColor:         var( --htmlBackground );
        --figureBorderRadius:  var( --detailsBorderRadius );

        --anchorColor:         dodgerblue;
        --anchorHoverColor:    red;
    }

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

    html {
        background: var( --htmlBackground );
        color: var( --bodyColor );
        font-family: monospace;
        font-size: max( 16px, calc( 100vw / 60 ) );
        font-style: normal;
        font-weight: normal;
        padding: 1rem;
    }

        body {
            background: var( --bodyBackground );
            border-radius: var( --bodyBorderRadius );
            line-height: 1.5;
            padding: var( --bodyPadding );
            max-width: 75vw;
            overflow-x: hidden;
        }
        body.home         { }
        body.list         { }
        body.list.persons { }
        body.list.cars    { }
        body.error        { }
        @media (max-width: 768px) {
            body {
                max-width: 100%;
            }
        }

            h1 {
                font-size: 199%;
                margin-bottom: 1rem;
            }

            h2 {
                font-size: 166%;
                margin-bottom: 1rem;
            }

            h3 {
                font-size: 133%;
                margin: 1.5rem auto 1rem;
            }

            h4 {
                font-size: 125%;
                margin-bottom: 0.5rem;
            }

            h5,
            h6 {
                font-size: 115%;
                font-weight: bold;
                margin-bottom: 0.5rem;
            }

            blockquote,
            .notify {
                background: darkgray;
                color: var( --bodyColor );
                border-radius: 0.25rem;
                display: block;
                margin-bottom: 1rem;
                padding: 0.75rem;
            }
            .notify {
                width: 50%;
                text-align: center;
            }

                p {
                    font-size: 100%;
                    margin-bottom: 1rem;
                }

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

                ol > li::marker {
                }

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

                ul > li::marker {
                }

            figure {
                color: var( --figureColor );
                margin-bottom: 1rem;
                text-align: center;
            }
            figure.image { }

                figure img,
                figure svg {
                    border-radius: var( --figureBorderRadius );
                    display: block;
                }

                figcaption {
                    margin-top: 0.5rem;
                    font-size: 80%;
                    text-align: center;
                }

                    figcaption a {
                        color: inherit;
                    }

            details {
                margin-bottom: 1rem;
            }

                summary {
                    color: var( --anchorColor );
                    cursor: pointer;
                }
                details[open] > summary {
                    margin-bottom: 1rem;
                }

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

                details > div {
                    background:    var( --detailsBackground   );
                    border-radius: var( --detailsBorderRadius );
                    color:         var( --detailsColor        );
                    font-size:     var( --detailsFontSize     );
                    padding:       var( --detailsPadding      );
                }

            *:last-child {
                margin-bottom: 0;
            }
            * + br:last-child {
                display: none;
            }

                a {
                    color: var( --anchorColor );
                    cursor: pointer;
                    text-decoration: underline;
                    display: inline-block;
                    overflow: hidden;
                    vertical-align: bottom;
                }

                a:hover,
                a:active,
                a:focus {
                    color: var( --anchorHoverColor );
                }

                code {
                    background: lightgoldenrodyellow;
                    box-shadow: lightgoldenrodyellow 0 0 0 0.125rem;
                    color: brown;
                    border-radius: 0.125rem;
                    display: inline-block;
                    padding: 0 0.25rem;
                    overflow: hidden;
                    vertical-align: bottom;
                }

            .bottleneck {
                margin-left:   var( --bottleneckMargin  );
                margin-right:  var( --bottleneckMargin  );
                padding-left:  var( --bottleneckPadding );
                padding-right: var( --bottleneckPadding );
            }
            .bottleneck::before,
            .bottleneck::after {
                background: var( --htmlBackground );
                border-radius: var( --bottleneckRadius );
                content: "";
                display: block;
                width: calc( var( --bodyBorderRadius ) + var( --bottleneckMargin ) + var( --bodyPadding ) );
                height: 100%;
                position: absolute;
                top: 0;
            }
            .bottleneck::before {
                right: 100%;
            }
            .bottleneck::after {
                left: 100%;
            }
            .bottleneck + * {
                margin-top: 0;
                padding-top: var( --bodyPadding );
            }
                .bottleneck + * > *:first-child {
                    margin-top: 0;
                }
            .bottleneck + *::before {
                border-radius: var( --bottleneckRadius ) var( --bottleneckRadius ) 0 0;
                box-shadow: var( --htmlBackground )            var( --bottleneckRadius )   0 0,
                            var( --htmlBackground ) calc( -1 * var( --bottleneckRadius ) ) 0 0;
                content: "";
                display: block;
                width: calc( 100% + var( --bodyPadding ) * 2 );
                height: var( --bottleneckRadius );
                position: absolute;
                top: 0;
                left: calc( -1 * var( --bodyPadding ) );
            }
            *:has( + .bottleneck ) {
                margin-bottom: 0;
                padding-bottom: var( --bodyPadding );
            }
            *:has( + .bottleneck )::after {
                border-radius: 0 0 var( --bottleneckRadius ) var( --bottleneckRadius );
                box-shadow: var( --htmlBackground )            var( --bottleneckRadius )   0 0,
                            var( --htmlBackground ) calc( -1 * var( --bottleneckRadius ) ) 0 0;
                content: "";
                display: block;
                width: calc( 100% + var( --bodyPadding ) * 2 );
                height: var( --bottleneckRadius );
                position: absolute;
                bottom: 0;
                left: calc( -1 * var( --bodyPadding ) );
            }

            .card {
                background: #eee;
                border-radius: 0.25rem;
                display: block;
                margin-bottom: 1.5rem;
                padding: 0.75rem;
            }
            .card[data-number] {
                margin-left: 3.75rem;
            }
            .card[data-number]::before {
                border: var( --htmlBackground ) 1px solid;
                color: var( --htmlBackground );
                content: attr( data-number );
                border-radius: 50%;
                width: 3rem;
                height: 3rem;
                font-style: italic;
                line-height: 3rem;
                text-align: center;
                display: block;
                position: absolute;
                top: 0.25rem;
                left: -3.75rem;
            }
            .card::after {
                content: "";
                clear: both;
                display: block;
                width: 100%;
                height: 1px;
            }

                .card h4 {
                    border-bottom: var( --htmlBackground ) 1px solid;
                    padding-bottom: 0.25rem;
                }

                .list.cars .card ol {
                    box-shadow: var( --htmlBackground ) -1px 0 0;
                    font-size: 0.75rem;
                    float: right;
                    width: 50%;
                }

                    .list.cars .card ol li::marker {
                        color: var( --htmlBackground );
                        font-style: italic;
                    }

                .list.cars .card div {
                    box-shadow: var( --htmlBackground ) -1px 0 0 inset;
                    float: left;
                    width: 50%;
                    padding-right: 0.75rem;
                }

                    .card b {
                        display: block;
                        font-size: 0.75rem;
                        font-weight: bold;
                    }

                    h2 i,
                    .card i {
                        color: var( --htmlBackground );
                        display: block;
                        font-size: 0.75rem;
                        font-style: italic;
                    }

                    .card p {
                        margin-top: 0.5rem;
                    }

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

                .pagination a {
                    background: var( --anchorColor );
                    border-radius: 0.125rem;
                    color: var( --bodyBackground );
                    display: inline-block;
                    margin: 0.25rem;
                    padding: 0 0.5rem;
                    text-decoration: none;
                }
                .pagination a[data-current] {
                    background: var( --htmlBackground ) !important;
                    cursor: default;
                    pointer-events: none;
                }

                .pagination a:hover,
                .pagination a:active,
                .pagination a:focus {
                    background: var( --anchorHoverColor );
                }
                .pagination a[data-current]:focus {
                    background: grey !important;
                }

            footer {
                font-size: 0.66rem;
                text-align: center;
                text-decoration: none;
            }

                footer a {
                    color: var( --htmlBackground );
                    text-decoration: none;
                }