/* === COLOR === */
:root {
    --grey: #3a3a3a;
    --beige: #f9f0d2;
    --beige-dark: #b6b3a1;
    --green: #508d00;
    --green-dark: #3c5718;
    --orange: #dd360a;
    --orange-dark: #8e2105;
    --blue: #9de2f6;
    --red: #ff0000;
    --black: #000000;
    --white: #ffffff;
    --shadow-light: #00000008;
    --shadow-dark: #00000016;
    --overlay: #000000c0;
}
/* === GENERAL === */
* {
    color: var(--grey);
}
/*h1 {
    color: var(--red);
    text-shadow:
        -0.05em -0.05em 0px var(--black),
        -0.05em 0.05em 0px var(--black),
        0.05em -0.05em 0px var(--black),
        0.05em 0.05em 0px var(--black),
        -0.05em 0px 0px var(--black),
        0.05em 0px 0px var(--black),
        0px -0.05em 0px var(--black),
        0px 0.05em 0px var(--black);
}*/
/* === BODY === */
body {
    background-color: var(--blue);
    background-image: url(assets/skyline.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: bottom;
    background-attachment: fixed;
    /*backdrop-filter: greyscale(1);*/
}
@media screen and (orientation: portrait) and (max-device-width: 800px), screen and (orientation: landscape) and (max-device-height: 800px) {
    body {
        background-color: var(--green) !important;
    }
}
/*article, nav {
    box-shadow: 0 2px 32px #2262, 0 0 2px #2264;
}*/
/* === HEADER === */
header {
    background-color: var(--green);
}
header svg, header img {
    filter: invert();
}
header a, header h1, header h2 {
    color: var(--white);
}
/* === NAVBAR === */
nav {
    background-color: var(--green);
    /*outline: 1px solid var(--green-dark);
    border-left: 1px solid var(--green-dark);*/
}
nav p {
    color: var(--green-dark);
    border-color: var(--green-dark);
}
nav svg, nav img {
    filter: invert();
}
nav a {
    color: var(--white);
}
nav > a:hover {
    background-color: var(--green-dark);
}
/* === ARTICLE === */
article {
    background-color: var(--beige);
    /*outline: 1px solid var(--beige-dark);
    border-right: 1px solid var(--beige-dark);*/
}
a {
    color: var(--green);
}
a.broken {
    color: var(--orange);
}
h2, hr, ul.categories b {
    border-color: var(--beige-dark);
}
iframe {
    background-color: var(--shadow-dark);
    background-image: url(assets/buffering.gif);
    background-repeat: no-repeat;
    background-position: center;
}
/* === FIGURE === */
figure {
    background: var(--shadow-light) linear-gradient(var(--shadow-dark), var(--shadow-dark));
    border: 1px solid var(--beige-dark);
    box-shadow: -1.5em 0 0 var(--beige),
        -1.5em 0.75em 0 var(--beige),
        0 0.75em 0 var(--beige);
}
figure figcaption {
    background: var(--beige) linear-gradient(var(--shadow-light), var(--shadow-light));
    border-top: 1px solid var(--beige-dark);
}
/* === PROGRESS BAR === */
progress[value]::-webkit-progress-bar {
    background-color: var(--shadow-dark);
    box-shadow: 0 0.25em var(--shadow-dark) inset;
}
progress[value]::-webkit-progress-value {
    background-color: var(--orange);
}
/* === ARTICLE LINK === */
div.articles a img {
    border: 1px solid var(--beige-dark);
}
/* === TABLE === */
article > table tr {
    background-color: var(--shadow-light);
    border-bottom: 1px solid var(--beige-dark);
}
article > table tr:first-child {
    border-top: 1px solid var(--beige-dark);
}
article > table tr td.expandable:hover, article > table tr td.expanded:hover {
    background-color: var(--shadow-dark);
}
article > table th {
    background-color: var(--shadow-dark);
}
article > table tr th.sortable:hover, article > table tr th.sorted:hover {
    background-color: var(--beige-dark);
}
@media screen and (orientation: portrait) and (max-device-width: 800px), screen and (orientation: landscape) and (max-device-height: 800px) {
    article > table td:before {
        background-color: var(--shadow-dark);
    }
}
/* === ASIDE === */
aside {
    background: var(--beige);
    border: 1px solid var(--orange);
    box-shadow: -1.5em 0 0 var(--beige),
        -1.5em 0.75em 0 var(--beige),
        0 0.75em 0 var(--beige);
}
aside th:first-child:last-child {
    color: var(--white);
    background-color: var(--orange);
}
aside tr {
    border-top: 1px solid var(--orange);
    background-color: var(--shadow-light);
}
aside th:first-child:not(:last-child) {
    background-color: var(--shadow-dark);
}
/* === WARNING === */
article div.warning {
    background-color: var(--orange);
}
article div.warning * {
    color: var(--white);
}
/* === IMAGE VIEWER === */
dialog {
    background-color: var(--overlay);
}
dialog img:last-child {
    filter: invert() drop-shadow(0 0 8px var(--overlay));
}