/* animations */
@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes expand {
	0% {
		height: 1px;
		width: 1px;
	}

	100% {
		height: 100%;
		width: 100%;
	}
}

@keyframes marquee {
	0% {
		transform: translate(0% 0);
	}

	100% {
		transform: translate(-100%, 0);
	}
}

/* conditionals */
/* invert some icons base on mode */
body:has(#darklight:not(:checked)) .invert {
	filter: invert(1);
}

#buttons,
#buttons2 {
	width: 100%;
}

/* animation speed accessibility */
@media (prefers-reduced-motion: reduce) {
	body:has(#reducedmotion:not(:checked)) {
		:has(#speed:not(:checked)) .quantenzitrone {
			animation: spin 300s linear infinite;
		}

		:has(#speed:checked) .quantenzitrone {
			animation: spin 30s linear infinite;
		}

		#reducemotion {
			display: none;
		}

		#buttonsbox {
			width: 100%;
		}
		#buttons {
			animation: none;
			flex-wrap: wrap;
			justify-content: center;
		}
		#buttons2 {
			display: none;
		}
	}
	body:has(#reducedmotion:checked) {
		:has(#speed:not(:checked)) .quantenzitrone {
			animation: spin 60s linear infinite;
		}

		:has(#speed:checked) .quantenzitrone {
			animation: spin 1s linear infinite;
		}

		#noreducemotion {
			display: none;
		}

		#buttonsbox {
			width: 200%;
		}
		#buttons,
		#buttons2 {
			animation: marquee 60s linear infinite;
		}
		:has(#buttons:hover),
		:has(#buttons2:hover) {
			#buttons,
			#buttons2 {
				animation-play-state: paused;
			}
		}
	}
}

@media (prefers-reduced-motion: no-preference) {
	body:has(#reducedmotion:checked) {
		:has(#speed:not(:checked)) .quantenzitrone {
			animation: spin 300s linear infinite;
		}

		:has(#speed:checked) .quantenzitrone {
			animation: spin 30s linear infinite;
		}

		#reducemotion {
			display: none;
		}

		#buttonsbox {
			width: 100%;
		}
		#buttons {
			animation: none;
			flex-wrap: wrap;
			justify-content: center;
		}
		#buttons2 {
			display: none;
		}
	}
	body:has(#reducedmotion:not(:checked)) {
		:has(#speed:not(:checked)) .quantenzitrone {
			animation: spin 60s linear infinite;
		}

		:has(#speed:checked) .quantenzitrone {
			animation: spin 1s linear infinite;
		}

		#noreducemotion {
			display: none;
		}

		#buttonsbox {
			width: 200%;
		}
		#buttons,
		#buttons2 {
			animation: marquee 60s linear infinite;
		}
		:has(#buttons:hover),
		:has(#buttons2:hover) {
			#buttons,
			#buttons2 {
				animation-play-state: paused;
			}
		}
	}
}

img:not(.quantenzitrone) {
	transition: 0.1s linear;
}
img:not(.quantenzitrone):hover {
	transition: 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}
img:not(.quantenzitrone):hover {
	transform: scale(2);
}
.button > img:hover {
	transform: scale(2) translateY(-25%);
}

/* secret ;)*/
.secret {
	height: 3px;
	width: 3px;
	transition: 0.1s linear;
}
.secret:hover {
	transform: scale(200) !important;
}