/* adaptive colour-only stylesheet */
@media (prefers-color-scheme: dark) {

    /* This is the same as the 'Green' stylesheet */
    a {
        color: greenyellow;
    }

    body {
        color: rgb(0, 191, 0);
        background-color: black;
    }

    select {
        background: rgba(0, 64, 0, 0.75);
        color: lime;
    }

    #nav {
        background: rgba(0, 64, 0, 0.75);
    }


    #nav ul li a {
        color: yellowgreen;
    }

    #nav ul li.active a {
        background: #0c0;
    }


    /* header for all pages. Within main-container */
    #header {
        background-color: darkgreen;
        color: yellowgreen;
    }

    #sharing-links, #prev-next, #post-tags {
        border-top: thin solid green;
    }

    /* about-cookies box: permanently visible part of cookies information box */
    #about-cookies {
        color: yellowgreen;
        background: rgba(0, 64, 0, 0.75);
    }

    /* more-about-cookies box, normally hidden */
    #more-about-cookies {
        color: yellowgreen;
        background: rgba(0, 64, 0, 0.75);
        border-bottom: thin solid yellowgreen;
    }

    /* footer of the page */
    #footer {
        color: yellowgreen;
        background: rgba(0, 64, 0, 0.75);
    }


    /* I suspect neither 'error' nor 'message' are relevant now I've moved to static compilation. */
    .error {
        background-color: red;
        color: yellowgreen;
    }

    .message {
        border: thin solid yellowgreen;
    }

    .widget {
        background-color: darkgreen;
        border: thin solid #0c0;
    }

    form {
        border: thin solid #0c0;
    }

    del {
        color: red;
    }

    input {
        background-color: yellowgreen;
    }

    input.action {
        background-color: green;
    }

    input.action-dangerous {
        color: yellowgreen;
        background-color: red;
    }

    input.required:after {
        color: red;
    }

    ins {
        color: green;
    }

    /* 
label {
    border-right: thin solid darkgreen;
} */

    table {
        border: 2px solid darkgreen;
    }

    tr:nth-child(odd) {
        background-color: darkgreen;
    }

    th,
    td {
        border: 1px solid darkgreen;
    }

    th {
        background-color: darkgreen;
        color: yellowgreen;
    }
}

@media (prefers-color-scheme: light) {
    /* this is the same as the 'paper' stylesheet */

    a {
        color: blue;
    }

    a.visited {
        color: darkslateblue;
    }

    body {
        color: black;
        background-color: white;
    }

    #nav {
        background: silver;
    }


    #nav ul li a {
        color: navy;
    }

    #nav ul li.active a {
        background: gray;
    }


    /* header for all pages. Within main-container */
    #header {
        background-color: silver;
        color: darkslategray;
    }

    /* about-cookies box: permanently visible part of cookies information box */
    #about-cookies {
        color: darkslategray;
        background: silver;
    }

    /* more-about-cookies box, normally hidden */
    #more-about-cookies {
        color: darkslategray;
        background: silver;
        border: thin solid darkslategray;
    }

    /* footer of the page */
    #footer {
        color: darkslategray;
        background: silver;
    }

    #sharing-links, #prev-next, #post-tags {
        border-top: thin solid green;
    }

    /* I suspect neither 'error' nor 'message' are relevant now I've moved to static compilation. */
    .error {
        background-color: red;
        color: darkslategray;
    }

    .message {
        border: thin solid darkslategray;
    }

    .widget {
        background-color: #aaa;
        border: thin solid silver;
    }

    form {
        border: thin solid silver;
    }

    del {
        color: red;
    }

    input {
        background-color: darkslategray;
        color: silver;
    }

    input.action {
        background-color: darkslategray;
        color: lime;
    }

    input.action-dangerous {
        color: darkslategray;
        background-color: red;
    }

    input.required:after {
        color: red;
    }

    ins {
        color: darkgreen;
    }

    /* 
label {
    border-right: thin solid darkslategray;
} */

    table {
        border: 2px solid darkslategray;
    }

    tr:nth-child(odd) {
        background-color: silver;
    }

    th,
    td {
        border: 1px solid darkslategray;
    }

    th {
        background-color: darkslategray;
        color: silver;
    }
}