body {
	background-image: url("background.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#banner {
	width: 100%;
	height: 15%;
	background-image: url("DF_banner.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left;
}

#container {
	height: 85%;
	position: relative;
}

#button-back {
	float: right;
	width: 20%;
	height: 100%;
}

#center-column {
	position: absolute;
	top: 0;
	pointer-events: none;
	left: 25%;
	width: 50%;
	height: 100%;
}
#center-column > div {
	width: 100%;
	height: auto;
	max-height: 80%;
}
#center-column video {
	max-width: 80%;
	max-height: 64vmin; /* % of parent wasn't working somehow ?? */
	margin: auto;
	display: block;
}

#buttons-column {
	overflow-y: auto;
	height: 100%;
}

.left-column {
	float: left;
	width: 25%;
	height: 100%;
}
.right-column {
	float: right;
	width: 25%;
	height: 100%;
}

.df_button {
	margin: auto;
	cursor: pointer;
	width: 100%;
	margin: 0.3em 0;
	background-image: url("DF_button_off.png");
	color: #fff;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	font-size: 2em;
	font-size: 3vmin;
}
.df_button:hover {
	background-image: url("DF_button_on.png");
}
.df_button p {
	max-width: 9em;
}

#scroll-notice {
	position: absolute;
	bottom: 0;
	width: 100%;
	pointer-events: none;
	text-align: center;
	color: white;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
	display: none;
	font-size: 2.7vw;
}

@media (max-aspect-ratio: 9/16) {
	#buttons-column {
		width: 25%;
	}
	#scroll-notice {
		display: none !important;
	}
	.left-column, .right-column {
		width: 100%;
		float: left;
		height: initial;
	}
	#center-column {
		right: 0;
		left: initial;
		width: 75%;
		height: 100%;
	}
}