1/* Markdown */
  2html {
  3    
  4  color: #232333;
  5  font-family: 'Roboto Mono', monospace;
  6  font-size: 15px;
  7  line-height: 1.6em;
  8}
  9body{
 10  display: block;
 11  margin: 8px;
 12}
 13* {
 14  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 15}
 16
 17::selection {
 18  background: red;
 19  color: #fff;
 20}
 21
 22h1, h2, h3, h4, h5, h6 {
 23  font-size: 1.2rem;
 24  margin-top: 2em;
 25}
 26
 27h1::before { color: red; content: '# '; }
 28h2::before { color: red; content: '## '; }
 29h3::before { color: red; content: '### '; }
 30h4::before { color: red; content: '#### '; }
 31h5::before { color: red; content: '##### '; }
 32h6::before { color: red; content: '###### '; }
 33
 34p {
 35  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 36  line-height: 1.5;
 37}
 38
 39hr {
 40  border: 0;
 41  border-top: 3px solid palevioletred;
 42  margin: 1em 0;
 43}
 44
 45blockquote {
 46  border-left: 3px solid lime;
 47  color: #737373;
 48  margin: 0;
 49  padding-left: 1em;
 50}
 51
 52a {
 53  border-bottom: 3px solid red;
 54  color: inherit;
 55  text-decoration: none;
 56}
 57a:hover {
 58  background-color: navy;
 59  color: #fff;
 60}
 61
 62ul {
 63  list-style: none;
 64  padding-left: 2ch;
 65}
 66ul li {
 67  text-indent: -2ch;
 68}
 69ul li::before {
 70  content: '* ';
 71  font-weight: bold;
 72}
 73
 74/* Images */
 75img {
 76  border: 3px solid #ececec;
 77  max-width: 100%;
 78}
 79
 80figure {
 81  box-sizing: border-box;
 82  display: inline-block;
 83  margin: 0;
 84  max-width: 100%;
 85}
 86
 87figure img {
 88  max-height: 500px;
 89}
 90
 91@media screen and (min-width: 600px) {
 92  figure {
 93    padding: 0 40px;
 94  }
 95}
 96
 97figure h4 {
 98  font-size: 1rem;
 99  margin: 0;
100  margin-bottom: 1em;
101}
102figure h4::before {
103  content: '↳ ';
104}
105
106/* Code blocks */
107code {
108  background-color: #f1f1f1;
109  padding: .1em .2em;
110}
111
112pre {
113  background-color: #ececec;
114  line-height: 1.4;
115  overflow-x: auto;
116  padding: 1em;
117}
118
119.highlight pre ::selection {
120  background: rgba(255, 255, 255, 0.2);
121  color: inherit;
122}
123
124pre code {
125  background-color: transparent;
126  color: inherit;
127  font-size: 100%;
128  padding: 0;
129}
130
131/* Containers */
132.content {
133  margin-bottom: 4em;
134  margin-left: auto;
135  margin-right: auto;
136  max-width: 800px;
137  padding: 0 1ch;
138  word-wrap: break-word;
139}
140
141/* Header */
142header {
143  display: flex;
144  flex-wrap: wrap;
145  justify-content: space-between;
146  margin: 1em 0;
147}
148
149header .main {
150  font-size: 1.5rem;
151}
152
153/* Footer */
154footer {
155  margin-top: 1em;
156}
157
158/* Common */
159.title h1 {
160  margin-bottom: 0;
161}
162
163time {
164  color: #757575;
165}
166
167/* Posts */
168article .title {
169  margin-bottom: 1em;
170}
171
172
173/* Lists */
174.list {
175  margin-top: 2em;
176}
177
178.list .title a {
179  border: none;
180}
181
182.list .description a {
183  border-bottom: none;
184  color: springgreen;
185}
186.list .description a:hover {
187  color: #fff;
188}
189
190.list h1 {
191  margin-bottom: 0;
192}
193
194.list p {
195  margin: 0;
196}
197
198.list-item {
199  margin-bottom: 2em;
200}
201
202/* Expander */
203
204/* Callout */
205.callout {
206  background-color: springgreen;
207  color: #fff;
208  padding: 1em;
209}
210
211.callout p {
212  font-family: 'Roboto Mono', monospace;
213  margin: 0;
214}
215
216.callout a {
217  border-bottom: 3px solid #fff;
218}
219
220.callout a:hover {
221  background-color: #fff;
222  color: springgreen;
223}
224
225.site-description {
226display: flex;
227justify-content: space-between;
228}