.iconMode {
	width: 500px;
	height: 200px;
    scale: 0.2;
	position: relative;
	display: block;
	background: #ebebeb;
	border-radius: 200px;
	box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4),
		inset 0px -5px 15px rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: 0.3s;
	&:after {
		content: "";
		width: 180px;
		height: 180px;
		position: absolute;
		top: 10px;
		left: 10px;
		background: linear-gradient(180deg, #ffcc89, #d8860b);
		border-radius: 180px;
		box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
		transition: 0.3s;
	}
	svg {
		position: absolute;
		width: 120px;
		top: 40px;
		z-index: 100;
		&.sun {
			left: 40px;
			fill: #fff;
			transition: 0.3s;
		}
		&.moon {
			left: 340px;
			fill: #7e7e7e;
			transition: 0.3s;
		}
	}
}

#darkmode-toggle {
	width: 0;
	height: 0;
	visibility: hidden;
	&:checked + label {
		background: #242424;
		&:after {
			left: 490px;
			transform: translateX(-100%);
			background: linear-gradient(180deg, #777, #3a3a3a);
		}
		svg {
			&.sun {
				fill: #7e7e7e;
			}
			&.moon {
				fill: #fff;
			}
		}
		+ .background {
			background: #242424;
		}
	}
	&:active:after {
		width: 260px;
	}
}

.background {
	position: fixed;
	top: 15px;
    right: -190px;
	transition: 0.3s;
    z-index: 998;
}