body {
	background-color: #181818;
}
	
:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
}

html, body, #canvas {
	border: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
    font-family: "Ubuntu";
}

body {
	position: fixed;
    width: 100%;
    height: 100%;
}

#status-container {
	color: #FFFFFF;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 48pt;
	font-family: sans-serif;
	font-weight: bold;
	cursor: default;
	text-align: center;
    user-select: none;
}

#status-container small {
	font-size: 50%;
}

#canvas {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	width: 100dvw;
	height: 100dvh;
	cursor: default;
}

#canvas[data-fake-landscape="true"], #textInputContainer[data-fake-landscape="true"] {
	width: 100vh;
	height: 100vw;
	width: 100dvh;
	height: 100dvw;
	transform: translate(100vw, 0px) rotate(90deg);
	transform: translate(100dvw, 0px) rotate(90deg);
	transform-origin: left top;
}

@font-face {
    font-family: "Ubuntu";
	font-style: bold;
	font-weight: 700;
    src: url('https://fonts.googleapis.com/css?family=Ubuntu:700');
}