* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

body, html {
	width: 100%;
	height: 100%;

	font-family: sans-serif;
}

a, aside, button, body, div, nav, img {
	display: flex;
}

aside {
	position: fixed;

	left: 0;
	top: 0;

	height: 100vh;
}

a {
	text-decoration: none;
}

aside nav {
	flex-direction: column;
}

aside nav a {
	padding: 20px 0;
	transition: transform 500ms;
}

aside nav a:hover {
	transform: translate(10px, 0);
}

nav a {
	color: #000;
}

aside, div {
	flex-direction: column;
}

body {
	background: #ffff;
}

body {
	flex-direction: column;

	align-items: center;

	padding: 50px;
	gap: 50px;
}

button {
	border: 1px solid #0003;

	width: 100%;
	justify-content: center;

	background: #0000;
	padding: 10px;
	border-radius: 8px;
	font-size: 1em;

	cursor: pointer;
}

label .icon {
	cursor: pointer;

	/* Make icons easier to press on touch screens. */
	padding: 20px;
}

table {
	border: 1px solid #0002;
	padding: 20px;
}

.icon {
	/* Icons should not be selectable. */
	user-select: none;
}

.ltr {
	width: 100%;
	flex-direction: row;
}

.big-gap {
	gap: 30px;
}

.gap {
	gap: 10px;
}

.hidden {
	display: none;
}

.scroll {
	max-width: 600px;

	gap: 50px;
}

.scroll > :last-child {
	flex-grow: 1;
	flex-direction: column-reverse;
}

.post {
	padding: 10px 0;
	border-bottom: 1px solid #0002;
}

.when-posted {
	font-size: 0.8em;
	text-align: right;
}

.who-posted {
	font-style: italic;
	font-size: 1em;
	text-align: right;
}

.showoff-list {
	gap: 40px;
}

.showoff-list .showoff:nth-child(odd) {
	flex-direction: row-reverse;
}
.showoff-list .showoff {
	gap: 40px;

	flex-direction: row;
}

.showoff .huge-number {
	font-size: 3em;
}

.title {
	flex-direction: row;

	justify-content: center;
}

.title img {
	max-height: 200px;
	object-fit: contain;
}

.grid {
	display:grid;

  grid-template-columns: 300px 300px;
  grid-row: auto auto;

  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.grid > div {
	min-width: 300px;
	min-height: 300px;

	padding: 20px;
}

.content {
	flex-grow: 1;
}

.overlay {
	position: relative;
}
.overlay * {
	position: absolute;
	left: 0;
	top: 0;
}

.squeeze {
	position: relative;
}
.squeeze :first-child {
	opacity: 1;
}
.squeeze:active :first-child {
	opacity: 0;
}
.squeeze :last-child {
	position: absolute;
	left: 0;
	top: 0;

	opacity: 0;
}
.squeeze:active :last-child {
	opacity: 1;
}

aside {
	transition: background 500ms;
}

aside .dark {
	position: fixed;

	left: 0;
	top: 0;

	width: 100vw;
	height: 100vh;

	z-index: -1;

	transition: background 750ms;
}

aside > div {
	height: 100%;

	padding: 10px;
	gap: 60px;

	transition: background 250ms, box-shadow 250ms, max-width 750ms;
}

aside .menu {
	pointer-events: all;
}

aside .content {
	min-width: 400px;

	padding: 50px;

	transition: transform 500ms;
}

input:not(:checked) + aside .dark {
	background: #0000;

	pointer-events: none;
}

input:checked + aside .dark {
	background: #0007;

	pointer-events: all;
}

input:not(:checked) + aside > div {
	background: #0000;
	box-shadow: 5px 5px 100px 10px #0000;
	max-width: 50px;
}

input:checked + aside > div {
	background: #ffff;
	box-shadow: 5px 5px 100px 10px #0004;
	max-width: 400px;
}

input:not(:checked) + aside .content {
	transform: translate(-100%, 0);
}

input:checked + aside .content {
	transform: translate(-1%, 0);
}

aside .aside-closed {
	transition: transform 600ms, opacity 500ms;
}
input:checked + aside .aside-closed {
	opacity: 0;
	transform: rotate(245deg);
}
input:not(:checked) + aside .aside-closed {
	opacity: 1;
}

aside .aside-open {
	transition: transform 600ms, opacity 500ms;
}
input:checked + aside .aside-open {
	opacity: 1;
}
input:not(:checked) + aside .aside-open {
	opacity: 0;
	transform: rotate(-245deg);
}

@font-face {
  font-family: "icon";
  src: url("../font/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../font/glyphicons-halflings-regular.woff2") format("woff2"), url("../font/glyphicons-halflings-regular.woff") format("woff"), url("../font/glyphicons-halflings-regular.ttf") format("truetype"), url("../font/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}
.icon {
  font-family: "icon";
}

.icon-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 35px;
  text-shadow: 2px 2px 3px black, 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.icon-text:before {
	font-family: "icon";
	font-size: 132px;
}

.icon[name=play]:before,
.icon-text[name=play]:before {
  font-weight: normal;
  content: "";
}

@media screen and (max-width: 600px) {
	.grid {
		grid-template: none;
	}
}