/*\

layout

\*/

html {
	width:100%;
	height:100%;
}
body {
	display:flex;
	flex-direction:column;
}
nav {
	width:19em;
}
body > nav:first-of-type {
	overflow:hidden;
	flex-grow:0;
	flex-shrink:0;
}
body > nav:not(:first-of-type) {
	display:flex;
	flex-direction:column;
	/**/
	overflow:auto;
	flex-grow:0;
	flex-shrink:1;
}
main {
	display:flex;
	flex-direction:column;
	/**/
	overflow:auto;
	flex-grow:0;
	flex-shrink:1;
}
aside {
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	/**/
	width:19em;
	/**/
	box-sizing:border-box;
	padding:0.25em;
	/**/
	overflow:auto;
	flex-grow:1;
	flex-shrink:1;
}
body > aside > [data-module] {
	width:100%;
	border-radius:0 1em 0 0;
	/**/
	overflow:hidden;
	flex-grow:0;
	flex-shrink:0;
}
body > footer {
	display:flex;
	justify-content:space-between;
	align-items:center;
	/**/
	width:19em;
	min-height:1em;
	border-radius:0 1em 0 0;
	/**/
	box-sizing:border-box;
	padding:0.25em;
}
body > footer > a {
	display:inline-block;
	vertical-align:middle;
}

/*\

gallery

\*/

.gallery {
	width:19em;
	height:100%;
}
.gallery > nav:not(:first-of-type) {
	margin-top:-1em;
}
.gallery > main {
	position:absolute;
	left:19em;
	top:0;
	/**/
	display:inline-block;
	/**/
	width:auto;
	height:100%;
	/**/
	box-sizing:border-box;
	padding:0.5em;
	/**/
	white-space:nowrap;
}
@media (min-height:900px) {
	.gallery > main {
		top:50%;
		height:900px;
		transform:translateY(-50%);
	}
}
.gallery > main > section {
	display:inline-block;
	vertical-align:middle;
	/**/
	width:auto;
	height:100%;
	/**/
	box-sizing:border-box;
	padding:0.25em;
	border-radius:1em;
	/**/
	overflow:hidden;
}
.gallery > main > section > header {
	margin:0 0.5em;
}
.gallery > main > section > article {
	position:relative;
	top:1.5em;
	/**/
	display:inline-block;
	vertical-align:middle;
	/**/
	width:12em;
	height:calc(100% - 4em);
	/**/
	box-sizing:border-box;
	padding:0 0.75em;
	border-radius:0.75em 0 0 0.75em;
	/**/
	margin-left:-1.5em;
	/**/
	overflow:hidden;
	/**/
	transform-origin:left;
	transform:skewY(-12.5deg);
}
.gallery > main > section > article:first-of-type {
	margin-left:initial;
}
.gallery > main > section > article > header {
	margin:0.25em;
}
.gallery > main > section > article > header > a {
	display:block;
}
.gallery > main > section > article > nav {
	display:none;
}
/*\
\*/
.gallery > main > section > article > nav > a {
	display:inline-block;
	vertical-align:top;
	/**/
	width:12em;
	height:100%;
	/**/
	margin-right:-11.75em;
	/**/
	transform-origin:left;
	transform:skewY(-15deg);
	/**/
	color:transparent;
	/**/
	border-radius:1em 0 0 1em;
	border-style:none none none solid;
	border-width:1px;
	border-color:rgb(102,104,106);
}
.gallery > main > section > article > aside > nav > a:first-of-type {
	margin-left:initial;
}
.gallery > main > section > article > aside > nav > a:nth-last-child(n+9) {
	display:none;
}
/*\
\*/
.gallery > main > section > article > div {
	height:calc(100% - 2.5em);
	/**/
	overflow:hidden;
	border-radius:0.75em 0 0 0.75em;
}
.gallery > main > section > article > div > * {
	max-height:100%;
	/**/
	overflow:hidden;
	pointer-events:none;
}
.gallery > main > section > article > div > nav {
}
.gallery > main > section > article > div > nav > a {
	border-radius:1em 0 0 0;
	box-shadow:0 0 0.25em 0.1em rgb(58,60,62);
}
.gallery > main > section > article > div > a[data-module] {
	height:calc(100% - 1.5em);
	margin:1.5em 0 0 1em;
	/**/
	box-sizing:border-box;
	padding:1em 0.5em;
	/**/
	border-radius:0.5em 0 0 0;
	box-shadow:0 0 0.25em 0.1em rgb(49,51,53);
	background-color:rgb(34,36,38);
	background-color:rgb(66,68,70);
}
.gallery > main > section > article > a.hitbox {
	position:absolute;
	left:0;
	bottom:0;
	/**/
	display:block;
	width:100%;
	height:calc(100% - 2.5em);
	/**/
	background-color:transparent;
}
.gallery > footer > a,
.gallery > footer > button {
	display:none;
}

