html,
body {
	height: 100vh;
}

body {
	display: flex;
	overflow: hidden;
}

aside,
.wrapper {
	box-sizing: border-box;
}

.wrapper {
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: auto;
	position: relative;

	& > [class^="msg-"] + [class^="msg-"] {
		margin-top: 0;
	}

	& > .debug-output {
		flex-shrink: 0;
	}

	& > output {
		box-sizing: border-box;
		min-width: 1200px;
	}
}

header,
footer {
	flex-shrink: 0;
	min-width: 1200px;
}

main {
	position: relative;
	min-width: 1200px;
	padding: 10px;

	> .container:not(:first-of-type) {
		margin-top: 10px;
	}
}

footer {
	margin-top: auto;
}

output {
	display: block;
}

.container {
	background: $ui-bg-color;
}
