:root {
	--bg-panel: rgba(0, 0, 0, 0.4);
	--icon-normal: #fff;
	--icon-hover: #c4c4c4;
	--icon-active: #aaaaaa;
	
	--img-opacity-normal: 1;
	--img-opacity-hover: 0.8;
	--img-opacity-active: 0.6;
}

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
body {
	z-index: 1;
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}

.github-corner {
	opacity: 0.4;
}
.github-corner:hover {
	opacity: 1;
}

#wrapper {
	height: 100%;
	display: grid;
	place-items: center center;
}
.itemlist, .folder.active > span {
	/* place-content: center center; */
	/* justify-self: center;
	align-self: center; */
	
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	
	margin: 0.1em;
	max-width: 4em;
	
	border-radius: 0.15em;
	background-color: var(--bg-panel);
	font-size: 4em;
	line-height: 1.25em;
}
.itemlist > *, .folder.active > span > * {
	flex-basis: calc(50% - 30px);
	
	
	/* margin: 0 auto; */
	
	vertical-align: middle;
}
@media only screen and (min-width: 600px) {
	.itemlist, .folder.active > span { max-width: 6em; }
	.itemlist > *, .folder.active > span > * {
		flex-basis: calc(33.333% - 30px); /* 3 items per row */
		/* grid-template-columns: repeat(3, 1fr); */
	}
}
@media only screen and (min-width: 800px) {
	.itemlist, .folder.active > span { max-width: 12em; }
	.itemlist > *, .folder.active > span > * {
		flex-basis: calc(16.666% - 30px); /* 6 items per row */
		/* grid-template-columns: repeat(6, 1fr); */
	}
}

/* link colors */
.itemlist a {
	padding: 0.25em;
	color: var(--icon-normal);
	text-align: center;
	align-self: center;
	
	transition: color 0.25s;
}
.itemlist > a:hover, .folder.active > span > a:hover {
	color: var(--icon-hover);
}
.itemlist > a:hover img, .folder.active > span > a:hover img {
	opacity: var(--img-opacity-hover);
}
.itemlist > a:active,
.folder.active a:active	{ color: var(--icon-active); }
.itemlist > a:active img, .folder.active > span > a:active img {
	opacity: var(--img-opacity-active);
}
.itemlist a img {
	max-width: 1em;
	max-height: 1em;
	opacity: var(--img-opacity-normal);
	transition: opacity 0.25s;
}


.folder {
	margin: 0.25em;
	transition: background 0.5s;
}

.folder > span {
	height: 3em;
	
	display: grid;
	grid-template: 50% 50% / 50% 50%;
	place-items: center center;
	/* grid-template: 50% 50% / 50% 50%; */
	overflow: hidden;
	font-size: 0.5em;
	line-height: 0em;

	background: var(--bg-panel);
	border-radius: 0.25em;

	cursor: pointer;
	transition: all 0.25s;
}

.folder:not(.active) > span > a	{ padding: 0;	}
.folder > span > a:only-child {
	grid-row: 1 / span 2;
	grid-column: 1 / span 2;
	font-size: 2.75em;
}

.folder.active {
	position: fixed;
	top: 0; bottom: 0; left: 0; right: 0;
	margin: 0;
	background: rgba(200, 200, 200, 0.5);
	
	display: grid;
	place-items: center center;
}
.folder.active > span {
	padding: 0.5em;
	
	
	grid-template: auto / repeat(6, 1fr);
	
	font-size: 1.25em;
	line-height: 1.25em;
}