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}