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