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 summary {
53     cursor: pointer;
54     user-select: none;
55 }
56 
57 form {
58     text-align: center;
59 }
60 
61 input {
62     max-width: 180px;
63 }
64 
65 .notice {
66     padding: 1rem;
67 }
68 
69 main {
70     padding: 5px;
71 }
72 
73 pre {
74     font-family: monospace;
75     padding: 5px;
76     white-space: pre-wrap;
77 }
78 
79 hr {
80     display: none;
81 }
82 
83 .thread {
84     margin: 1rem 0;
85 }
86 
87 .thread > p {
88     padding: 0 1rem;
89 }
90 
91 .thread p {
92     margin: 0;
93 }
94 
95 .thread .excerpt {
96     margin-left: 10px;
97     margin-top: 5px;
98 }
99 
100 .thread a {
101     text-decoration: none;
102 }
103 
104 .thread a:hover {
105     text-decoration: underline;
106 }
107 
108 .thread ul {
109     padding-left: 1rem;
110     list-style: none;
111 }
112 
113 .thread ul   { border-left: 1px dashed #cacaca; }
114 .thread > ul { border-left: 0px; }
115 
116 .mail {
117     padding: 0.5rem 5px;
118 }
119 
120 .mail:target {
121     background-color: khaki;
122 }
123 
124 .mail .mail-meta {
125     font-size: 13px;
126 }
127 
128 .mail.reply .subject {
129     overflow: hidden;
130     text-overflow: ellipsis;
131     white-space: pre;
132 }
133 
134 nav {
135     margin: 1rem;
136     text-align: center;
137 }
138 
139 nav a, nav span {
140     display: inline-block;
141     margin: 0 .7rem;
142 }
143 
144 footer {
145     margin-top: 70px;
146     border-top: 1px solid #333;
147 }
148 
149 footer > p {
150     text-align: center;
151 }
152 
153 footer ul {
154     padding: 0;
155     text-align: center;
156 }
157 
158 footer li {
159     display: inline-block;
160     padding: 8px;
161 }
162 
163 
164 /* dark theme */
165 @media (prefers-color-scheme: dark) {
166     body {
167         color: #eeeff1;
168         background-color: #1e1f21;
169     }
170 
171     a {
172         color: #bad7ff;
173     }
174 
175     header.mail-header {
176         background-color: #390039;
177     }
178 
179     .mail:target {
180         background-color: #574f03;
181     }
182 
183     footer {
184         border-color: #ffffea;
185     }
186 }