@import "/base.css";
@import "/iframe.css";

body {
	width: 100vw;
	background-color: #000000;
}

button {
	all: unset;
	-webkit-user-select: none;
	user-select: none;
	outline: revert;
	cursor: pointer;
	touch-action: manipulation;

	font-family: IBM_Model3x, Courier, monospace;
	background-color: white;
	padding: 0.25em;
	border-radius: 0;
	overflow: hidden;
	white-space: nowrap;
}
button:hover {
	background-color: lightgray;
}

#buttons {
	font-size: 1rem;
	height: 2rem;
	position: absolute;
	bottom: 0.2rem;
	left: 0;
	margin: 0 auto;
	width: 100%;
	justify-content: center;
	z-index: 9999;
	display: flex;
	gap: 0.2rem;
}

nav {
	position: absolute;
	top: 0; right: 0; left: 0;
	width:  fit-content;
	height: fit-content;
	font-size: 1rem;
	margin: 0 auto;
	z-index: 200;
	display: flex;
	justify-content: center;
	column-gap: 1em;
	flex-wrap: wrap;
	background-color: #00000080;
}

nav > a {
	color: white;
}
nav > a:visited {
	color: white;
}

nav > a:hover {
	color: lightgray;
}

#main-container {
	position: absolute;
	top: 2.2rem;
	bottom: 2.2rem;
	left: 0; right: 0;
	margin: 0 auto;
	width: 60%;
	z-index: 100;
	overflow-y: auto;
	overflow-x: hidden;
	background-color: #00000080;
	padding: 0.5em;
}

@media (max-width: 1250px) {
	#main-container {
		width: 90%;
	}
}

#main-container::-webkit-scrollbar {
	width: 6px;
}

#main-container::-webkit-scrollbar-track {
	background: #ffffff20;
}

#main-container::-webkit-scrollbar-thumb {
	background: #ffffffc0;
	/*border-radius: 16px;*/
}

#main {
	padding: 0;
	width: 100%;
	height: fit-content;
	margin: 0 auto;
}
/* NOTE: Canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten {
	z-index: 0;
	border: 0px none;
	background: black;
	padding: 0;
	position: fixed;
	top: 0; left: 0;
	pointer-events: none;
	outline: none;
}