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