:root
{
    --base-text: #006;
    --base-background: #FFF;
    --base-strong-text: #00B;

    --link-text: 4040F0;
    --link-text-visited: #606090;
    
    --header-text: #889;
    --header-subtext: #88C;
    --caption-text: #006;
    --caption-shadow: #DDF;
    
    --sourcecode-text: #5a544b;
    --sourcecode-background: #EEF;

    --breadcrumb-text: #66A;
    --breadcrumb-border: #DDF;
    --breadcrumb-background: #F8F8FF;
    --breadcrumb-link: #66F;
    --breadcrumb-separator: #99A;
    
    --subcaption-text: #006;
    --subcaption-background: #FFF;
    --subcaption-text-shadow: #FFF;
    --subcaption-box-shadow: #008;
    
    --console-text: #555;
    --console-background: #EEE;    
    --console-warning-text: rgb(31, 21, 9);
    --console-warning-background: #F8EFC9;
    --console-error-text: #E03000;
    --console-error-background: #FFF0F0;
    
    --table-header-text: #FFF;
    --table-header-background: #C0C0F0;
    --table-border: #B3B3FF;
}

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

    :root
    {
        --base-text: #224;
        --base-background: #F0F0F0;
        --base-strong-text: #00B;

        --link-text: #2649Dd;
        --link-text-visited: #19448e;

        --header-text: #889;
        --header-subtext: #88C;
        --caption-text: #006;
        --caption-shadow: #DDF;

        --sourcecode-background: #CCC;

        --breadcrumb-text: #66A;
        --breadcrumb-border: #DDF;
        --breadcrumb-background: #E8E8E8;
        --breadcrumb-link: #66F;
        --breadcrumb-separator: #99A;

        --subcaption-text: #224;
        --subcaption-background: #F0F0F0;
        --subcaption-text-shadow: #FFF;
        --subcaption-box-shadow: #004;

        --console-text: #555;
        --console-background: #DDD;    
        --console-warning-text: #bf794e;
        --console-warning-background: #fddea5;
        --console-error-text: #a22041;
        --console-error-background: #f6bfbc;

        --table-header-text: #FFF;
        --table-header-background: #a6a5c4;
        --table-border: #a6a5c4;
    }
    
    body > article img
    {
        filter: grayscale(30%);
    }
}

body > article
{
	color: var(--base-text);
    background: var(--base-background);
}

body > article a
{
    color: var(--link-text);
}

body > article a:visited
{
    color: var(--link-text-visited);
}

body > article > header
{
	color: var(--header-text);
}

body > article > header h1
{
	color: var(--caption-text);
	text-shadow: 1pt 1pt 1pt var(--caption-shadow);
}

body > article > section > h1
{
	text-shadow: 1pt 1pt 1pt var(--caption-shadow);
/*	border-bottom-color: #8080B0; */
}

body > article > section > h2
{	
	/* text-shadow: 1pt 1pt 1pt var(--subcaption-text-shadow); */
    /* box-shadow: 1pt 1pt 3pt var(--subcaption-box-shadow); */
    border: thin var(--subcaption-box-shadow) solid;
	color: var(--subcaption-text);
    background-color: var(--subcaption-background);
}

body > article > header > hgroup h2
{
	color: var(--header-subtext);
/*	text-shadow: 1pt 1pt 1pt #AAF; */
}

body > article > header b
{
	color: var(--base-strong-text);
}

body > article pre.ezclip-source-code, div.eznet-station div.contents blockquote.script, div.eznet-station div.contents div.script
{
    color: var(--sourcecode-text);
	background-color: var(--sourcecode-background);
}

body > article pre.console
{
	color: var(--console-text);
	background-color: var(--console-background);
}

body > article > section time, body > article > header time
{
	color: var(--subcaption-text);
}

body > article > section table > thead > tr > th
{
	color: var(--table-header-text);
	background-color: var(--table-header-background);
}

body > article > section table > thead > tr > th
{
    border-color: var(--base-background) !important;
}

body > article > section table > tbody > tr > td, body > article > section table > tbody > tr > th
{
	border-top-color: var(--table-border);
}

body > article > section table > tbody > tr:last-child > td, body > article > section table > tbody > tr:last-child > th
{
	border-bottom-color: var(--table-border);
}

nav ul.breadcrumb
{
	background-color: var(--breadcrumb-background);
	border-color: var(--breadcrumb-border);
	color: var(--breadcrumb-text);
	text-shadow: 1pt 1pt 1pt var(--caption-shadow);
}

nav ul.breadcrumb a
{
	color: var(--breadcrumb-link);
}

nav ul.breadcrumb li + li:before
{
	color: var(--breadcrumb-separator);
}

body > article div.output-error
{
	color: var(--console-error-text) !important;
	background-color: var(--console-error-background) !important;
}

body > article div.output-warning
{
	color: var(--console-warning-text) !important;
	background-color: var(--console-warning-background) !important;
}

