@import "icomoon/style.css";

* {
	outline: none;
}
html,
body {
	margin: 0px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
		sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: #fff;
}
input {
	display: block;
	box-sizing: border-box;
	border: 1px solid #efefef;
	border-radius: 0.5rem;
	padding: 0.6rem;
	font-size: 1rem;
}
.light {
	color: #878787;
}
.video {
	float: left;
	width: 25vw;
	height: 50vh;
	overflow: hidden;
	position: relative;
}
.video.one {
	width: 100vw;
	height: 100vh;
}
.video.two {
	width: 50vw;
	height: 100vh;
}
.video.three {
	width: 33.33vw;
	height: 100vh;
}
.video.four {
	width: 50vw;
	height: 50vh;
}
.video.five,
.video.six {
	width: 33.33vw;
	height: 50vh;
}
.video video {
	width: 100%;
	height: 100%;
	display: block;
	margin: auto;
	box-sizing: border-box;
	object-fit: cover;
}
.video video.mirror {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}
.video:fullscreen video {
	background: #acadd3;
	object-fit: contain;
	border: none;
}
.video button {
	position: absolute;
	top: 0.1rem;
	right: 0px;
	z-index: 10;
	font-size: 2rem;
	color: white;
	background: none;
	border: none;
	cursor: pointer;
	text-shadow: 2px 2px 5px #989898;
	padding: 0.1rem 0.4rem;
}
.video:fullscreen button {
	display: none;
}

#app {
	display: none;
}
#intro {
	background: #fff;
	position: fixed;
	bottom: 6rem;
	left: 0px;
	right: 0px;
	z-index: 100;
	width: 18rem;
	margin: auto;
	padding: 1rem;
	box-sizing: border-box;
	border-radius: 1rem;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);
}
#intro .roomLink {
	text-decoration: underline;
	text-decoration-style: dashed;
	text-underline-offset: 0.2rem;
	word-wrap: break-word;
	word-break: break-word;
}
#intro .copyURL {
	color: inherit;
	text-decoration: none;
	font-weight: bold;
	-webkit-user-select: none;
	user-select: none;
}
#intro .footer {
	display: flex;
	justify-content: space-between;
}
#intro .footer .terms {
	position: relative;
	top: -0.25rem;
}

#chatWrap {
	background: #fff;
	position: fixed;
	bottom: 6rem;
	left: 0px;
	right: 0px;
	z-index: 100;
	width: 18rem;
	margin: auto;
	padding: 1rem;
	box-sizing: border-box;
	border-radius: 1rem;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);
}
#chatWrap #chats {
	overflow-y: auto;
	overflow: auto;
	max-height: 240px;
	margin: auto;
	background: /* Shadow covers */ linear-gradient(white 30%, rgba(255, 255, 255, 0)),
		linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
		/* Shadows */ radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
		radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
	background: /* Shadow covers */ linear-gradient(white 30%, rgba(255, 255, 255, 0)),
		linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
		/* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
		radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
	background-repeat: no-repeat;
	background-color: white;
	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

	background-attachment: local, local, scroll, scroll;
}
#chatWrap .chat {
	margin: 0.5rem 0rem;
}
#chatWrap .chat .name {
	font-weight: bold;
}
#chatWrap .chat .message {
}
#chatWrap .chat .date {
	font-size: small;
}
#chatWrap #composeBox {
	position: relative;
	background: #f6f6f6;
	border-radius: 1rem;
	padding: 0.7rem 1rem;
	margin-top: 0.5rem;
	max-height: 4.2rem;
	overflow-y: auto;
}
#chatWrap #composeBox #placeholder {
	position: absolute;
	z-index: 5;
	opacity: 0.5;
}
#chatWrap #composeBox #compose {
	position: relative;
	z-index: 10;
}
#chatWrap #noChat {
	padding: 1rem;
	text-align: center;
}

#settings {
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);
	position: fixed;
	bottom: 5rem;
	left: 0px;
	right: 0px;
	z-index: 100;
	width: 17rem;
	margin: auto;
	box-sizing: border-box;
	border-radius: 1rem;
	max-height: 26rem;
	overflow-y: auto;
}
#settings .label {
	padding: 1rem 1rem 0.25rem;
	font-weight: bold;
}
#settings .link {
	padding: 0.25rem 1rem;
	white-space: nowrap;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	border-radius: 1rem;
}
#settings .link.active:before {
	content: "✔️";
	margin-right: 0.5rem;
}
#settings .link:hover {
	background: #fff;
}
#settings .link.copy {
	margin-bottom: 0.5rem;
}
#settings input {
	margin: 0rem 1rem 1rem;
	width: calc(100% - 2rem);
}

#actionsWrap {
	position: fixed;
	bottom: 1rem;
	left: 0px;
	right: 0px;
	z-index: 100;
	display: inline-flex;
	transition: all 0.25s ease-out;
	opacity: 1;
	transform: translateY(0rem);
}
#actionsWrap.hidden {
	opacity: 0;
	transform: translateY(1rem);
	z-index: -1;
}

#actions {
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);
	margin: auto;
	box-sizing: border-box;
	border-radius: 1rem;
	transition: opacity 250ms;
}
#actions button {
	flex: 1;
	background: none;
	border: none;
	font-size: 1.25rem;
	padding: 1rem;
	cursor: pointer;
	margin: auto;
}
#actions button:hover {
	background: rgba(255, 255, 255, 0.8);
	border-radius: 1rem;
}
#actions button.active {
	background: #fafafa;
	border-radius: 1rem;
}
#actions button.icon-mic-off,
#actions button.icon-video-off {
	color: #e74c3c !important;
}

@media only screen and (max-width: 960px) {
	.video {
		float: left;
		width: 50vw;
		height: 25vh;
		overflow: hidden;
	}
	.video.two {
		width: 100vw;
		height: 50vh;
	}
	.video.three {
		width: 100vw;
		height: 33.33vh;
	}
	.video.five,
	.video.six {
		width: 50vw;
		height: 33.33vh;
	}
}