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--darkMaincolor: #50fa7b;
 10}
 11html {
 12  color: #232333;
 13  font-family: 'Roboto Mono', monospace;
 14  font-size: 15px;
 15  line-height: 1.6em;
 16}
 17body{
 18  display: block;
 19  margin: 8px;
 20}
 21* {
 22  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 23}
 24
 25::selection {
 26  background: var(--maincolor);
 27  color: #fff;
 28}
 29
 30p {
 31  font-family: 'IBM Plex Sans', sans-serif;
 32  line-height: 1.5;
 33}
 34
 35hr {
 36  border: 0;
 37  border-top: 3px dotted var(--bordercl);
 38  margin: 1em 0;
 39}
 40
 41blockquote {
 42  border-left: 3px solid var(--bordercl);
 43  color: #737373;
 44  margin: 0;
 45  padding-left: 1em;
 46}
 47
 48a {
 49  border-bottom: 3px solid var(--maincolor);
 50  color: inherit;
 51  text-decoration: none;
 52}
 53a:hover {
 54    background-color: var(--hovercolor);
 55    color: #fff;
 56}
 57
 58ul {
 59  list-style: none;
 60  padding-left: 2ch;
 61}
 62ul li {
 63  text-indent: -2ch;
 64}
 65ul li::before {
 66  content: '* ';
 67  font-weight: bold;
 68}
 69
 70/* Images */
 71img {
 72  border: 3px solid #ececec;
 73  max-width: 100%;
 74}
 75
 76figure {
 77  box-sizing: border-box;
 78  display: inline-block;
 79  margin: 0;
 80  max-width: 100%;
 81}
 82
 83figure img {
 84  max-height: 500px;
 85}
 86
 87@media screen and (min-width: 600px) {
 88  figure {
 89    padding: 0 40px;
 90  }
 91}
 92
 93figure h4 {
 94  font-size: 1rem;
 95  margin: 0;
 96  margin-bottom: 1em;
 97}
 98figure h4::before {
 99  content: '↳ ';
100}
101
102/* Code blocks */
103code {
104  background-color: #f1f1f1;
105  padding: .1em .2em;
106}
107
108pre {
109  background-color: #ececec;
110  line-height: 1.4;
111  overflow-x: auto;
112  padding: 1em;
113}
114
115.highlight pre ::selection {
116  background: rgba(255, 255, 255, 0.2);
117  color: inherit;
118}
119
120pre code {
121  background-color: transparent;
122  color: inherit;
123  font-size: 100%;
124  padding: 0;
125}
126
127/* Containers */
128.content {
129  margin-bottom: 4em;
130  margin-left: auto;
131  margin-right: auto;
132  max-width: 800px;
133  padding: 0 1ch;
134  word-wrap: break-word;
135}
136
137/* Header */
138header {
139  display: flex;
140  flex-wrap: wrap;
141  justify-content: space-between;
142  margin: 1em 0;
143}
144
145header .main {
146  font-size: 1.5rem;
147}
148h1, h2, h3, h4, h5, h6 {
149  font-size: 1.2rem;
150  margin-top: 2em;
151}
152
153h1::before { color: var(--maincolor); content: '# '; }
154h2::before { color: var(--maincolor); content: '## '; }
155h3::before { color: var(--maincolor); content: '### '; }
156h4::before { color: var(--maincolor); content: '#### '; }
157h5::before { color: var(--maincolor); content: '##### '; }
158h6::before { color: var(--maincolor); content: '###### '; }
159
160/* Footer */
161footer {
162  margin-top: 1em;
163}
164
165/* Common */
166.title h1 {
167  margin-bottom: 0;
168}
169
170time {
171  color: grey;
172}
173
174/* Posts */
175article .title {
176  margin-bottom: 1em;
177}
178
179
180/* Callout */
181.callout {
182  background-color: var(--callouctcolor);
183  color: #fff;
184  padding: 1em;
185}
186
187.callout p {
188  font-family: 'IBM Plex Mono', monospace;
189  margin: 0;
190}
191
192.callout a {
193  border-bottom: 3px solid #fff;
194}
195
196.callout a:hover {
197  background-color: #fff;
198  color: var(--callouctcolor);
199}
200
201.site-description {
202display: flex;
203justify-content: space-between;
204}
205.tags li::before{
206  content: "🏷 ";
207}
208.tags a{
209  border-bottom: 3px solid var(--maincolor); 
210}
211.tags a:hover{
212  color:white;
213  background-color: var(--hovercolor); 
214}
215svg{
216  max-height: 15px;
217}
218.soc:hover{
219  color: white;
220}
221.draft-label{ 
222    color: var(--bordercl);
223    text-decoration: none;
224    padding: 2px 4px;
225    border-radius: 4px;
226    margin-left: 6px;
227    background-color: #f9f2f4;
228}
229.highlight {
230  position: relative;
231  -webkit-overflow-scrolling: touch;
232}
233.highlight pre code[class*="language-"] {
234  -webkit-overflow-scrolling: touch;
235}
236.highlight pre code[class*="language-"]::before {
237  background: black;
238  border-radius: 0 0 0.25rem 0.25rem;
239  color: white;
240  font-size: 12px;
241  letter-spacing: 0.025rem;
242  padding: 0.1rem 0.5rem;
243  position: absolute;
244  right: 1rem;
245  text-align: right;
246  text-transform: uppercase;
247  top: 0;
248}
249
250.highlight pre code[class=language-javaScript]::before,
251.highlight pre code[class="language-js"]::before {
252content: "js";
253background: #f7df1e;
254color: black;
255}
256.highlight pre code[class*='language-yml']::before,
257.highlight pre code[class*='language-yaml']::before {
258content: 'yaml';
259background: #f71e6a;
260color: white;
261}
262.highlight pre code[class*='language-shell']::before,
263.highlight pre code[class*='language-bash']::before,
264.highlight pre code[class*='language-sh']::before {
265content: 'shell';
266background: green;
267color:white
268}
269.highlight pre code[class*='language-json']::before{
270content: 'json';
271background: dodgerblue;
272 color: #000000 
273}
274.highlight pre code[class*='language-python']::before,
275.highlight pre code[class*='language-py']::before {
276content: 'py';
277background: blue;
278color: yellow ;
279}
280.highlight pre code[class*='language-css']::before{
281content: 'css';
282background: cyan;
283color: black ;
284}
285.highlight pre code[class*='language-go']::before{
286content: 'Go';
287background: cyan;
288color: royalblue ;
289}
290.highlight pre code[class*='language-md']::before,
291.highlight pre code[class*='language-md']::before{
292content: 'Markdown';
293background: royalblue;
294color: whitesmoke ;
295}