body {
	--lr: 50;
	--tb: 50;
	--z: 1;
	margin: 0;
	background: black;
	display: grid;
	justify-content: center;
	align-content: center;
	height: 100dvh;
}
div {
	width: 100dvmin;
	height: 100dvmin;
	overflow: hidden;
	background-size: calc((100 + var(--z)) * 1%);
	background-position: calc(var(--lr) * 1%) calc(var(--tb) * 1%);
	background-repeat: no-repeat;
	display: none;
	grid-column-start: 1;
	grid-row-start: 1;
	transition: background-size 5s ease-in-out,
		background-position 10s cubic-bezier(0,1,0,1),
		opacity 2s;
}
.was {
	opacity: 0;
}
.is,
.willbe {
	display: block;
}


label, input {
	display: block;
}