body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #111;

	&:hover footer.options {
		position: absolute;
		bottom: 0;
		padding: 1rem;
		width: 100%;
		background: rgb(255 255 255 / 30%);
		box-sizing:border-box;	
		& > input{
			width: 100%;
		}
	}
}

.kaleidoscope {
	position: relative;
	width: 100dvw;
	height: 100dvh;
	&.rotating {
		animation: 🎡 10s linear infinite;
		transform-origin: center;
	}
	& > .tile {
		display: none;
		position: absolute;
		top: 50dvh;
		left: 0;
		z-index: 0;
		overflow: hidden;
		height: max(100dvh, 100dvw);
		width: max(50dvh, 50dvw);
		transform-origin: right top;
		& > .image {
			position: relative;
			top: 0;
			left: 100%;
			height: 100%;
			width: 100%;
			background-color: rgb(255 255 255 / 5%);
			background-image: unset;
			transform-origin: left top;
			transition: background-position 100ms ease-in-out;
		}
	}
	&[data-tiles] .tile {
		display: block;
	}
}

@keyframes 🎡 {
	to {
		transform: rotate(360deg);
	}
}