:root
{
	--Background-Color: #fdfdfd;
	--Color: #444;
	--Separator-Color: #b3b3b3;
	--Link-Color: #06c;
	--Link-Visited-Color: #0b0080;
	--Link-Active-Color: #faa700;
	--Link-Hover-Color: #800080;
	--ToggleSwitch-Transition: 0.1s;
}
@media screen and (prefers-color-scheme: dark)
{
	:root
	{
		--Background-Color: #121212;
		--Color: #ededed;
		--Separator-Color: #6a6a6a;
		--Link-Color: #8cf;
		--Link-Visited-Color: #59c;
		--Link-Active-Color: #fff;
		--Link-Hover-Color: #def;
	}
}
@media (prefers-reduced-motion: reduce)
{
	:root
	{
		--ToggleSwitch-Transition: none;
	}
}
html, body
{
	margin: 0;
	border: none;
	padding: 0;
	width: 100%;
	max-width: 100%;
	background-color: var(--Background-Color);
	color: var(--Color);
}
a
{
	color: var(--Link-Color);
}
a:visited
{
	color: var(--Link-Visited-Color);
}
a:hover
{
	color: var(--Link-Hover-Color);
}
a:active
{
	color: var(--Link-Active-Color);
}
label
{
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
}
.Toggle
{
	position: relative;
	display: inline-block;
	margin: 0 2em 0 0.5em;
	width: 3em;
	height: 1.5em;
}
.Toggle input
{
	opacity: 0;
	width: 0;
	height: 0;
}
.Toggle .Switch
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 0.75em;
	background-color: #aaa;
	transition: var(--ToggleSwitch-Transition);
}

.Toggle .Switch::before
{
	position: absolute;
	content: "";
	border-radius: 50%;
	height: 1.125em;
	width: 1.1275em;
	left: 0.1875em;
	bottom: 0.1875em;
	background-color: #fff;
	transition: var(--ToggleSwitch-Transition);
}
.Toggle .Switch::after
{
	margin-left: calc(100% + 0.5em);
	content: "切";
}
.Toggle input:checked + .Switch
{
	background-color: #2196F3;
}
.Toggle input:checked + .Switch::before
{
	transform: translateX(1.5em);
}
.Toggle input:checked + .Switch::after
{
	content: "入";
}