label.label
	input(type="checkbox").checkbox
	span

.label {
	width: 100px;
	height: 100px;
	display: inline-block;
	input[type="checkbox"] {
		display: none;
		&:checked ~ span {
			background-position: 100px 0px;
		}
	}
	span {
		// I'm sorry for using base64 image here
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAIAAABM5OhcAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJdSURBVHhe7drRbsIwEERR6P//M50qKaVJSU3wrNf2PS8gHkByrnYjhQsAAACAPlzX12+32219B53OdXs+jzirR5uz+lhfgaoICxaEBQvCggVhwYKwYEFYsCAsWBAWLAgLFoQFC8KCBWHhD9ff1k9fQVjY2pd0oi3Cwi/n5tMeYcGCsPCj1rgSwsKqYlVCWPhyXNWJP2ETFiwIC/XHlRDW7BxVCWFNzVSVEBYsCGtevnElhDUpa1VCWNh6vyohrBkdj6sqCGs67iW4IKy5xFQlhIVVxaqEsCYScGt1R1izCFuCC8KaQnBVQlizc1QlhDW+yFurO8IaXPwSXBDWyFpVJYQFC8IaVsNxJYQ1prZVCWENqHlVQliwIKzRZBhXQlhDSVKVENYsIqsSwjLS/Hi0fmoT8BPlCMtlf5mtF/74y4PHlRBWKFNb2aoSwopmnVt7TaoSwupecKmFCKuBiikkXIILwnI5vqhV2kpblRCWUUBbz7StSgirpXfasnb5PsLyMk2OzEtwQVh21Rdi/qqEsCJUbys/wgpSq60uxpUQVhYlbfVSlRBWnDcvfEdVCWGFqrUQ8yOsaOfa6mtcCWE18Gpb3VUlhJVR+U7MWZUQVhvlQZRHlgphNVOyEHtcggvCaqmkrWcyVyWE1di5PpJXJYQFC8Jq79Xxk39cCWGlUN5KF1UJYWVRUkwvVQlhJdJRN/8irG70lR1h5TLM0CKsdMZoi7Ay2rfVXW3bhwbDjOIqun6oEmxzVkwsWBAWLAgLFoQFC8KCBWHBgrBgQViwICxYEBYAAAAAzOty+QSAV8zCW56hPgAAAABJRU5ErkJggg==');
		width: 100%;
		height: 100%;
		display: block;
	}
}

// I'm sorry for using newer technology here... :)
body {
	background-color: #8f8f8f;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}