1
* {
2
    box-sizing: border-box;
3
}
4

5
body {
6
    margin: 0;
7
    padding: 0;
8
    border: 0;
9
    font: 14px sans-serif;
10
}
11

12
header.mail-header {
13
    background-color: #ced7e0;
14
    padding: 5px 10px;
15
    margin: 10px 0;
16
}
17

18
header.mail-header img {
19
    vertical-align: middle;
20
}
21

22
header dl {
23
    display: flex;
24
    flex-wrap: wrap;
25
    margin: 0;
26
}
27

28
header dt {
29
    width: 64px;
30
}
31

32
header dd {
33
    margin-left: auto;
34
    width: calc(100% - 64px);
35
    flex-grow: 2;
36
}
37

38
header dt, header dd {
39
    padding: 3px 0;
40
}
41

42
header.index-header {
43
    text-align: center;
44
}
45

46
h1 {
47
    font-weight: normal;
48
    font-size: 1.8rem;
49
    margin: 0 0 1rem 0;
50
}
51

52
main {
53
    padding: 5px;
54
}
55

56
pre {
57
    font-family: monospace;
58
    padding: 5px;
59
    white-space: pre-wrap;
60
}
61

62
hr {
63
    display: none;
64
}
65

66
.thread {
67
    margin: 1rem 0;
68
}
69

70
.thread p {
71
    margin: 0;
72
}
73

74
.thread a {
75
    text-decoration: none;
76
}
77

78
.thread a:hover {
79
    text-decoration: underline;
80
}
81

82
.thread ul {
83
    padding-left: 1rem;
84
    list-style: none;
85
}
86

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

90
.mail {
91
    padding: 0.5rem 5px;
92
}
93

94
.mail:target {
95
    background-color: khaki;
96
}
97

98
.mail .mail-meta {
99
    font-size: 13px;
100
}
101

102
.mail.reply .subject {
103
    overflow: hidden;
104
    text-overflow: ellipsis;
105
    white-space: pre;
106
}
107

108
nav {
109
    margin: 1rem;
110
    text-align: center;
111
}
112

113
nav a {
114
    display: inline-block;
115
    margin: 0 1rem;
116
}
117

118
footer {
119
    margin-top: 70px;
120
    border-top: 1px solid #333;
121
}
122

123
footer > p {
124
    text-align: center;
125
}
126

127
footer ul {
128
    padding: 0;
129
    text-align: center;
130
}
131

132
footer li {
133
    display: inline-block;
134
    padding: 8px;
135
}
136

137

138
/* dark theme */
139
@media (prefers-color-scheme: dark) {
140
    body {
141
        color: #eeeff1;
142
        background-color: #1e1f21;
143
    }
144

145
    a {
146
        color: #bad7ff;
147
    }
148

149
    header.mail-header {
150
        background-color: #390039;
151
    }
152

153
    .mail:target {
154
        background-color: #574f03;
155
    }
156

157
    footer {
158
        border-color: #ffffea;
159
    }
160
}