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