html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

html, body { margin: 0; height: 100%; overflow: hidden; }
.env {
	height: 100%;
}
.env h1 { padding: 0 1rem; margin: 0; }
.env h1 button { font: inherit; margin: 0 -1rem; }
.env p { padding: 0 1em; }
.env-menu { list-style: none; margin: 0; padding: 0; }
.env-flex, .env-bar { display: flex; width: 100%; }
.env-bar { flex-shrink: 0; }
.env-bar button { line-height: 2em; padding: 0 1rem; }
.env-bar > :first-child { flex-grow: 1; }
button.env-side-opener, .env-side-opener button {
	border: 0;
	cursor: pointer;
	min-width: 2.8rem;
	text-align: left;
}
button.env-side-opener:after, .env-side-opener button:after {
	content: "≡";
}
.env-side-tint {
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	visibility: hidden;
	transition: background-color 300ms, visibility 300ms;
}
.env-side-tint-on { visibility: visible; }
.env-side {
	position: absolute;
	max-width: 80%;
	height: 100%;
	flex-shrink: 0;
}
.env-side-content {
	white-space: nowrap;
	position: relative;
}
.env-side-left { right: 100%; }

.env-side-left.env-side-closed .env-side-content {
	right: 100%;
}
.env-side-left.env-side-open .env-side-content {
	left: 0;
}
.env-page {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.env-scroll {
	overflow: auto;
}
.env-scroll-bottom {
	padding-bottom: 2em;
}

.env-side-left .env-side-content {
  left: 0;
  transition: left 300ms cubic-bezier(.4,0,.2,1);
}
.env-side-left.env-side-open .env-side-content { left: 100%; }

.env-menu a, .env-menu .a {
	text-decoration: none;
	display: block;
	padding: 0 1rem;
}

.env-theme-dark { background: #000; color: #fff; }
/*.env-theme-dark a { color: #0f0; }*/
/*.env-theme-dark button { background: 0; }*/
/*.env-theme-dark a:hover, .env-theme-dark a:focus,*/
/*.env-theme-dark button:hover, .env-theme-dark button:focus*/
	/*{ background: #040; }*/
/*.env-theme-dark a:active { background: #030; }*/
.env-theme-dark .env-side-tint-on {
	background-color: rgba(0,0,0,.8);
}
.env-theme-dark .env-side-content {
	background: #000;
}

@media screen and (min-width: 50em){
	.env { display: flex; }
	[data-env-side-open=env-side] { display: none; }
	.env-side-left, .env-side-content
		{ position: static; order: 0; }
	.env-page { flex-grow: 1; }
}