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