body {
    max-width: 40em;
    margin: 0 auto;
    padding: 5px;
    font-family: Georgia, serif;
    font-size: 18px;
    line-height: 1.6em;
    background-color: #222831;
    color: #f2f2f2;
}

h1 {
    color: #f96d00;
	text-align: center;
}

video.stream {
	border-style: solid;
	border-color: #f96d00;
}


@media (pointer:fine) { /* desktop user */
	.wrapper {
		width: 100%;
		height: 80vh;
		overflow: visible;
		/*border-style: solid;*/
		
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	
	.wrapper .stream {
		width: 800px;
		height: 600px;
		object-fit: contain;
	}
}




@media (pointer:coarse) { /* mobile/tablet user */
	.wrapper {
		width: 98%;
		height: min(100vw, 100vh);
		overflow: contain;
		
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.wrapper .stream {
		width: min(100%, 800px);
		height: min(90%, 600px);
		object-fit: contain;
	}
}