html {
	background-color: #292929;
}

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: 220ms ease-in both mhx-vt-fade-out;
	}

	::view-transition-new(root) {
		animation: 320ms ease-out both mhx-vt-fade-in;
	}
}

@keyframes mhx-vt-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes mhx-vt-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

html.page-transition--enter body {
	animation: mhx-vt-fade-in 320ms ease-out both;
}

html.page-transition--leave body {
	animation: mhx-vt-fade-out 220ms ease-in both;
}