@font-face {
    font-family: "IBM Plex Sans";
    src: local("IBM Plex Sans"), url("/ttf/IBM_Plex_Sans/IBMPlexSans-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "IBM Plex Mono";
    src: local("IBM Plex Mono"), url("/ttf/IBM_Plex_Mono/IBMPlexMono-Medium.ttf") format("truetype");
}

body {
	background: #ffd;
	font-family: "IBM Plex Sans", 'Arial', 'Helvetica', sans-serif;
}

#item-grid {
	grid-area: igrid;
	padding: 0px;
	overflow: clip;
}

.grid-element {
	border: 2px inset #aa4;
	padding: 4px 10px;
}

#nmap {
	grid-area: nmap;
}

#wmap {
	grid-area: wmap;
}

#smap {
	grid-area: smap;
}

#emap {
	grid-area: emap;
}

#level-list {
	grid-area: lvlist;
	font-family: "IBM Plex Mono", 'Lucida Console', monospace;
}

ol .current {
	-webkit-text-stroke: 1px #a227;
}

#expanded-level {
	grid-area: exlevel;
}

#info {
	grid-area: info;
}

#options {
	grid-area: options;
}

.map img {
	display: block;
	margin: auto;
	image-rendering: pixelated;
}

.levelLocation {
	color: #0008;
}

#level-name, #level-location {
	text-align: center;
}

.greyLabel {
	text-shadow: 1px 1px 2px #888;
}

.redLabel {
	text-shadow: 1px 1px 2px red;
}

.greenLabel {
	text-shadow: 1px 1px 2px #471;
}

.blueLabel {
	text-shadow: 1px 1px 2px #36f;
}

.aside {
	font-size: .9em;
}

input[type="checkbox"] {
	margin-left: 3px;
	margin-right: 3px;
}

.grey {
	outline: 2px solid #888;
}

.red {
	outline: 2px solid red;
}

.green {
	outline: 2px solid #0a0;
}

.blue {
	outline: 2px solid #36f;
}