style.css

body { background-color: #333333; font-size: 11pt; font-family: Tahoma; color: white; margin: 0; padding: 0 5px }
figure { background-repeat: no-repeat;  background-position: top; background-position-y: 25px; background-size: auto 40%; cursor: pointer; margin: 0; display: inline-block; width: 160; height: 160; font-size: 8pt; font-family: Tahoma; vertical-align: top; transition: transform 0.3s ease; text-align: center; background-color: #333333; position: relative }
figcaption { display: block; line-height: 1.2em; max-height: 3.6em; overflow: hidden; background-color: #333333; -webkit-mask-image: linear-gradient(to bottom, black 2em, transparent 3.6em); mask-image: linear-gradient(to bottom, black 2em, transparent 3.6em); transition: max-height 0.5s ease, -webkit-mask-image 0.5s ease, mask-image 0.5s ease }
img    { width: 160px; height: 120px; object-fit: contain; background-color: #333333; opacity: 0; transition: 1s ease-in; padding: 5px }
img.loaded { opacity: 1; }
figure:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(0, 0, 0, 1); z-index: 10 }
figure:hover figcaption { max-height: 20em; -webkit-mask-image: linear-gradient(to bottom, black 100%, transparent 100%); mask-image: linear-gradient(to bottom, black 100%, transparent 100%) }
figure:active { transform: scale(1.1) translateY(10px) translateX(10px) }
#topbar { position: fixed; top: 0; left: 0; width: 100%; background-color: #333333; z-index: 999; padding: 5px 0 10px 0; }
#filterBar { position: sticky; top: 0; background-color: #333333; z-index: 999; padding: 5px; }
a { color: cyan; text-decoration: none }
.section-header { color: white; font-size: 14pt; margin: 0 0 3px 0 }
.navlink { display: inline-block; margin: 2px 5px; padding: 3px 8px; background-color: #555; color: cyan; border-radius: 4px; font-size: 10pt }
.navlink small { color: white }
.navlink:hover { background-color: #777 }
#navlinks { margin-top: 3px; clear: left }
/* Platform pages render only the rows on screen (script.js): .figureList is
   sized to the whole list and .figureRows holds the visible rows. */
.figureList { position: relative }
.figureRows { position: absolute; left: 0; right: 0; display: grid; column-gap: 4px }