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

#background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.scene {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -192px 0 0 -192px;
	width: 100px;	/*384px*/
	height: 100px;	/*384px*/
	/* background: rgba(100, 100, 255, 0.2); */
	-webkit-transform: rotateX(60deg) rotateZ(60deg);
	transform-style: preserve-3d;
	transform-origin: 50% 50% 50%;
}

.block {
	position: absolute;
	left: 0;
	top: 0;
	width: auto;
	height: auto;
	transform-style: preserve-3d;
	transform-origin: 50% 50% 50%;
}

.x-axis, .y-axis, .z-axis {
	position: absolute;
	left: 0;
	top: 0;
	width: 17px;
	height: 17px;
	transform-origin: 50% 50% 50%;
	pointer-events: none;
}

.x-axis {
	/* border: solid 2px rgba(255, 0, 0, 0.3); */
}
.y-axis {
	/* border: solid 2px rgba(0, 255, 0, 0.3); */
}
.z-axis {
	/* border: solid 2px rgba(0, 0, 255, 0.3); */
}

.side {
	position: absolute;
	left: 0;
	top: 0;
	width: 16.5px;
	height: 16.4px;
	backface-visibility: hidden;
	/* outline: 1px solid rgba(0, 0, 0, 0.3); */
	contain: strict;
	content-visibility: auto;
	contain-intrinsic-size: 16px;
	overflow: hidden;
}

.block:hover .side {
	outline: 1px solid rgba(0, 255, 0, 0.5);
}

.subtraction .block:hover .side {
	outline: 1px solid rgba(255, 0, 0, 0.5);
}

.ghost {
	pointer-events: none;
}
.ghost .side {
	opacity: 0.6;
	pointer-events: none;
	-webkit-filter: brightness(1.5);
}

.subtraction .ghost {
	display: none;
}