* {
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-pixelated;
	image-rendering: pixelated;
}

html,body{margin:0;height:100%;} /* let's keep the default fonts */

body,nav {
	display: flex;
	flex-direction: column;
}

body {
	background-image: url(/result.gif);
}

nav {
	background-color: rgba(0,0,0,0.12);
	backdrop-filter: blur(3.5px);
	flex-shrink: 0;
	padding: 8px;
	gap: 8px;
	--nSize: 16px;
	font: var(--nSize) sans-serif;
}

nav * {margin:0;padding:0;white-space:normal;word-wrap:break-word;}

nav h1 {
	text-align: center;
}

nav ul {font-size: 0;}

nav ul li {
	display: inline;
	font-size: var(--nSize);
}

nav ul li::before {
	content: "\2022";
	margin: 0 0.5em;
}

nav ul li:first-child::before {content:none;}

nav p{text-align:right;}

div#main {height:100%;flex-shrink:1;overflow:auto;max-height:100%;max-width:100%;padding:8px;}

div.gallery {
	border-radius: 32px;
	display: flex;
	flex-direction: row;
	padding: 16px;
	gap: 16px;
	background-color: rgba(0,0,0,0.3);
	margin: 0 auto;
	border: 4px dashed Black;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

div.gallery > img {
	border-radius: 16px;
	width: calc(calc(100% - 32px) / 3);
	-ms-interpolation-mode: bicubic;
	image-rendering: auto;
	image-rendering: -webkit-optimize-quality;
	image-rendering: -moz-auto;
	image-rendering: -o-auto;
}

@media (max-width: 761px) {
	div.gallery {margin:0 8px;}
	div.gallery > img {width: 100%;}
}