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