@charset "UTF-8";
/*
|--------------------------------------------------------------------------
| global: DEBUG CSS: background: rgb(182 216 250 / 0.06) !important;
|
| CSS Pro Tip
| https://github.com/AllThingsSmitty/css-protips
|--------------------------------------------------------------------------
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
}
html {
    overflow-x: hidden; /** no scrolling horizontal */
    overflow-y: scroll; /** avoid web site to jump when reload */
    -webkit-tap-highlight-color: transparent;
    text-size-adjust: none;
    cursor: default;
    font-family: system-ui,
        /* macOS 10.11-10.12 */ -apple-system,
        /* Windows 6+ */ "Segoe UI",
        /* Android 4+ */ "Roboto",
        /* Ubuntu 10.10+ */ "Ubuntu",
        /* Gnome 3+ */ "Cantarell",
        /* KDE Plasma 5+ */ "Noto Sans",
        /* fallback */ sans-serif,
        /* macOS emoji */ "Apple Color Emoji",
        /* Windows emoji */ "Segoe UI Emoji",
        /* Windows emoji */ "Segoe UI Symbol",
        /* Linux emoji */ "Noto Color Emoji";
    font-size: 10px;
}
html:focus-within {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html,
body {
    height: 100%;
}
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    text-rendering: optimizeSpeed;  /** optimizeLegibility gives performance issues!  **/
    background-color: #ffffff;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
}
body > header,
footer {
    flex: none;
}

main {
    /*   flex: 1 1 auto; */
    flex-grow: 1; /* equla to: height: calc(100vh - 100px); */
    display: flex;
    flex-direction: row;
    /*
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;

     */
    padding-bottom: 30px;


}

footer {
    border-top: 1px solid #e5e5e5;
    margin-top: 1rem;
    min-height: 200px;
    background: #f8f8f8 repeat center top url('../img/back.jpg');
    color: #6b6b6b;
}

footer > .container {
    text-align: center;
}

.footer-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    padding-block: 2rem;
}
hr {
    border: 0;
    border-top: 0.1rem solid var(--cl-border);
    margin: 2.0rem 0;
}



/** https://philipwalton.github.io/solved-by-flexbox/demos/media-object/ */
.media {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 400px;
    margin-bottom: 0.5rem;
}

.media-figure {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-right: 0.5rem;
}
.media-figure img  {
    /*
    border-radius: 50%;
    border: 6px solid #eeeeee;
    background-color: #eeeeee;

     */
}
.media-figure img:hover  {
    /*
    border: 6px solid #e5e5e5;

     */
}
.media-body {
    flex: 1;
    text-align: left;
}

/*
.media {
    display: grid;
    grid-template-columns: 1fr 3fr;
    padding-block: 0.3rem;
}
.media .content {
}
*/
/*
article {
    column-gap: 40px;
    column-rule: 1px solid #e5e5e5;
    column-fill: balance;

    columns: 2 350px;

    border: 0 solid orange;
}
article:last-child {
    padding-bottom: 4rem;
}
*/
/*
article {

    break-inside: avoid-column;
    column-width: auto;
    gap: 20px;
    column-rule-width: 1px;

}
article > * {
    break-inside: avoid;
}
@media only screen and (min-width: 40em) {
    article {
        column-count: 2;
        column-gap: 4em;
    }
}
@media only screen and (min-width: 60em) {
    article {
        column-count: 3;
        column-gap: 6em;
    }
}
article > * + * {
    margin-top: 1.25em;
}

.span-all {
    column-span: all;
    padding-top: 5rem;
}
article p:last-child {
    column-span: all;
}

*/


/*
main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
}
main section {
    flex-basis: 22em;
    flex-grow: 1;
    padding: var(--metric-box-spacing);
    background-color: var(--color-off-white);
    border-radius: var(--metric-radius);
    box-shadow: var(--generic-shadow);
}
@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}
*/
/*
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--gap);
    border: 0 solid lightpink;
}
@media only screen and (min-width: 48em) {
    .content {
        flex-direction: row;
    }
}
@media (min-width: 75em) {
    .content {
        flex-direction: row;
    }
}
*/


/*

article {
    display: flow-root;
    flex: 1 1 100%;
}
 */
/*
article {

    break-inside: avoid-column;
    column-width: auto;
    gap: 20px;
    column-rule-width: 1px;

}
article > * {
    break-inside: avoid;
}
@media only screen and (min-width: 40em) {
    article {
        column-count: 2;
        column-gap: 4em;
    }
}
@media only screen and (min-width: 60em) {
    article {
        column-count: 3;
        column-gap: 6em;
    }
}
article > * + * {
    margin-top: 1.25em;
}

.span-all {
    column-span: all;
    padding-top: 5rem;
}
article p:last-child {
    column-span: all;
}

*/