body {
	background-image: url("Tile.png");
}

#center {
	font-family: "Jacques Francois Shadow", serif;
	text-align: center;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex-direction: column;
}

#paperContainer {
	position: relative;
	display: inline-block;
	width: auto;
	height: auto;
	text-align: center;
	z-index: 1;
}

#paperImage {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1; /* Make sure the image is behind the text */
}

#paper {
	padding: 5rem;
	margin: 0;
	position: relative;
	display: inline-block;
	background: transparent;
	color: #fff;
	text-align:center;
}

/* Adjust h2 styles so that the container resizes based on the text */
#paperContainer {
	padding: 10px;
}


#left {
	left: 0;
}

#right {
	right: 0;
}	

.column {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	height: 100%;
	position: absolute;
}

html, body {
	height: 100%;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

main {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: space-between;
}

#right img {
	height: 150px; /* Set door height */
	transition: transform 0.8s ease-in-out; /* Smooth 3D transition */
	transform-style: preserve-3d; /* Allow 3D transformations */
	cursor: pointer;
}

/* Apply perspective to create the 3D effect */
#right {
	perspective: 1000px; /* Control the depth of the 3D effect */
}

#right img {
	transform-origin: right; /* Rotate from the right edge */
}

#right button {
	background-color: #000;
}

/* Door hover effect: rotateY to simulate opening */
#right img:hover {
	transform: rotateY(75deg); /* Opens the door to the left */
}
#left button{
	background: none;
	border: none;
	cursor: pointer;
}
.closet{
	height: 150px;
}