body, html { 
	background:#808080; 
	--captionHeight:116px;
}

.centered {
	bottom:var(--captionheight); /* BUT this will change as the window gets narrower below 768px */
}

#display {
	margin:auto;
}

#video, #cover {
	--vidW:min(calc(100vh - var(--captionHeight)),100vw);
	width:var(--vidW);
	height:var(--vidW);
	max-width:768px;
	max-height:768px;
}

#cover {
	background:#333;
}






/********* set this up as a flex box ************/


.controls {
	display:flex;
}
.ctrlitem {
	flex:1;
}
.ctrlitem:last-of-type {
	flex: 2;
	align-content: end;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}




#playstop { 
	width:50%;
	max-width:120px;
	font-size:13px; 
	padding-top:4px;
	margin-right:6px;
}


#audiochoice {
	margin-right:12px;
}


#caption { margin-top:4px; }



select, select.btn {
	height:26px;
	width:40%;
	max-width:100px;
	margin-left:6px;
}