* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    font: 14px sans-serif;
}

header.mail-header {
    background-color: #ced7e0;
    padding: 5px 10px;
    margin: 10px 0;
}

header.mail-header img {
    vertical-align: middle;
}

header dl {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

header dt {
    width: 64px;
}

header dd {
    margin-left: auto;
    width: calc(100% - 64px);
    flex-grow: 2;
}

header dt, header dd {
    padding: 3px 0;
}

header.index-header {
    text-align: center;
}

h1 {
    font-weight: normal;
    font-size: 1.8rem;
    margin: 0 0 1rem 0;
}

summary {
    cursor: pointer;
    user-select: none;
}

form {
    text-align: center;
}

input {
    max-width: 180px;
}

.notice {
    padding: 1rem;
}

main {
    padding: 5px;
}

pre {
    font-family: monospace;
    padding: 5px;
    white-space: pre-wrap;
}

hr {
    display: none;
}

.thread {
    margin: 1rem 0;
}

.thread > p {
    padding: 0 1rem;
}

.thread p {
    margin: 0;
}

.thread .excerpt {
    margin-left: 10px;
    margin-top: 5px;
}

.thread a {
    text-decoration: none;
}

.thread a:hover {
    text-decoration: underline;
}

.thread ul {
    padding-left: 1rem;
    list-style: none;
}

.thread ul   { border-left: 1px dashed #cacaca; }
.thread > ul { border-left: 0px; }

.mail {
    padding: 0.5rem 5px;
}

.mail:target {
    background-color: khaki;
}

.mail .mail-meta {
    font-size: 13px;
}

.mail.reply .subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
}

nav {
    margin: 1rem;
    text-align: center;
}

nav a, nav span {
    display: inline-block;
    margin: 0 .7rem;
}

footer {
    margin-top: 70px;
    border-top: 1px solid #333;
}

footer > p {
    text-align: center;
}

footer ul {
    padding: 0;
    text-align: center;
}

footer li {
    display: inline-block;
    padding: 8px;
}


/* dark theme */
@media (prefers-color-scheme: dark) {
    body {
        color: #eeeff1;
        background-color: #1e1f21;
    }

    a {
        color: #bad7ff;
    }

    header.mail-header {
        background-color: #390039;
    }

    .mail:target {
        background-color: #574f03;
    }

    footer {
        border-color: #ffffea;
    }
}