body {
	background-color: grey;
}

#light_dark_toggle {
	position: relative;
	width: 63px;
	height: 36px;
	margin: 0 auto;
	border-radius: 40px;
}

#light_dark_toggle input[type="checkbox"] {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	margin: 0px;
	cursor: pointer;
	opacity: 0;
	z-index: 2;
}

#light_dark_toggle span {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	overflow: hidden;
	opacity: 1;
	background-color: #ffffff;
	border-radius: 40px;
	border: 1px solid black;
	transition: 0.2s ease background-color, 0.2s ease opacity;
}

#light_dark_toggle span:before, #light_dark_toggle span:after {
	content: "";
	position: absolute;
	top: 4px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	transition: 0.5s ease transform, 0.2s ease background-color;
}

#light_dark_toggle span:before {
	background-color: #fff;
	transform: translate(-100px, 0px);
	z-index: 1;
}

#light_dark_toggle span:after {
	border: 1px solid #e3e3e3;
	background-color: #ffff00;
	transform: translate(4px, 0px);
	z-index: 0;
}

#light_dark_toggle input[type="checkbox"]:checked + span {
	background-color: #000000;
	border: 1px solid #ffffff;
}

#light_dark_toggle input[type="checkbox"]:active + span {
	opacity: 0.5;
}

#light_dark_toggle input[type="checkbox"]:checked + span:before {
	background-color: #000;
	transform: translate(24px, -5px);
}

#light_dark_toggle input[type="checkbox"]:checked + span:after {
	background-color: #e3e3e3;
	border: 1px solid #ffffff;
	transform: translate(30px, 0px);
}