body { background-color:black;color:white; }
a { color:white;text-decoration:underline; }
nav { display:flex;align-items:flex-end;margin-bottom:10px }
nav a { padding:0  }
nav a:hover > img { background:black }
nav a img { display:block;width:100%;height:100px;image-rendering:pixelated }
nav ul { margin:0;padding:0;padding-left:10px }
nav ul li { list-style:none;font-weight:bold;padding:2px 4px 2px 4px }
nav ul li:has(> a) { padding:2px 0px 2px 0px !important }
nav ul li a { padding:2px 4px 2px 4px !important;font-weight:normal; }
a { padding:2px 4px 2px 4px;font-weight:normal }
a:hover { background-color:white;color:black; }
details { margin:10px }
details ul { display:flex;flex-wrap:wrap;margin:5px 0px 5px 5px;padding:0;list-style:none }
details ul li { padding:2px;font-weight:bold }
main { display:inline-flex;flex-wrap:wrap;width:100% }
main figure { width:33.3%;margin:0;padding:0 }
main figure a { display:block;padding:3%; }
main figure a:hover { background:white; }
main figure a img { display:block;max-width:100% }
main figcaption div { display:flex;justify-content:space-between;padding:0px 10px 5px 10px;border-bottom:1px dotted gray }
main figcaption > span { display:block;margin:8px 0px 30px 10px; }
footer { text-align:right;margin:30px 10px 50px 0px }
footer a { color:gray }
@media (min-width:800px) { 
	main figure { width:25% }
	main figure a { padding:1%; }
	
}
@media (min-width:1000px) { 
	main, footer { max-width:1000px }
	main figure { width:20% }
}