* { box-sizing: border-box; }
body { margin: 0; padding: 16px 0; color: #162525; font: 16px/1.5 Georgia, serif; background: #fff; }
a { color: #183a46; }
.center { margin: 0 auto; width: min(1004px, 100%); text-align: center; }
.logo { display: grid; place-items: center; min-height: 138px; padding: 4px; background: #778877; }
.logo img { max-width: 100%; height: auto; }
.logo > a { font-size: clamp(1.6rem, 5vw, 2.6rem); text-decoration: none; }
.menu { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; padding: 10px 4px; border-top: 5px solid #6699aa; background: #778877; }
.menu a { display: inline-block; padding: 3px; font-size: .85rem; }
.menu img { display: block; border: 0; }
.menu a[aria-current] { font-weight: bold; }
.content { padding: 18px 0 28px; background: #6699aa; overflow-wrap: anywhere; }
h1 { margin-top: 0; font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
.introduction, .rules, .notice, .empty, .moderation { margin: 16px auto; width: 80%; }
.introduction p:last-child, .rules { text-align: left; }
.ListOne, #addForm { width: 80%; margin: 16px auto; padding: 16px; text-align: left; background: #aabbbb; }
.ListOne header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-style: italic; }
.ListOne .date { font-size: .85rem; }
.entry-content { white-space: pre-wrap; text-align: left; }
#addForm { background: #778888; }
#addForm h2 { margin-top: 0; }
label { display: block; margin-bottom: 4px; }
input, textarea, button { font: inherit; }
input:not([type=hidden]), textarea { width: 100%; padding: 8px; color: #162525; background: #fff; border: 1px solid #3d565c; border-radius: 2px; }
textarea { resize: vertical; }
button { padding: 8px 24px; color: #fff; background: #254b56; border: 1px solid #17353d; border-radius: 2px; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#form-errors { padding: 8px; color: #751100; background: #fff0e8; }
#form-errors p { margin: 0; }
.notice { padding: 12px; background: #d4e4da; }
.rules { font-size: .8rem; }
.moderation form a { margin-left: 16px; }
[hidden] { display: none !important; }
@media (max-width: 640px) {
    body { padding: 0; }
    .introduction, .rules, .notice, .empty, .moderation, .ListOne, #addForm { width: 92%; }
}