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 }