body
{
	display: flex;
	flex-flow: column;
	min-height: 100vh;
	/*background-color: #ececec;*/
}

main
{
	display: flex;
	/*flex: 1;*/
	flex-grow: 1;
}

aside
{
	transition-duration: 0.5s;
	/*max-width: 250px;*/
	color: white;
	background-color: var(--streameta-color);
	padding: 20px;
	padding-right: 10px;
	white-space: nowrap;
	overflow: hidden;
}

aside a
{
	color: white;
	cursor: pointer;
}

aside .fa-discord
{
	display: block;
	/*padding: 5px;*/
	margin-bottom: 10px;
}

aside .fa-discord:hover
{
	text-decoration: underline;
}

aside .fa-discord::before
{
	margin-right: 5px;
	vertical-align: middle;
}

aside h1
{
	margin-top: 0;
}

aside>ol
{
	margin: 0;
	padding: 0;
	display: inline-block;
	/*font-size: 14px;*/
}

/*aside ol
{
	counter-reset: item;
}

aside ol>li::before
{
	content: counters(item, ".");
	counter-increment: item;
	margin-right: 5px;
}*/

aside ol>li>a
{
	margin-left: 10px;
}

.branch
{
	margin-left: 0;
}

.branch::before
{
	content: "\f105";
	margin-right: 5px;
	display: inline-block;
	transition: 0.25s;
}

.show>.branch::before
{
	transform: rotate(90deg);
}

aside ol>li>a>span
{
	margin-right: 5px;
}

ol ol
{
	padding-left: 20px;
	overflow: hidden;
	transition: 0.5s;
}

li:not(.show)>ol
{
	height: 0 !important;
	/*max-height: 0;*/
}

.show>ol
{
	/*height: auto;*/
	/*max-height: 450px;*/
}

.prevNext
{
	display: flex;
	justify-content: space-between;
	margin: 17px;
	margin-right: 0;
	margin-left: 31px;
}

.prevNext a
{
	background-color: var(--streameta-color);
	padding: 10px;
	color: white;
}

.next
{
	margin-left: auto;
}

.prev::before
{
	/*content: "\f053";*/
	/*content: "\f060";*/
	/*content: "\f137";*/
	content: "\f0a8";
	margin-right: 5px;
}

.next::after
{
	/*content: "\f054";*/
	/*content: "\f061";*/
	/*content: "\f138";*/
	content: "\f0a9";
	margin-left: 4px;
}

article
{
	padding: 0 20px;
	position: relative;
	flex: 1;
}

article img
{
	max-width: 100%;
	padding-left: 30px;
	padding-right: 30px;
	box-sizing: border-box;
}

iframe
{
	max-width: 100%;
	width: 640px;
	height: 360px;
	margin-left: 30px;
	margin-right: 30px;
}

h2
{
	font-size: 1.35em;
}

p
{
	margin-left: 20px;
}

/*.example::before
{
	content: "eg. ";
}

.example
{
	font-style: italic;
}*/

.example
{
	margin-left: 20px;
}

ul
{
	margin-left: 20px;
	margin-top: 5px;
}

code
{
	display: block;
	margin: 10px;
	margin-left: 40px;
	padding: 15px;
	border-left: 3px solid var(--streameta-color);
	background-color: #eeeeee;
	word-wrap: break-word;
	white-space: pre-wrap;
	tab-size: 4;
	font-family: 'Roboto Mono', monospace !important;
	font-weight: 300;
}

section, section section section, section section section section section, section section section section section section section, section section section section section section section section section,
code, section section code
{
	/*background-color: #f6f6f6;*/
	background-color: #323232;
	margin: 10px 0;
	margin-left: 30px;
	padding: 10px;
	border-left: 3px solid var(--streameta-color);
}

/*section section
{
	background-color: #f0f0f0;
}

section section section
{
	background-color: #f6f6f6;
}

section section section section
{
	background-color: white;
}*/

section section,
section section section section,
section section section section section section,
section section section section section section section section,
section section section section section section section section section section,
section code,
section section section code
{
	/*background-color: #ececec;*/
	background-color: #3b3b3b;
}

.closed
{
	width: 0 !important;
	/*max-width: 0;*/
	padding-left: 0;
	padding-right: 0;
}

/*.closed>*
{
	display: none;
}*/

.index
{
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--streameta-color);
	padding: 10px;
	padding-top: 25px;
	color: white;
}

.index::before
{
	content: "\f053";
}

.closed+article .index::before
{
	content: "\f054";
}