.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); }