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: 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 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
150pre > code {
151  color: var(--code);
152}
153
154.post-date {
155  color: var(--gray);
156}
157
158table {
159  width: 100%;
160}
161
162.index-date {
163  white-space: nowrap;
164  vertical-align: baseline;
165  color: var(--gray);
166}
167
168.index-post {
169  padding-bottom: 7px;
170}
171
172nav {
173  float: right;
174  transform: translateY(30%);
175}
176
177header {
178  padding-bottom: 20px;
179}
180
181hr {
182  max-width: 100%;
183  text-align: left;
184  margin: 20px 0 20px 0;
185}
186
187footer {
188  border-top: 1.5px solid;
189  margin: 20px 0 40px 10px;
190  padding-top: 30px;
191}
192
193.post-date {
194  color: var(--gray);
195}
196
197blockquote {
198  margin: 7px 0 7px 0;
199}
200
201blockquote p {
202  font-style: italic;
203  color: var(--darker);
204  padding-left: 20px;
205  border-left: 3px solid var(--gray);
206}