:root {
    color-scheme: light dark;
    font-family: sans-serif;
    font-size: 1em;
}
a {
    color: inherit;
    text-decoration: inherit;
    @media (min-width: 30em) {
        &:hover, &:focus, &:active {
            text-decoration: underline;
        }
    }
}
body {
    background-attachment: fixed;
    background-color: var(--color-bg-body);
    /* in inline-svg
       # = %23
       ' = %27
       " = %22
       before newline = \
       prefix = data:image/svg+xml;utf-8,
    */
    /*
    background-image: url('data:image/svg+xml;utf-8,\
        <svg width="39" height="45" viewBox="0 0 156 180" xmlns="http://www.w3.org/2000/svg">\
            <polygon fill="%23e8e8e8" points="26,0 78,0 104,45 78,90 26,90 0,45" />\
            <polygon fill="%23d8d8d8" points="26,90 78,90 104,135 78,180 26,180 0,135" />\
            <polygon fill="%23d0d0d0" points="0,45 26,90 0,135" />\
            <polygon fill="%23d0d0d0" points="104,45 156,45 156,135 104,135 78,90" />\
        </svg>');
    */
    /* stroke='%23000000' stroke-width='4'/>\ */
    background-position: top left;
    background-repeat: no-repeat;
    color: var(--color-fg);
	display: grid;
	/*gap: var(--len-30);*/
    gap: .5lh;
    margin: 0;
    min-height: 100vh;
    padding: 0;
    @media (min-width: 30em) {
        grid-template-columns: min-content 1fr;
        grid-template-rows: auto 1fr min-content;
    }
    >* {
        /*border: 1px #f0f dashed;*/
        background: var(--color-bg);
        @media (min-width: 30em) {
            box-shadow: 0 0 var(--len-10) var(--color-box-shadow);
/*            padding: var(--len-30);*/
            padding: .5lh;
        }
    }
    >footer {
        grid-column: 1 / -1;
        /*min-height: var(--len-60);*/
        text-align: center;
    }
    >header {
        align-items: end;
        background-image: linear-gradient(in oklab to right, var(--color-header-gradient-start), var(--color-bg) var(--len-90));
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: min-content 1fr;
        gap: var(--len-40);
        >* {
            /*border: 1px dotted #0ff;*/
        }
        h1, hgroup p {
            margin: 0;
            text-shadow: 0 0 var(--len-30) var(--color-fg), var(--len-5) var(--len-5) var(--len-10) var(--color-bg);
        }
        img {
            height: var(--len-60);
            width: var(--len-60);
        }
    }
    >main {
        line-height: 1lh;
        >* {
            max-width: 75em;
            &:first-child {
                margin: 0;
                margin-block-end: .5lh;
            }
        }
        article>* {
            margin-block: .5lh;
            >* {
                margin: 0;
            }
            a:not(:has(img)) {
                color: var(--color-anchor);
                text-decoration: underline;
                &::before {
                    content: "🔗";
                    font-size: .8em;
                    vertical-align: center;
                }
            }
            dd {
                margin-left: 1lh;
            }
            img {
                box-shadow: 0 0 var(--len-10) var(--color-box-shadow);
                margin: .5lh;
                max-height: var(--len-80);
                max-width: var(--len-90);
            }
            ol, ul {
                padding-left: 1lh;
            }
            p {
                text-indent: 1lh;
            }
        }
    }
    >nav {
        h2, p, ul, li {
            margin: 0;
            padding: 0;
        }
        details {
            /* inner and outer nav */
            background-color: var(--color-bg);
            color: var(--color-fg-navigation);
            /*margin: var(--len-20) 0;*/
            margin: .5lh 0;
            min-width: var(--len-80);
        /* details[open] and details:not([open]) */
            &:first-of-type {
                margin-block-start: 0;
            }
            summary {
                font-weight: bold;
                font-size: 1.5em;
                /*margin-left: var(--len-20);*/
                /*margin-left: .5lh;*/
                @media (min-width: 30em) {
                    cursor: s-resize;
                    font-size: 1em;
                }
            }
            ul {
                list-style: none;
                li {
                    font-size: 1.5em;
                    @media (min-width: 30em) {
                        font-size: 1em;
                    }
                    /*margin: var(--len-20) 0;*/
                    margin-block: .5lh;
                    a {
                        background-color: var(--color-bg-navigation);
                        background-image: linear-gradient(to right, currentColor, transparent);
                        background-position: bottom left;
                        background-repeat: no-repeat;
                        background-size: 0 var(--len-5);
                        /*border: var(--len-5) solid var(--color-bg-navigation-current);*/
                        box-shadow: 0 0 0 var(--len-5) var(--color-bg-navigation-current);
                        display: block;
                        font-size: .9em;
                        font-weight: bold;
                        line-height: 1lh;
                        overflow: hidden;
                        /*padding: var(--len-20);*/
                        padding: .25lh .5lh;
                        text-decoration: none;
                        transition: all .25s ease-in;
                        white-space: nowrap;
                        @media (min-width: 30em) {
                            &:focus, &:hover, &:active {
                                background-size: 100% var(--len-5);
                                text-decoration: none;
                                /* box-shadow: 0 0 var(--len-10) inset, 0 0 var(--len-10); */
                            }
                        }
                        &[aria-current=page] {
                            background-color: var(--color-bg-navigation-current);
                            text-shadow: var(--len-10) var(--len-10) var(--len-10) var(--color-bg-navigation);
                        }
                    }
                }
            }
            +details {
                /* inner nav */
                color: var(--color-fg-navigation-secondary);
                ul li a {
                    background-color: var(--color-bg-navigation-secondary);
                    /*border: var(--len-5) solid var(--color-bg-navigation-current-secondary);*/
                    box-shadow: 0 0 0 var(--len-5) var(--color-bg-navigation-current-secondary);
                    &[aria-current=page] {
                        background-color: var(--color-bg-navigation-current-secondary);
                        text-shadow: var(--len-10) var(--len-10) var(--len-10) var(--color-bg-navigation-secondary);
                    }
                }
                summary {
                    &::marker {
                        /* not working in safari apple mobile */
                        /*
                        color: red;
                        content: "blub";
                        */
                    }
                }
            }
        }
        #skiplink {
            display: block;
            font-size: 1.5em;
            font-weight: bold;
            text-align: center;
            &::before {
                content: "↡";
            }
            @media (min-width: 30em) {
                /* visually hidden, but screenreader accesible */
                position: absolute !important;
                clip-path: inset(50%) !important;
                padding: 0 !important;
                border: 0 !important;
                height: 1px !important;
                width: 1px !important;
                overflow: hidden !important;
            }
        }
    }
}
em, strong {
    font-style: normal;
    font-weight: bold;
    padding-inline: var(--len-10);
}
h1, h2, h3, h4, h5, h6, th {
    font-variant: small-caps;
}
hr {
    border-style: solid;
    border-width: .15rem 0 0;
    border-image: linear-gradient( 90deg,
            #ea392f 0% 9.091%,
            #f28917 9.091% 18.182%,
            #eecb12 18.182% 27.273%,
            #78b82a 27.273% 36.364%,
            #4375ca 36.364% 45.455%,
            #c346e3 45.455% 54.545%,
            #7bcce5 54.545% 63.636%,
            #ffffff 63.636% 72.727%,
            #f4aec8 72.727% 81.818%,
            #000000 81.818% 90.909%,
            #945516 90.909% 100%
        ) 1;
    box-shadow: 0 0 .5em .03em var(--color-fg);
}
small {
    /*font-size: .75em;*/
    font-size: inherit;
    font-weight: lighter;
}
summary h2 {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
}