/**** COLORS **********************************************************/

:root {
    --lightfore1: black;
    --darkfore1: white;
    
    --lightfore2: #444;
    --darkfore2: #ccc;
    
    --lightfore3: #666;
    --darkfore3: #aaa;
    
    --lightback1: white;
    --darkback1: black;
    
    --lightback2: #eee;
    --darkback2: #333;
    
    --lightback3: #ddd;
    --darkback3: #444;
    
    --lighthighlight: yellow;
    --darkhighlight: #480;
    
    --lighttagborder: #000080;
    --darktagborder: #0000FF;
    
    --lighttagfore1: #000040;
    --darktagfore1: #B0B0FF;
    
    --lighttagfore2: #444490;
    --darktagfore2: white;
    
    --lighttagback: #C0C0FF;
    --darktagback: #000080;
    
    --lightnontagfore: #888;
    --darknontagfore: #666;
    
    --lightnontagback: #DDD;
    --darknontagback: #222;
    
    --lightlinkfore1: #000080;
    --darklinkfore1: #B0B0FF;
    
    --lightlinkfore2: #6666e0;
    --darklinkfore2: white;
    
    --lightnowrap: #dadada;
    --darknowrap: #3a3a3a;
}
@media (prefers-color-scheme: light) {
    html, body, div#nav {
        color: var(--lightfore1);
        background-color: var(--lightback1);
    }
    div#content {
		a:link, a:visited {
			color: var(--lightlinkfore1);
		}
		a:hover {
			color: var(--lightlinkfore2);
		}
		span.tag {
			border-color: var(--lighttagborder);
			background-color: var(--lighttagback);
			a:link, a:visited {
				color: var(--lighttagfore1);
			}
			a:hover {
				color: var(--lighttagfore2);
			}
		}
		span.nontag {
			border-color: var(--lighttagborder);
			background-color: var(--lightnontagback);
			color: var(--lightnontagfore);
		}
		span.nobreak {
			background-color: var(--lightnowrap);
		}
		h1, span.datehead {
			color: var(--lightback1);
			background-color: var(--lightfore1);
			border-color: var(--lightfore1);
		}
		h2 {
			color: var(--lightback2);
			background-color: var(--lightfore2);
		}
		h3 {
			color: var(--lightback3);
			background-color: var(--lightfore3);
			a:link, a:visited {
				color: var(--darktagfore1);
			}
			a:hover {
				color: var(--darktagfore2);
			}
		}
		h4 {
			border-color: var(--lightfore3);
		}
		:target {
			background-color: var(--lighthighlight);
		}
		h1:target {
			color: var(--lighthighlight);
			background-color: var(--lightfore1);
		}
		h2:target {
			color: var(--lighthighlight);
			background-color: var(--lightfore2);
		}
		h3:target {
			color: var(--lighthighlight);
			background-color: var(--lightfore3);
		}
	}
}
@media (prefers-color-scheme: dark) {
    html, body, div#nav {
        color: var(--darkfore1);
        background-color: var(--darkback1);
    }
    div#content {
		a:link, a:visited {
			color: var(--darktagfore1);
		}
		a:hover {
			color: var(--darktagfore2);
		}
		span.tag {
			border-color: var(--darktagborder);
			background-color: var(--darktagback);
			a:link, a:visited {
				color: var(--darktagfore1);
			}
			a:hover {
				color: var(--darktagfore2);
			}
		}
		span.nontag {
			border-color: var(--darktagborder);
			background-color: var(--darknontagback);
			color: var(--darknontagfore);
		}
		span.nobreak {
			background-color: var(--darknowrap);
		}
		h1, span.datehead {
			color: var(--darkback1);
			background-color: var(--darkfore1);
			border-color: var(--darkfore1);
		}
		h2 {
			color: var(--darkback2);
			background-color: var(--darkfore2);
		}
		h3 {
			color: var(--darkback3);
			background-color: var(--darkfore3);
			a:link, a:visited {
				color: var(--lighttagfore1);
			}
			a:hover {
				color: var(--lighttagfore2);
			}
		}
		h4 {
			border-color: var(--darkfore3);
		}
		:target {
			background-color: var(--darkhighlight);
		}
		h1:target {
			color: var(--darkhighdark);
			background-color: var(--darkfore1);
		}
		h2:target {
			color: var(--darkhighdark);
			background-color: var(--darkfore2);
		}
		h3:target {
			color: var(--darkhighdark);
			background-color: var(--darkfore3);
		}
	}
}