@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
	box-sizing: border-box;
}

body {
	background-color: #000;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	overflow: hidden;
	margin: 0;
}

.toggle-container {
	display: flex;
	align-items: center;
	margin: 10px 0;
}

.toggle {
	visibility: hidden;
}

.label {
	position: relative;
	background-color: #d0d0d0;
	border-radius: 50px;
	cursor: pointer;
	display: inline-block;
	margin: 0 15px 0;
	width: 80px;
	height: 40px;
}

.toggle:checked+.label {
	background-color: #f05053;
}

.ball {
	background: #f0d423;
	height: 34px;
	width: 34px;
	border-radius: 50%;
	position: absolute;
	top: 3px;
	left: 3px;
	align-items: center;
	justify-content: center;
	animation: slideOff 0.3s linear forwards;
}

.toggle:checked+.label .ball {
	animation: slideOn 0.3s linear forwards;
}

@keyframes slideOn {
	0% {
		transform: translateX(0) scale(1);
	}

	50% {
		transform: translateX(20px) scale(1.2);
	}

	100% {
		transform: translate(40px) scale(1);
	}
}

@keyframes slideOff {
	0% {
		transform: translateX(40px) scale(1);
	}

	50% {
		transform: translateX(20px) scale(1.2);
	}

	100% {
		transform: translate(0px) scale(1);
	}
}