* {
	box-sizing: border-box;
}
:root {
	--side: #000;
	--bar: #333;
	--shadow: #0009;
	--wood-1: #953;
	--wood-2: #842;
	--wood-3: #731;
	--wood-4: #620;
	--depth: 4vmax;
}
html,
body {
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0;
}
body {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 100%;
	perspective: 50vmax;
	transform-style: preserve-3d;
}
.door {
	display: grid;
	transform-style: preserve-3d;
	transition: transform 2s;
	box-shadow: 0 2vmax 2vmax -2vmax var(--shadow);
}
.door > * {
	grid-column: 1;
	grid-row: 1;
	background-position: center;
	background-size: 100% 10vmax, 10vmax 100%;
}
.door > :nth-child(1) {
	background:
		linear-gradient(315deg, transparent 75%, var(--wood-1) 0) -1vmax 50%,
		linear-gradient(45deg, transparent 75%, var(--wood-1) 0) -1vmax 50%,
		linear-gradient(135deg, var(--wood-2) 50%, transparent 0) 0 50%,
		linear-gradient(45deg, var(--wood-3) 50%, var(--wood-4) 0) 0 50%;
	background-size: 2vmax 2vmax;
	transform: translateZ(calc(0px - var(--depth)));
}
.door > :nth-child(2) {
	background-image:
		linear-gradient(transparent 40%, var(--shadow) 0 60%, transparent 0),
		linear-gradient(90deg, transparent 40%, var(--shadow) 0 60%, transparent 0);
	transform: translateZ(calc(0px - var(--depth)));
}
.door > :nth-child(3) {
	background-image:
		linear-gradient(transparent 40%, var(--bar) 0 60%, transparent 0),
		linear-gradient(90deg, transparent 40%, var(--bar) 0 60%, transparent 0);
	transform: translateZ(calc(0px - var(--depth) / 2));
}
.door > .side {
	pointer-events: none;
	user-select: none;
	display: grid;
	background: black;
	color: transparent;
	transition: color 2s;
}
.door.open > .side {
	color: white;
}
.door > .side.top {
	height: var(--depth);
	margin-bottom: auto;
	transform:
		translateY(calc(0px - var(--depth) / 2))
		translateZ(calc(0px - var(--depth) / 2))
		rotateX(-90deg);
}
.door > .side.bottom {
	height: var(--depth);
	margin-top: auto;
	transform:
		translateY(calc(var(--depth) / 2))
		translateZ(calc(0px - var(--depth) / 2))
		rotateX(-90deg);
}
.door > .side.left {
	width: var(--depth);
	margin-right: auto;
	transform:
		translateZ(calc(0px - var(--depth) / 2))
		rotateY(-90deg)
		translateZ(calc(var(--depth) / 2));
}
.door > .side.right {
	width: var(--depth);
	margin-left: auto;
	transform:
		translateZ(calc(0px - var(--depth) / 2))
		rotateY(90deg)
		translateZ(calc(var(--depth) / 2));
}
.door > .side.left > * {
	width: 100vh;
	height: var(--depth);
	margin: auto 0 0 0;
	line-height: var(--depth);
	text-align: center;
	transform: rotateZ(-90deg);
	transform-origin: calc(var(--depth) / 2) calc(var(--depth) / 2);
}
.door > .side.right > * {
	width: 100vh;
	height: var(--depth);
	margin: 0 0 auto 0;
	line-height: var(--depth);
	text-align: center;
	transform: rotateZ(90deg);
	transform-origin: calc(var(--depth) / 2) calc(var(--depth) / 2);
}
.door.left {
	grid-column: 1;
	grid-row: 1;
	transform-origin: left;
}
.door.right {
	grid-column: 2;
	grid-row: 1;
	transform-origin: right;
}
.door.left.open {
	transform:
		rotateY(90deg)
		translateZ(var(--depth));
}
.door.right.open {
	transform:
		rotateY(-90deg)
		translateZ(var(--depth));
}
#input {
	z-index: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-column: 1 / 3;
	grid-row: 1;
	margin: auto;
	border-radius: .5vmax;
	background: #fff;
	box-shadow: 0 0 2vmax #0009;
}
#input[hidden] {
	display: none;
}
#input > p {
	border-radius: .5vmax;
	display: grid;
	margin: 0;
}
#input > p > label {
	margin: .5vmax;
	line-height: 3.5vmax;
	font-size: 2vmax;
}
#input > p:first-child {
	grid-column: 1 / 4;
}
#input > p:first-child > label > input {
	border: .5vmax solid #333;
	background: #fff;
	color: #333;
	cursor: default;
}
#input > p > label > input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	padding: 0 .25vmax;
	border: .5vmax solid transparent;
	border-radius: .5vmax;
	background: #333;
	vertical-align: top;
	color: #fff;
	line-height: 2.5vmax;
	font-family: monospace;
	font-size: 2vmax;
}
#output {
	z-index: -1;
	grid-column: 1 / 3;
	grid-row: 1;
	margin: auto;
}