@font-face {
    font-family: NimbusSansNarrow;
    src: url("/NimbusSansNarrow.ttf");
}

* {
    font-family: sans-serif;
}

.title {
    font-family: NimbusSansNarrow;
}

.center {
    text-align: center;
}

body {
    margin: 0;
}

#header, #footer {
    padding: .5em;
    text-align: center;
}
#header {
    background: darkslategrey;
}
#header a, #header {
    color: white;
}
#footer a, #footer {
    color: darkslategray;
}

.recent {
    margin-left: auto;
    margin-right: auto;
    max-width: 75em;
    text-align: center;
}
.recent > div {
    display: inline-block;
    margin: .5em;
    padding: .5em;
    border: 1px solid darkslategray;
    width: 10.5em;
    text-wrap: wrap;
    line-break: anywhere;
}

.recent > div img {
    width: 100%;
}

textarea {
    width: 40em;
    height: 30em;
    font-family: monospace;
}

.diff, .diff-right {
    /* display: inline-block; */
    margin-left: auto;
    margin-right: auto;
    max-width: 60em;
}

.diff > span {
    font-family: monospace;
    white-space: pre;
    text-wrap: wrap;
    line-break: anywhere;
}
.diff > span.added {
    color: green;
    background: #ddffdd;
}
.diff > span.removed {
    color: red;
    background: #ffdddd;
}

.msg {
    background: wheat;
    display: none;
    padding: .5em;
    margin: .5em;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}
.msg:target {
    display: block;
}