.ShowInLightMode { display: inherit !important; }
.ShowInDarkMode { display: none !important; }

/* Colours for light theme (default) */

svg { fill: black; }

:root {
	--circleaction: #40c1bb;
	--circleradio: #40c1bb;
	--circleswitch: #887566;
	--circleprogress: #ffc03f;

	--darken: 0.1;

	--icon1: #30327f;
	--icon2: white;
	--link: black;
	--controlstroke: white;
	--controlfill: #303030;

	--map1: white;
	--stroke: black;
}

html { background-color: #383838; }
html, html * { color: black; }
div.Viewport { background-color: #f0f0f0; }
div.Body.Alternate { background-color: white; }
div.Body h2 { color: #303030; }
h2.CallToAction, p.CallToAction { color: #606060; }
div.Panel { background-color: white; }
h3 { font-weight: 600; }
h3 em { font-weight: 400; }
h3 a, p a, th a, td a { opacity: 0.5; }
p a.Ext { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path style="fill:none;stroke:%23383838;stroke-linecap:round;stroke-width:2;" d="M2,14a6,6,0,0,1,6,-6h6l-3,-3m0,6l3,-3"/></svg>'); }
div.ControlPanel p a.Ext { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path style="fill:none;stroke:%23ffffff;stroke-linecap:round;stroke-width:2;" d="M2,14a6,6,0,0,1,6,-6h6l-3,-3m0,6l3,-3"/></svg>'); }

div.Panel h2 { font-weight: 700; }

table.Circle tr:first-of-type th { border-bottom: 1px solid black; border-left: none; }
table.Circle tr:nth-of-type(2) td:nth-of-type(n+3) { border-right: 1px solid black; }
table.Circle tr:nth-of-type(n+3) td:nth-of-type(2) { border-bottom: 1px solid black; }
table.Circle tr td:nth-of-type(2) { border-left: 1px solid black; }

span.Highlight { background-color: var(--circlecyan); color: white; }
div.Title * { color: white; }
div.Title p.Buttons a { color: black; }
div.Title p.Buttons a.Switchable { border-color: var(--circlecyan); background-color: white; }
div.Title p.Buttons a.Switchable.Switched { background-color: var(--circlecyan); color: white; }
div.Title p.Buttons a.Checkable { border-color: var(--circlecyan); background-color: white; }
div.Title p.Buttons a.Checkable.Checked { background-color: var(--circlecyan); color: white; }

div.Feature { box-shadow: 0 0 24px #808080; }
div.Feature.Dark { box-shadow: 0 0 24px #383838; }
div.Feature h1 { color: black; }
div.Showcase > div > h2 { color: black; }

.ControlBar, .ControlPanel { background-color: #303030; }
.ControlBar p { color: #e0e0e0; }
.ControlBar p a { opacity: 0.75; }
@media (hover:none) {
	div.ControlMenu > input[type=radio]:checked ~ div.ControlSection > p { --controlfill: white; }
}
@media (hover:hover) {
	div.ControlMenu div.ControlSection:hover > p { --controlfill: white; }
	a div.Panel:hover > h2.CallToAction { color: black; }
	a div.Panel:hover > p.CallToAction { color: black; }
}

svg.NavigationLogo { stroke: #30327f; fill: black; }
div.NavigationEdge > div > svg { fill: white; }
div.NavigationPanel li.NavigationPin a { color: #808080; }

p.CallToAction { font-weight: 700; }

.FooterBackground { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path style="stroke:none;fill:%23383838;" d="M-1,1a360,360,0,0,1,102,8V201H-1Z"/></svg>'); }
div.Footer * { color: #c0c0c0; }
div.Footer a *, div.Footer h2 { color: white; }

span.code, table.code tr td { background-color: #f8f8f8; color: black; }
table.code th, table.code th a { background-color: #e0e0e0; color: #808080; }
table.code.file tr th a { color: black; }
table.code tr td:nth-last-child(2) { background-color: #f0f0f0; color: #a0a0a0; }

.comment { color: #808080; }
.string { color: var(--red); }
.escape { color: var(--darkmagenta); }
.preprocessor {color: var(--circlecyan); }
.statement { color: var(--circleblue); font-weight: 700; }
.type { color: var(--circleblue); }
.constant { color: var(--circlebrown); }
.variable { color: #202020; }
.function { color: var(--circlebrown); font-weight: 700; }
.macro { color: var(--circlebrown); }
.number { color: var(--darkmagenta); }


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

	.ShowInLightMode { display: none !important; }
	.ShowInDarkMode { display: inherit !important; }
	
	/* Colours for dark theme as override */
	
	svg { fill: white; }
	
	:root {
		--circleaction: #40c1bb;
		--circleradio: #40c1bb;
		--circleswitch: #887566;
		--circleprogress: #ffc03f;
	
		--darken: 0.5;
	
		--icon1: #e0e0e0;
		--icon2: black;
		--link: white;
		--controlstroke: white;
		--controlfill: black;
	
		--map1: #606060;
		--stroke: white;
	}
	
	html { background-color: black; }
	html, html * { color: #c0c0c0; }
	div.Viewport { background-color: #202020; }
	div.Body.Alternate { background-color: black; }
	div.Body h2 { color: #e0e0e0; }
	h2.CallToAction, p.CallToAction { color: #e0e0e0; }
	div.Panel { background-color: #383838; }
	h3 { font-weight: 400; }
	h3 em { font-weight: 400; }
	h3 a, p a, th a, td a { opacity: 0.75; }
	p a.Ext { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path style="fill:none;stroke:%23ffffff;stroke-linecap:round;stroke-width:2;" d="M2,14a6,6,0,0,1,6,-6h6l-3,-3m0,6l3,-3"/></svg>'); }
	
	div.Panel h2 { font-weight: 500; }
	
	table.Circle tr:first-of-type th { border-bottom: 1px solid #e0e0e0; border-left: none; }
	table.Circle tr:nth-of-type(2) td:nth-of-type(n+3) { border-right: 1px solid #e0e0e0; }
	table.Circle tr:nth-of-type(n+3) td:nth-of-type(2) { border-bottom: 1px solid #e0e0e0; }
	table.Circle tr td:nth-of-type(2) { border-left: 1px solid #e0e0e0; }
	
	span.Highlight { background-color: var(--circlebrown); color: white; }
	div.Title * { color: white; }
	div.Title p.Buttons a { color: #e0e0e0; }
	div.Title p.Buttons a.Switchable { border-color: var(--circlecyan); background-color: #383838; }
	div.Title p.Buttons a.Switchable.Switched { background-color: var(--circlecyan); color: white; }
	div.Title p.Buttons a.Checkable { border-color: var(--circlecyan); background-color: white; }
	div.Title p.Buttons a.Checkable.Checked { background-color: var(--circlecyan); color: white; }
	
	div.Feature { box-shadow: 0 0 24px #c0c0c0; }
	div.Feature.Dark { box-shadow: 0 0 24px #606060; }
	div.Feature > div.BackgroundImage > img { opacity: 0.75; }
	div.Feature h1 { color: black; }
	div.Feature p.Caption { color: white; }
	div.Showcase > div > h2 { color: #e0e0e0; }
	
	.ControlBar, .ControlPanel { background-color: black; }
	.ControlBar p { color: #a0a0a0; }
	.ControlBar p a { opacity: 0.75; }
	@media (hover:none) {
		div.ControlMenu > input[type=radio]:checked ~ div.ControlSection > p { --controlfill: white; }
	}
	@media (hover:hover) {
		div.ControlMenu div.ControlSection:hover > p { --controlfill: white; }
		a.NavigationLogo:hover { opacity: 1; }
		a div.Panel:hover > h2.CallToAction { color: white; }
		a div.Panel:hover > p.CallToAction { color: white; }
	}
	
	svg.NavigationLogo { stroke: white; fill: white; }
	div.NavigationEdge > div > svg { fill: #303030; }
	div.NavigationPanel li.NavigationPin a { color: #c0c0c0; }
	.Navigation a { color: white; }
	@media (hover:hover) {
		a.NavigationLogo:hover svg { opacity: 1; }
		div.Navigation a:hover { color: white; }
	}
	
	p.CallToAction { font-weight: 500; }
	
	.FooterBackground { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path style="stroke:none;fill:black;" d="M-1,1a360,360,0,0,1,102,8V201H-1Z"/></svg>'); }
	div.Footer * { color: #a0a0a0; }
	div.Footer a *, div.Footer h2 { color: #e0e0e0; }
	
	span.code, table.code tr td { background-color: #282828; color: #e0e0e0; }
	table.code th, table.code th a { background-color: #202020; color: #808080; }
	table.code.file tr th a { color: white; }
	table.code tr td:nth-last-child(2) { background-color: #303030; color: #606060; }
	
	.comment { color: #808080; }
	.string { color: #ff8080; }
	.escape { color: var(--brightmagenta); }
	.preprocessor {color: var(--circlecyan); }
	.statement { color: var(--brightblue); font-weight: 700; }
	.type { color: var(--brightblue); }
	.constant { color: var(--brightbrown); }
	.variable { color: #c0c0c0; }
	.function { color: var(--brightbrown); font-weight: 700; }
	.macro { color: var(--brightbrown); }
	.number { color: var(--brightmagenta); }
}