body {
    font-family: sans-serif;
}

pre {
    margin: 0;
}

h1 a {
    float: right;
}

h1 object {
    height: 2em;
    vertical-align: middle;
    /* https://stackoverflow.com/questions/11374059/make-an-html-svg-object-also-a-clickable-link#17133804 */
    pointer-events: none;
}

dt {
    display: table-cell;
    font-weight: bold;
    padding: 0.2em 0.5em 0.2em 0;
}

dd {
    display: table-cell;
    padding: 0.2em 0;
}

#filters {
    display: table;
}

#filters div {
    display: table-row;
}

#filters dd div {
    display: inline-block;
}

.box {
    float: left;
    padding: 0.5em;
    margin: 0.3em;
    border: solid 0.05em;
    display: none;
}

.box .header {
    margin-bottom: 0.5em;
}

.box .header .language {
    font-weight: bold;
}

.box .tags {
    margin-top: 0.5em;
    font-style: italic;
    font-size: 80%;
    float: left;
}

.box .sources {
    margin-top: 0.5em;
    font-style: italic;
    font-size: 80%;
    float: right;
    padding-left: 1em;
}

#languages, #paradigms, #outputs, #methods, #tags {
    margin: 0.3em;
}

#languages svg, #languages img, .box svg, .box img {
    height: 1.5em;
    vertical-align: middle;
}

#languages div, #paradigms div, #outputs div, #methods div, #tags div {
    margin-right: 0.5em;
}