#interface{
	height: 100vh;
	overflow: clip;
	display: grid;
	/*grid-template-areas: "top top top" "sidebar story connections" "sidebar story npcs" "sidebar actions npcs";*/
	grid-template-areas: "top top top" "sidebar story connectionsAndNPCs" "sidebar actions npcs";
	grid-template-columns: 15em 1fr 15em;
	grid-template-rows: 2em 1fr auto;
}

#actions{
	grid-area:actions;
}

#connectionsAndNPCs{
	grid-area: connectionsAndNPCs;
	overflow: auto;
}

#passages{
	grid-area: story;
	overflow: clip auto;
	display: grid;
	grid-template-columns: auto minmax(30em, 54em) auto;
	grid-template-areas:
		". story .";
}

#passages .passage{
	grid-area: story;
	background: rgba(20, 20, 20, 0.5);
		padding: 0.3em 1em;
}

#sidebar{
	grid-area: sidebar;
	overflow: auto;
	background: rgba(20, 20, 20, 0.5);
	padding: 0em 0.3em;
}

#topbar{
	grid-area: top;
}

button{
	background: #111;
	border: solid 1px #333;
}

button:hover {
	background: #333;
	border: solid 1px #555;
}

button.disabled{
	background: #999;
	border: solid 1px #333;
	cursor:not-allowed;
}

button.disabled:hover {
	background: #f99;
	border: solid 1px #933;
}

#topbar{
	display: grid;
	grid-template-areas: "characterStats buttons";
	grid-template-columns: 1fr auto;
}

#topbar .buttons{
	grid-area: buttons;
	display: grid;
	grid-template-columns: repeat(10, max-content);
}

#topbar .buttons button{
	width: 2em;
	height: 2em;
	padding: 0;
}

@media(max-width: 1279px) {


	#interface{
		height: initial;
		grid-template-columns: auto;
		grid-template-areas: "story" "actions" "connectionsAndNPCs" "sidebar";
		margin-left: 2em;
		grid-template-rows: unset;
	}

	#passages{
		display: block;
		height: unset;
		overflow: unset;
	}

	#topbar{
		grid-template-areas:
				"characterStats"
				"buttons";
		grid-template-rows: 1fr auto;
		position: fixed;
		left:0;
	}

	#topbar .buttons{
		grid-template-columns: auto;
	}
}