.darkmode {
	 /*float: right;*/
	 text-align: right;
	 margin-right: 1em;
	 padding: 1em;
	 min-width: 30px;
	 position: relative;
}
.darkmode svg:hover {
	cursor: pointer;
}

@media all and (max-width: 450px) {
	 .darkmode {
		 padding: 1em;
	}
}
 .darkmode > .toggle {
	 display: none;
	 box-sizing: border-box;
}
 .darkmode svg {
	 opacity: 0;
	 position: absolute;
	 width: 20px;
	 height: 20px;
	 top: calc(50% - 10px);
	 margin: 0 7px;
	 fill: var(--color);
	 transition: opacity 0.1s ease;
}
 .toggle:checked ~ label > #dayIcon {
	 opacity: 0;
}
 .toggle:checked ~ label > #nightIcon {
	 opacity: 1;
}
 .toggle:not(:checked) ~ label > #dayIcon {
	 opacity: 1;
}
 .toggle:not(:checked) ~ label > #nightIcon {
	 opacity: 0;
}