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