* {
	box-sizing: border-box;
	font-family: 'c64-pro-mono';
	font-size: 0.95em;
	line-height: 1.1;
}

body {
	height: calc(100vh - 4rem);
	background: #6c5eb5;
	margin: 2rem;
}

body {
	display: grid;
	grid-template-areas: 'header header' 'main main' 'footer footer';
	grid-template-columns: minmax(auto, 15em) 5fr;
	grid-template-rows: auto 1fr auto;
}

header {
	grid-area: header;
}

footer {
	grid-area: footer;
	text-align: right;
}

nav {
	grid-area: nav;
	background: #352879;
	color: #9a91cc;
}

.ace {
	grid-area: main;
	overflow: hidden;
	background: #6c5eb5;
	margin-right: 1em;
	margin-left: 1rem;
}

.ace iframe {
	position: relative;
	border: 0px;
	overflow: hidden;
	background: #6c5eb5;
	width: 100%;
	height: 100%;
}

.col40 {
}

.col60 {
	transform: scale(0.75, 1);
	transform-origin: 0% 50%;
	width: calc(100% * (1 / 0.75)) !important;
}

.col80 {
	transform: scale(0.5, 1);
	transform-origin: 0% 50%;
	width: calc(100% * (1 / 0.5)) !important;
}

nav {
	border-right: 4px solid #6c5eb5;
	padding-left: 0.8rem;
}

nav,
article {
	overflow: auto;
}

header,
footer {
	color: #9a91cc;
	cursor: default;
	padding: 0.8rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	transform: scale(0.75, 1);
}

header {
	transform-origin: 0% 50%;
}

footer {
	transform-origin: 100% 50%;
}

footer span {
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.turned-on {
	color: #fff;
}