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