p.sort
{
 text-align: right;
}
button#nameSort
{
 font-weight: bold;
}
span.spacer
{
 flex: 1;
}
.flexIndex
{
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: stretch;
 padding-top: 1em;
}
.flexIndex > .flexProd
{
 color: inherit;
 text-decoration: none;
 padding: 1em;
 margin-left: 0.5em;
 margin-right: 0.5em;
 margin-bottom: 1em;
 text-align: center;
 border: 1px solid;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 cursor: pointer;
}
.flexIndex > .flexProd > span > img:not(.supp)
{
 width: 48px;
 height: 48px;
}
.flexIndex > .flexProd > span
{
 display: block;
 width: 100%;
}
.flexIndex > .flexProd > .title
{
 font-size: 135%;
 font-weight: bold;
 max-width: 10em;
 margin-left: auto;
 margin-right: auto;
 margin-top: 0.25em;
}
.flexIndex > .flexProd > .category
{
 text-align: right;
 font-size: 70%;
 max-width: 21.5em;
}
.flexIndex > .flexProd > .interaction
{
 text-align: right;
 font-size: 80%;
}
.flexIndex > .flexProd > .description
{
 text-align: left;
 max-width: 15em;
 margin-top: 1em;
}
.flexIndex > .flexProd > .spacer
{
 flex: 1;
 display: flex;
}
.flexIndex > .flexProd > .supports
{
 margin-left: auto;
 text-align: justify;
 max-width: 20em;
 margin-bottom: 1em;
 margin-top: 1em;
}
.flexIndex ~ .donate
{
 margin-left: auto;
 margin-right: auto;
}