html {
	height: 100%;
}

body {
	min-height: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	/* Prevent text selection. */
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

main {
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.sheet {
	position: relative;
	height: calc(100vh - 4.5em); /* The header bar is 4.5em. */
	overflow: hidden;
	z-index: 0;
}

.sheet:first-child {
	margin-top: 4.5em; /* The header bar is 4.5em. */
}

.sheet-background img {
	height: 100%;
	width: 100%;
	object-fit: cover;

	/* If filter is not supported this will put a 0.5 opacity layer over the image. */
	opacity: 0.5;
}

/* If filter is supported it applies the filter and removes the opacity. */
@supports (filter: blur(3px)) {
	.sheet-background img {
		opacity: 1;
		filter: blur(3px);
		transform: scale(1.05);
	}
}

.sheet-nav {
	position: absolute;
	box-sizing: border-box;
	background-color: #EEFFFF;
	background-color: var(--color-primary-light);
	color: #000;
	color: var(--color-primary-light-text);
	width: 50vw;
	top: 0%;
	height: 100%;
	z-index: 16;
	padding-left: 20px;
	padding-right: 20px;
}

.sheet-image img  {
	position: absolute;
	transform: translate(-50%, -50%);
	-webkit-filter: drop-shadow(0em 0em 1em rgba(0,0,0,0.5));
	filter: drop-shadow(0em 0em 1em rgba(0,0,0,0.5));
	z-index: 2;
}

.nav-left {
	left: 0%;
}

.nav-right {
	right: 0%;
}

@media only screen and (min-device-width: 752px) and (max-device-width: 960px) {
	.sheet {
		height: calc(100vh - 7em); /* The header bar is 7em. */
	}

	.sheet:first-child {
		margin-top: 7em; /* The header bar is 7em. */
	}
}