* {
	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: 1;
		overflow: hidden; /* Prevent main-container from overflowing */

		.main-content {
			flex: 2;
			overflow-y: auto;
			padding: 20px;
			background: $layoutBackground;
		}

		.left-panel {
			flex: 1;
			overflow-y: auto;
			padding: 20px;
			background-color: transparent;
			border-right: $layoutBorder;
			background: $layoutBackground;
		}

		.right-panel {
			flex: 1;
			overflow-y: auto;
			padding: 20px;
			background-color: transparent;
			border-left: $layoutBorder;
			background: $layoutBackground;
		}
	}
}