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

.container {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.h-80 {
	height: 80%;
}


.screen {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	perspective: 500px;
	flex-direction: column;
	/*border: 10px solid black;
	border-radius: .5em;
	background: #FFFFFF;*/
}

#rectangle-1, #rectangle-4 {
	width: 300px;
	height:  300px;
	background: #FFDEFA;
	cursor: pointer;
	touch-action: none;
	user-select: none;
	transform-origin:center;
	display: flex;
	justify-content: center;
	align-items: center;
}

#rectangle-2, #rectangle-5 {
	width: 200px;
	height:  200px;
	background: #FFb0b0b0;
	cursor: pointer;
	touch-action: none;
	user-select: none;
	transform-origin:center;
	display: flex;
	justify-content: center;
	align-items: center;
}

#rectangle-3, #rectangle-6 {
	width: 100px;
	height:  100px;
	background: #FFd3d3;
	cursor: pointer;
	touch-action: none;
	user-select: none;
	transform-origin:center;
}

.animate {
	transition: all 0.3s;
}

.output {
	padding: 1rem;
	background: #FFFFFF;
	font-size: 1rem;
	border-radius: .5em;
	margin: 1rem;
}