1:root {
  2  --bg: #f4f4f4;
  3  --cyan: #509c93;
  4  --light-gray: #eee;
  5  --gray: #6a6a6a;
  6  --code: #666;
  7  --dark: #444;
  8  --darker: #222;
  9  --code-bg: #0000000a;
 10}
 11
 12html {
 13  background: var(--bg);
 14}
 15
 16::selection {
 17  background: var(--dark);
 18  color: var(--bg);
 19}
 20
 21* {
 22  box-sizing: border-box;
 23  text-decoration: none;
 24  padding: 0;
 25  margin: 0;
 26}
 27
 28main {
 29  font-family: serif;
 30  font-size: 16px;
 31  padding: 0;
 32  margin: 10px;
 33  line-height: 160%;
 34}
 35
 36main h1 {
 37  font-size: 25px;
 38  padding: 10px 0 10px 0;
 39}
 40
 41main h2 {
 42  font-size: 20px;
 43}
 44
 45main h2, h3 {
 46  padding: 20px 0 15px 0;
 47}
 48
 49.logo {
 50  width: 100%;
 51  text-align: center;
 52  padding-top: 40px;
 53  margin: 0;
 54}
 55
 56.footer img {
 57  max-height: 2.5rem;
 58  max-width: 2.5rem;
 59  display: inline-block;
 60  vertical-align: middle;
 61  image-orientation: from-image;
 62  padding: 0 0 5px 5px;
 63  cursor: pointer;
 64}
 65
 66.footer span {
 67  display: inline-block;
 68  padding: 0 0 0 10px;
 69  margin-top: 10px;
 70  word-wrap: break-word;
 71}
 72
 73a {
 74  margin: 0;
 75  padding: 0;
 76  box-sizing: border-box;
 77  text-decoration: none;
 78  word-wrap: break-word;
 79}
 80
 81main a {
 82  color: var(--darker);
 83  text-decoration: underline;
 84}
 85
 86table a {
 87  text-decoration: none;
 88}
 89
 90table a:hover {
 91  text-decoration: underline;
 92}
 93
 94body {
 95  max-width: 640px;
 96  padding: 0 10px;
 97  margin: 40px auto;
 98}
 99
100main article img {
101  max-width: 100%;
102  display: block;
103  margin: 0 0 15px 0;
104}
105
106main ul, main ol {
107  margin: 0 30px 7px 30px;
108}
109
110main ul ul {
111  margin-bottom: 0
112}
113
114.subtitle {
115  font-style: italic;
116  font-weight: normal;
117  font-variant: unset;
118  color: var(--dark);
119  padding: 0 0 20px 0;
120}
121
122.muted {
123  color: var(--gray);
124}
125.muted a {
126  color: var(--cyan);
127  text-decoration: underline;
128}
129
130article p {
131  padding: 7px 0 7px 0;
132}
133
134
135.tagline {
136  font-size: 20px;
137  padding: 150px 0 150px 0;
138  text-align: center;
139}
140
141pre {
142  overflow-x: auto;
143  overflow-y: hidden;
144  padding: 10px;
145  min-width: 0;
146  background-color: var(--code-bg) !important;
147  font-size: 15px !important;
148  margin-bottom: 10px;
149}
150
151code {
152  color: var(--cyan);
153}
154
155pre > code {
156  color: var(--code);
157}
158
159.post-date {
160  color: var(--gray);
161}
162
163table {
164  width: 100%;
165}
166
167.index-date {
168  white-space: nowrap;
169  vertical-align: baseline;
170  color: var(--gray);
171}
172
173.index-post {
174  padding-bottom: 7px;
175}
176
177nav {
178  float: right;
179  transform: translateY(30%);
180}
181
182header {
183  padding-bottom: 40px;
184}
185
186hr {
187  max-width: 100%;
188  text-align: left;
189  margin: 20px 0 20px 0;
190}
191
192footer {
193  border-top: 1.5px solid;
194  margin: 20px 0 40px 10px;
195  padding-top: 30px;
196}
197
198.post-date {
199  color: var(--gray);
200}
201
202blockquote {
203  margin: 7px 0 7px 0;
204}
205
206blockquote p {
207  font-style: italic;
208  color: var(--darker);
209  padding-left: 20px;
210  border-left: 3px solid var(--gray);
211}
212
213.big {
214  font-size: 40px;
215  text-align: center;
216}
217
218.subbig {
219  font-size: 25px;
220  text-align: center;
221}