#nav ul {
list-style-type: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 1em;
margin: 0px;
padding: 0px;
}

h1.toolhead {
background: linear-gradient(white, #f5f1f9);
border-bottom: 1px solid #2a0d45;
clear: both;
}

h2.toolhead {
background: linear-gradient(hsl(271deg 20% 90%), hsl(271deg 20% 50%));
font-family: sans-serif;
padding: 0 0.2em;
font-size: 140%;
line-height: 28px;
clear: both;
border-radius: 2px;
}

h2.toolhead, h2.toolhead a {
color: black;
text-shadow: -1px 1px #ccc;
}

h2.toolhead a:hover {
color: blue;
}

a.flatlink, a.flatlink:visited, a.flatlink:hover {
color: inherit;
text-decoration: none;
}

.logo img, img.logo {
float: right;
border: none;
margin-left: 1em;
margin-right: 1em;
margin-bottom: 1em;
}

.inline-tags-container p, .inline-tags p {
display: inline;
}

ul.inline-tags-container, ul.inline-tags {
display: flex;
flex-wrap: wrap;
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul.inline-tags-container {
gap: 2em;
}
ul.inline-tags {
gap: 0.5em;
}
.inline-tags li {
display: inline-block;
padding: 0.3em 0.3em;
background-color: #f5f1f9;
white-space: nowrap;
border: 2px solid white;
}

.inline-tags li:hover {
border-color: blue;
}

.inline-tags li img {
vertical-align: middle;
}

div#infobox,
div#screenshots {
background-color: #f5f1f9;
clear: both;
width: fit-content;
padding: 0.5rem;
margin: 0.5rem;
}
#screenshots h2 {
margin-top: 0px;
}

#infobox > dl {
margin: 0px;
}
#infobox > dl > dt {
float: left;
clear: both;
padding-right: 0.5em;
}
#infobox > dl > dt::after {
content: ": ";
font-weight: normal;
}
#infobox > dl > dd {
padding-bottom: 0.5em;
}
ul.inline {
list-style-type: none;
display: inline;
margin: 0px;
padding: 0px;
}
.inline > li {
display: inline;
}
.inline > li::after {
content: ", ";
}
.inline > li:last-child::after {
content: "";
}

#infobox .update-link {
font-size: small;
width: 100%;
text-align: center;
}
div.histogram {
display: grid;
max-width: 16em;
grid-template-columns: auto minmax(0,1fr) auto;
gap: 0.2em;
margin: 0.5em;
}
.histogram-bg {
background-color: white;
height: 1em;
margin: auto 0px;
}
.histogram-bar {
background-color: #2a0d45;
height: 100%;
}
.percent {
text-align: right;
}
div.screens {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 0.2em;
}
div.screens img {
max-width: 100%;
height: auto;
}

#comments {
max-width: 720px;
}

#comments dt {
padding: 4px;
background-color: #f5f1f9;
}

#comments dd {
padding: 4px;
margin-left: 0;
padding-bottom: 1em;
overflow-wrap: break-word;
}

#comments dd > p {
margin-top: 0;
}

#comments .obsolete {
color: #888;
}

p.notice {
width: 60%;
clear: both;
margin-left: auto;
margin-right: auto;
padding: 2em;
background-color: #f5f1f9;
border: solid 1px #ccc;
text-align:center;
}

input.notice {
border: 5px solid blue;
}

/* For comment forms. */
.error {
background-color: #f88;
}

.rank-new {
font-style: italic;
}