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