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