* {
	font-family: 'Work Sans', 'Roboto', 'Arial', 'sans-serif';
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	background-color: #111;
}

body, html {
	height: 100%;
	font-family: Arial, sans-serif;
}

.container {
	display: flex;
	height: 100vh;
}

main {
	flex: 1;
	display: flex;
	flex-direction: column;

	.main-container {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		align-self: stretch;

		.top-content {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			align-self: stretch;
			background: gold;
			padding: 20px;

			h1 {
				flex: 1;
				color: white;
				font-weight: normal;
			}
		}

		.bottom-content {
			display: flex;
			flex-direction: row;
			align-self: stretch;
			justify-content: flex-start;
			align-items: flex-start;
			flex: 1;
			overflow-y: auto;

			.page-content {
				flex: 2;
				overflow-y: auto;
				padding: 20px;
				background: $layoutBackground;
				display: flex;
				flex-direction: column;
				align-self: stretch;
			}

			.page-panel {
				flex: 1;
				overflow-y: auto;
				padding: 20px;
				align-self: stretch;
				background-color: transparent;
				background: $layoutBackground;

				&.left-panel {
					border-right: $layoutBorder;
				}

				&.right-panel {
					border-left: $layoutBorder;
				}
			}
		}


	}
}