.darkmode-toggle {
	padding-right: 5px;
	text-align: right;
}

.darkmode-checkbox {
	--darkmode-checkbox-size: 42px;
	appearance: none;
	height: var(--darkmode-checkbox-size);
	width: var(--darkmode-checkbox-size);
	outline: none;
	border: none;
}

.darkmode-checkbox:not(:checked) {
	color: #2B8272;
	transition: color 2s ease-in-out;
}

.darkmode-checkbox:checked {
	color: #ffe162;
	transition: color 2s ease-in-out;
}

.darkmode-checkbox:focus {
	outline: none !important;
	outline-offset: 0px !important
}

.darkmode-checkbox:focus-visible {
	animation: wiggle 2.2s cubic-bezier(.36,.07,.19,.97) both infinite;
	outline: none !important;
    outline-offset: 0px !important;
    background-color: #10302a;
    border-radius: 24px;
    color: #ffe162;
}

.darkmode-checkbox::before {
	content: '';
	height: var(--darkmode-checkbox-size);
	width: var(--darkmode-checkbox-size);
	margin-left: 3px;
	line-height: 42px;
}

.darkmode-checkbox:not(:checked)::before {
	content: '\f186';
	font-size: 32px;
}

.darkmode-checkbox:checked::before {
	content: '\f185';
	font-size: 36px;
}

.darkmode-checkbox:hover {
	animation: wiggle 2.2s cubic-bezier(.36,.07,.19,.97) both infinite;
	transform: rotate(5deg) scaleX(-1);
	cursor: pointer;
}

@keyframes wiggle {
	5%, 50% {
		transform: rotate(-10deg) scaleX(-1);
	}

	10%, 40% {
		transform: rotate(10deg) scaleX(-1);
	}

	15%, 25%, 35% {
		transform: rotate(-20deg) scaleX(-1);
	}

	20%, 30% {
		transform: rotate(20deg) scaleX(-1);
	}
}