@font-face {
	font-family: 'Noto Mono';
	font-style: normal;
	font-weight: normal;
	src: url('fonts/Noto-Mono.woff2') format('woff2');
}

div.project {
	display: flex;
	flex-flow: column wrap;
	padding: .75em 0;
}

div.project > div.names {
	background-color: #333;
	border-radius: .375em .375em 0 0;
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	margin: 0 .375em 0 .5em;
	overflow: hidden;
	padding: .375em;
}

div.project > div.names > input {
	background-color: #333;
	border: none;
	color: #999;
	cursor: pointer;
	display: inline-block;
	flex: 0 0 auto;
	font-family: inherit;
	font-size: 1em;
	line-height: 1em;
	padding: .375em .75em;
	text-decoration: underline;
	-webkit-user-select: none;
	user-select: none;
}

div.project > div.names > input.show {
	color: #fff;
	cursor: default;
	text-decoration: none;
}

div.project > div.code:not(.show) {
	display: none;
}

div.code {
	background-color: #222;
	border-left: .5em solid #6d47b2;
	border-radius: .5em .375em .375em .5em;
	color: #9d66ff;
	display: inline-block;
	font-family: 'Noto Mono', monospace;
	font-size: 1rem;
	line-height: 1.5em;
	padding: 1.5em;
}

div.code > div {
	padding-left: 1.5em;
	tab-size: 1.5em;
	text-indent: -1.5em;
	white-space: pre-wrap;
}

div.code > div.i1 { padding-left: 3em; }
div.code > div.i2 { padding-left: 4.5em; }
div.code > div.i3 { padding-left: 6em; }

div.code > div > i {
	display: inline-block;
	width: 0;
}

div.code span.group {
	white-space: pre;
}

div.code span.key {
	color: #59b3ff;
}

div.code span.value {
	color: #66feef;
}

div.code span.comment {
	color: #ddd;
}

div.code > div > a[href] {
	color: inherit;
}