@font-face {
	font-family: "open-sans";
	src: url("fonts/OpenSans-Regular.ttf");
}

body,td,th {
	font-family: 'open-sans';
	font-size: 14px;
	color: #FFFFFF;
}

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

body {
	background-color: #000000;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;

	margin: 0 auto;
	max-width: 768px;
}

.video {
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	height: auto;
	
	float: left;
}

.textbox {
	text-align: justify;
}

.textbox > p {
	text-align: justify;
}

main {
	min-height: 100vh;

	padding: 2rem;

	display: flex;
	align-items: center;
	justify-content: center;
}

.grid {
	display: grid;

	grid-template-areas: 
		"top"
		"left"
		"middle"
		"right"
		"bottom";
}

.area-top {
	grid-area: top;
}

.area-left {
	grid-area: left;
}

.area-middle {
	grid-area: middle;
}

.area-right {
	grid-area: right;
}

.area-bottom {
	grid-area: bottom;
}

@media screen and (min-width: 820px) {
	.grid {
		display: grid;
	
		grid-template-areas: 
			"top top top"
			"left middle right"
			"bottom bottom bottom";
			
	grid-template-columns: 1fr 3fr 1fr;
	}
}

.images-content {
	width: 418px;
	height: 208px;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.images-content > img {
	height: 100%;
}