label(title="Click the entire page to do the table flip")
	span
		input(type="checkbox")
		span (
		span ╯
		span °□°）
		span ╯
		span ︵
		span ┳━┳

html, body, label {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

label {
	display: flex;
	align-items: center;
	justify-content: center;
}

label {
	font-size: 48px;
	user-select: none;
	span {
		display: flex;
		span {
			display: block;
			overflow: hidden;
			&:nth-child(3), &:nth-child(5) {
				transform-origin: center left;
				transform: rotate(90deg);
			}
			&:nth-child(6) {
				width: 0px;
			}
		}
		input[type="checkbox"] {
			display: none;
			&:checked ~ span {
				&:nth-child(3), &:nth-child(5) {
					transform: rotate(0deg);
					transition: transform 300ms ease-out;
				}
				&:nth-child(6) {
					width: 48px;
					transition: width 300ms ease-out;
				}
				&:nth-child(7) {
					animation: flippy-table 1000ms linear forwards;
				}
			}
		}
	}
}

@keyframes flippy-table {
	0%   { transform: translateY(0%); }
	50%  { transform: translateY(-200%) rotate(270deg); }
	100% { transform: translateY(0%) rotate(540deg); }
}