body {
 margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden; /* optional, if you don’t want scrollbars */
	background: #132;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
}
canvas {
	background: #444;
	image-rendering: pixelated;
	cursor: pointer;
	display: block;   /* removes inline spacing */
	margin: 0;
	padding: 0;
	border: none;
}
.right{
	float: right;
}
.panel {
	background: #33554488;
	color: #fff;
	padding: 12px;
	padding-top: 0px;
	width: 360px;   
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.5);
	margin-bottom: 2px;
}
.panel h1 {
	margin: 6px;
}
.panel h2 {
	margin: 2px;
}
.panel h3 {
	margin: 6px;
}
.panel h4 {
	margin: 6px;
}

.sprite {
	background-image: url('grimtile.png');
	background-repeat: no-repeat;
	position: absolute;
	top: 10px;
	right: 30px;
}

.sprite.grimbo {
	width: 48px;
	height: 72px;
	background-position: -720px -144px;
}

.panel table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 2px;
}
.panel th,
.panel td {
	border: 1px solid #243;
	background: #00000055;
	padding: 6px 10px;
	text-align: left;
}

.panel th {
	background: #33554455;
	font-weight: bold;
}
.panel a {
  color: #BBFFDD;        /* default link color */
  text-decoration: none; /* removes underline */
  font-weight: bold;
}

.panel a:hover {
  color: #FFEEDD;        /* highlight color */
  text-decoration: underline;
}

.panel a:visited {
  color: #BBFFDD;
}

/* Active link (while clicking) */
.panel a:active {
  color: #FFEEDD;
}
.left-panels {
	position: absolute;
	top: 20px;
	left: 20px;
	display: flex;
	flex-direction: column;
	align-items: stretch; 
}
.right-panels {
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	align-items: stretch; 
}

.buttons {
	display: flex;
	gap: 3px;
	justify-content: center;
	 margin-bottom: 2px;
}

.wide{
	flex: 0 0 66%;
	background: #00000033;
	color: #fff;
	padding: 6px;
	border-radius: 6px;
}
.descBox{
	background: #00000088;
	color: #fff;
	padding: 6px;
	border-radius: 6px;
	height:300px;
}

.panel button {
	width: 33%;
	background: #465;
	border: none;
	color: #fff;
	padding: 6px 2px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s;
	pointer-events: auto;
}
input[type="text"]{
	width: 75%;
	background: #00000088;
	border: 0px;
	color: #fff;
	padding: 6px 8px;
	border-radius: 6px;
	cursor: pointer;
	pointer-events: auto;
}

.panel button:hover {
	background: #576;
}
.panel button.active {
	background: #0a8;
}