@font-face {
	font-family: 'VAG';
	src: url('Vag.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

a {text-decoration: none;color: inherit}
a:hover {text-decoration: underline}

html, body {
	margin: 0;
	font-family: Arial;
	font-size: 14px;
	color: gray;
	background-color: white;
	overflow: hidden;
}

#container {
	position: relative;
	width: fit-content;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

#background_video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	z-index: -1;
}

#call_screen {
	position: absolute;
	height: 100%;
}

#exit_button {
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
	visibility: hidden;
}

#start_button {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	filter: grayscale(100%);
	pointer-events: none;
}

#start_button.enabled {
	filter: none;
	pointer-events: auto;
	cursor: pointer;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	50% {
		scale: 1.05;
	}
}

#terms {
	position: absolute;
	bottom: 131px;
	left: 50%;
	transform: translateX(-50%);
}

#logo {
	position: absolute;
	top: 20px;
	left: 45px;
	width: 8vh;
	visibility: hidden;
	opacity: 0.9;
}

#fpsCounter {
	position: absolute;
	top: 30px;
	right: 45px;
	color: deeppink;
	visibility: hidden;
}

#myCanvas {
	display: block;
	height: 100dvh;
	aspect-ratio: 9/16;
}

#chat_bar {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	width: 85vw;
	max-width: 85%;
	visibility: hidden;
}

#chat_line {
	font-family: 'VAG';
	font-size: 23px;
	color: white;
	font-weight: bold;
	-webkit-backdrop-filter: blur(10px); /* for iOS Safari */
	backdrop-filter: blur(10px);
	width: fit-content;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 25px;
	background-color: rgba(255, 255, 255, 0.45);
	margin: 0 auto;
	margin-bottom: 15px;
	visibility: hidden;
}

#text_box {
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
	padding-left: 24px;
	padding-right: 70px;
	padding-bottom: 12px;
	font-family: 'VAG';
	font-size: 27px;
	font-weight: bold;
	color: #00d7df;
	border: none;
	outline: none;
	border-radius: 55px 55px 55px 15px;
}

#send_button {
	position: absolute;
	bottom: 9px;
	right: 20px;
	cursor: pointer;
}

.nohighlight {
	user-select: none; /* Prevents the text from being selectable */
	-webkit-user-select: none; /* Prevent text selection on Safari */
	-webkit-tap-highlight-color: transparent; /* Disable tap highlight on iOS */
}