:root{
	--h-f_color: darkgrey;
	--h-f_height:3em;
	--main_color: lightgrey;
	--separator: black;
	--emptyfirst:none;
	--closed:none;
}

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

main{
	position: absolute;
	top: var(--h-f_height);
	bottom: var(--h-f_height);
	margin: auto;
	width: 100%;
	background-color: var(--main_color);
	padding:1em;
	box-sizing: border-box;
	display: flex;
}

header, footer{
	position: absolute;
	height: var(--h-f_height);
	width: 100%;
	background-color: var(--h-f_color);
	padding:0.5em;
	box-sizing: border-box;
	display: flex;
}

header{
	top: 0;
}
header span{
	flex: 1;
}
header span.title{
	font-size: 1.8em;
	font-weight: bold;
}
header span.logo {
	text-align: right;
}header span.logo img{
	max-height: 2em;
}

footer{
	bottom: 0;
}
footer span.email{
	text-align: center;
	flex: 1;
}

#center{
	margin: 0 auto;
	overflow: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex: 1;
}

div.video-js{
	background: rgba(111,111,111,20%);
	max-width: 100%;
}

.vjs-default-skin .vjs-big-play-button {
	left: 40%;
	top: 40%;
	width: 20%;
	height: 20%;
	vertical-align: middle;
	font-size:3em;
	line-height: 1em;
}



a{
	color:black;
	text-decoration: none;
}

a:link{
	font-style: normal;
}

a:hover{
	text-decoration: underline;
}
div.note{
	margin: 1em;
}


@media only screen and (min-width:400px) {
.vjs-default-skin .vjs-big-play-button {
	font-size:4em;
}
}
@media only screen and (min-width:600px) {
.vjs-default-skin .vjs-big-play-button {
	left:42%;
	top:42%;
	width:16%;
	height:16%;
	font-size:5em;
	line-height: 1.1em;
}
@media only screen and (min-width:800px) {
.vjs-default-skin .vjs-big-play-button {
	font-size:5.5em;
	line-height: 1.2em;
}
}