html,
body {
	padding: 0;
	margin: 0;
	overflow: hidden;
}

label {
	position: absolute;
	left: 50%;
	top: 50%;
	--c: translate(-50%, -50%);
	transform: var(--c);
}

.switch {
	position: relative;
	left: 0;
	top: 0;
	width: 48vmin;
	height: 48vmin;
}

label > input {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
	opacity: 0;
}

.switch span {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: var(--c);
	border-radius: 50%;
	width: 70%;
	height: 70%;
	background: #ffac33;
	border: 4vmin solid white;
	transition: all ease 0.15s;
}

.switch div {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.switch div::before,
.switch div::after {
	content: ' ';
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: var(--c);
	background: #ffac33;
	width: 12%;
	height: 130%;
	border-radius: 10vmin;
	transition: all ease 0.15s;
}

.switch div:nth-child(1)::before {
	transform: var(--c) rotate(0deg);
}

.switch div:nth-child(1)::after {
	transform: var(--c) rotate(45deg); /*45deg increment each time*/
}

.switch div:nth-child(2)::before {
	transform: var(--c) rotate(90deg);
}

.switch div:nth-child(2)::after {
	transform: var(--c) rotate(135deg);
}

.switch::before,
.switch::after {
	content: ' ';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: var(--c);
	border-radius: 50%;
	background: white;
	transition: all ease 0.15s;
}

.switch::before {
	width: 0%;
	height: 0%;
	z-index: 10;
}

.switch::after {
	width: 50%;
	height: 50%;
}

input:checked ~ .switch span {
	width: 100%; /*width change*/
	height: 100%; /*height change*/
	background: #66757f; /*color change*/
	/*we get a full moon*/
}

input:checked ~ .switch div::before,
input:checked ~ .switch div::after {
	height: 50%; /*we hide the sun-rays*/
}

input:checked ~ .switch::before {
	/*we draw a white circle a left-top corner to show a half moon*/
	left: 30%;
	top: 30%;
	width: 90%;
	height: 90%;
}

input:checked ~ .switch::after {
	/*we hide the sun outline*/
	width: 0%;
	height: 0%;
}

input:not(:checked) ~ .switch {
	transform: rotate(180deg);
	transition: all ease 2.15s 0.1s;
}