/* * {
        border: black 1px solid;
    } */

    /* #fff59e #f2ad78 #c3a55c #c0b490 */

    /* #B1A18A #C5BEAC #E6D9C8 #D5BAA5 #C1AAA2 */

    /* #f3f1f2 #26262c #266886 #ebe9ea #eceaeb */

    :root {
        /* --headercolor: #B1A18A; */
        /* --headercolor: #cdbaa1; */
        --headercolor: oklch(84% 0.022 95);
        --bodybackgroundcolor: #FCFCFC;

        --textcolor: #2c2d29;

        --navacolor: #2c2d29;
        --navahovercolor: #2c2d2957;
        --navafocuscolor: #2c2d2957;
        --navaactivecolor: #667f88;
        --navavisitedcolor: ;

        /* --navmenubackgroundcolor: #cdbaa1; */
        --navmenubackgroundcolor: oklch(85% 0.022 80 / 0.95);
        --navmenubordercolor: grey;

        --acolor: ;
        --ahovercolor: ;
        --afocuscolor: ;
        --aactivecolor: ;
        --avisitedcolor: ;

        /* --gridbackgroundcolor: #fff4e6; */
        --gridbackgroundcolor: oklch(97% 0.022 74);
        /* --griddivbackgroundcolor: #E6D9C8; */
        --griddivbackgroundcolor: oklch(90% 0.022 74);
        /* --nesteddivbackgroundcolor: #C5BEAC; */
        --nesteddivbackgroundcolor: oklch(85% 0.022 80);
        --nesteddivhovercolor: ;
    }

    @media (prefers-color-scheme: dark) {

        :root {
        --headercolor: oklch(22% 0.01 285);
        --bodybackgroundcolor: oklch(23% 0.009 285);

        --textcolor: oklch(70% 0.01 285);

        --navacolor: oklch(60% 0.01 285);
        --navahovercolor: #2c2d2957;
        --navafocuscolor: #2c2d2957;
        --navaactivecolor: #667f88;
        --navavisitedcolor: ;

        --navmenubackgroundcolor: oklch(19% 0.01 285 / 0.95);
        --navmenubordercolor: oklch(25% 0.01 285);

        --acolor: ;
        --ahovercolor: ;
        --afocuscolor: ;
        --aactivecolor: ;
        --avisitedcolor: ;

        /* --gridbackgroundcolor: oklch(23% 0.01 285); */
        --gridbackgroundcolor: oklch(23% 0.009 285);
        --griddivbackgroundcolor: oklch(22% 0.01 285);
        --nesteddivbackgroundcolor: oklch(19% 0.01 285);
        --nesteddivhovercolor: ;
        }

        img {
            filter: brightness(0.8);
        }
    }

    /* :root {
        --headercolor: #f9c17c;
        --bodybackgroundcolor: #FCFCFC;

        --textcolor: ;

        --navacolor: black;
        --navahovercolor: white;
        --navafocuscolor: white;
        --navaactivecolor: rgb(88, 192, 251);
        --navavisitedcolor: ;

        --navmenubackgroundcolor: rgb(148, 225, 255);

        --acolor: ;
        --ahovercolor: ;
        --afocuscolor: ;
        --aactivecolor: ;
        --avisitedcolor: ;

        --gridbackgroundcolor: #fff4e6;
        --griddivbackgroundcolor: #ffd8a8;
        --nesteddivbackgroundcolor: #f9c17c;
        --nesteddivhovercolor: ;
    } */

    *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    img { /* all-purpose reset */
        max-width: 100%;
        height: auto;
        vertical-align: middle;
        font-style: italic;
        background-repeat: no-repeat;
        background-size: cover;
    }