:root {
	--button-color: #fbdf38;
	}

* {
	padding: 0;
	margin: 0;
	}


body {font: normal 16px arial; background-color: #fcfcfc;}

main {}

.video-element {height: 100vh; position: relative;}
.pre-cast-element {height: 100vh; display: grid; place-content: center;}

.connecting-element {
	height: 100vh; display: grid; place-content: center;
	font-size: 250%;
	font-weight: bold;
	}

.view-display {height: 100vh; display: grid; place-content: center; background-color: #299bdf;}
.view-display .count {font-size: 40vw; font-weight: bold; color: white; opacity: 0.85; cursor: pointer;}


video {background: black; display: block; width: 100%; height: 100%; 
	object-fit: cover;}

html:not(.caster) .hide-if-not-caster {display: none;}
html.caster .hide-if-caster {display: none;}

html.casting .hide-if-casting {display: none;}
html:not(.casting) .hide-if-not-casting {display: none;}

html.connected .hide-if-connected {display: none;}