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