/*\

focus

\*/

body:not(.gallery) {
	width:19em;
	height:100%;
}
body:not(.gallery) > nav {
	position:relative;
	left:0;
	z-index:2;
}
body:not(.gallery) > nav:not(:first-of-type) {
	display:none;
}
body:not(.gallery) > main {
	position:relative;
	left:0;
	margin-top:-1em;
}
body:not(.gallery) > main > section:not(.focus) {
	display:none;
}
section.focus > header {
	display:none;
}
section.focus > article:not(.focus) {
	display:none;
}
article.focus > header {
	position:relative;
	z-index:2;
	/**/
	height:3.5em;
}
article.focus > nav {
	position:relative;
	z-index:2;
	/**/
	margin-top:-1em;
	/**/
	overflow:auto;
	flex-shrink:1;
}
article.focus > nav > a {
	border-radius:0 1em 0 0;
}
article.focus > div {
	position:fixed;
	right:0;
	top:0;
	
	/*transform:translateY(-50%);*/
	width:100vw;
	height:100vh;
	/**/
	box-sizing:border-box;
	border-radius:0.75em;
	/**/
	/*transition:width .5s ease;*/
}
@media (min-width:900px) {
	body:not(.gallery):not(.menu) article.focus > div {
		width:calc(100vw - (20em));
	}
}
article.focus > a.hitbox {
	display:none;
}
body:not(.gallery) > aside {
	position:relative;
	left:0;
	z-index:2;
	/**/
	box-sizing:border-box;
	padding-bottom:3em;
}
body:not(.gallery) > footer {
	position:fixed;
	left:0;
	bottom:0;
	z-index:2;
}

/*\

menu

\*/

@media (max-width:900px) {
	body:not(.gallery) article.focus > div {
		height:calc(100% - 3em);
	}
	body:not(.gallery) > footer {
		width:100vw;
	}
	body:not(.gallery).menu > nav,
	body:not(.gallery).menu > main,
	body:not(.gallery).menu > aside {
		left:0;
	}
	body:not(.gallery):not(.menu) > nav,
	body:not(.gallery):not(.menu) > main,
	body:not(.gallery):not(.menu) > aside {
		left:-19em;
	}
}
@media (min-width:900px) {
	body:not(.gallery).menu > nav,
	body:not(.gallery).menu > main,
	body:not(.gallery).menu > aside {
		left:-19em;
		/*height:calc(100% - 3em);*/
	}
}

/*\

dataloader

\*/

article > div {
	overflow:auto;
}
article > div > img,
article > div > object,
article > div > iframe,
article > div > pre,
article > div > code,
article > div > div {
	display:inline-block;
	vertical-align:middle;
	/**/
	width:auto;
	height:auto;
}
article > div > a {
	display:block;
	height:100%;
}
article.focus > div > img,
article.focus > div > object[data$='.svg'] {
	max-width:100%;
}
article.focus > div > *:not(img) {
	min-width:100%;
	min-height:100%;
}
article.focus > div > audio {
	height:100%;
}
.gallery article > div > object,
.gallery article > div > iframe,
.gallery article > div > pre,
.gallery article > div > code {
	min-height:100%;
	max-height:100%;
}
article > div > .terminal {
	width:20em;
	/**/
	box-sizing:border-box;
	padding:1em;
}