:root {
	color-scheme: light dark;
	--body-bg-color: light-dark(white, #240715);
	--card-body-bg-color: light-dark(lightgray, #111);
	--card-header-bg-color: light-dark(lightgray, #222);
	--text-color: light-dark(black, white);
}

body {
	background-color: var(--body-bg-color);
	color: var(--text-color);
}

nav {
	color: var(--text-color);
	background-color: var(--body-bg-color);
}

	nav a {
		color: var(--text-color) !important;
	}

	nav [type=button] {
		background-color: var(--card-body-bg-color);
		color: var(--text-color);
	}

		nav [type=button]:active,
		nav [type=button].active,
		nav [role=button]:active,
		nav [role=button].active {
			background-color: rgb(from var(--card-body-bg-color) calc(r*2) calc(g*2) calc(b*2));
		}

.card {
	background-color: var(--card-body-bg-color);
	color: var(--text-color);
}

	.card * {
		color: var(--text-color);
	}

	.card div[role=button]:hover {
		background-color: rgb(from var(--card-body-bg-color) calc(r*1.33) calc(g*1.33) calc(b*1.33));
		color: inherit;
	}

.card-header {
	background-color: var(--card-header-bg-color);
	color: var(--text-color);
}

.card div[role=button]:active,
.card div[role=button][aria-expanded=true] {
	background-color: rgb(from var(--card-body-bg-color) calc(r*2) calc(g*2) calc(b*2));
	color: var(--text-color);
}

.form-control,
.form-control:focus,
.form-control:active {
	background-color: var(--card-header-bg-color);
	color: var(--text-color);
}