html {
	overflow: hidden;
	height: 100%;
}

.one video {
	object-fit: cover;
}
.localVideo {
	width: 20%;
	position: absolute;
	z-index: 2;
	bottom: 50px;
	left: 10px;
	display: block;
	transform: scale(-1, 1)
}

.message {
	visibility: hidden;
}

.messageBox {
	color: white;
	width: 60%;
	position: absolute;
	z-index: 3;
	bottom: 10px;
	right: 50px;
	display: block;
	align-items: stretch;
	align-content: stretch;
}

.messages {
	color: white;
	width: 60%;
	position: absolute;
	z-index: 3;
	bottom: 100px;
	right: 10px;
	display: block;
	align-items: stretch;
	align-content: stretch;
	text-align: right
}

.pl {
	color: yellow;
	text-align: left
}

.pr {
	color: white;
	text-align: right
}

textarea {
	color: blue;
	width: 60%;
	position: absolute;
	z-index: 3;
	bottom: 50px;
	right: 50px;
	display: block;
	align-items: stretch;
	align-content: stretch;
	height: 34px;
}

button {
	color: blue;
	position: absolute;
	z-index: 3;
	bottom: 50px;
	right: 10px;
	display: block;
	height: 40px;
}

#controls{
	color: green;
	background-color: transparent;
	position: absolute;
	z-index: 3;
	bottom: 10px;
	left: 10px;
	font-size: xx-large;
	font-weight: bold;
	letter-spacing: 10px;
}

#rotateRemote{
	color: yellow;
	position: inherit;
	z-index: 6;
	top: 20px;
	left: 20px;
	font-size: xx-large;
	font-weight: bold;
	display: none;
}

.result {
	width: 20%;
	position: absolute;
	z-index: 2;
	top: 0px;
	left: 10px;
	display: block;
}


.remoteVideos {
	width: 100%; 
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
}

.remoteVideosSide {
	float: right;.
	display: flex;
	position: flex-end;
	text-align: right;
	position: initial;
	align-self: flex-start;
	top: 0px;
	right: 0px;
	height: 128px;
	max-width: 256px; 
	#max-height: 128px; 
	align-self: self-end;
	flex-wrap: wrap;
	z-index: 10;
	transform: scale(-1, 1)

	#position: absolute;
	#align-self: flex-start;
	#top: 0px;
	#right: 0px;
	#display: inline-flex;
	#flex-direction: column;
	#flex-wrap: wrap;
	#justify-content: flex-start;
	#align-items: flex-end;
	#align-content: flex-end;
    	#object-fit: contain;
	#overflow: hidden;

}

.remoteVideos video {
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 0px;
	min-height: 0px;
	#transform: scale(-1, 1)
}
body {
  background-color: black;
  	margin: 0;
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}