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
 29h1, h2, h3, h4, h5, h6 {
 30  font-size: 1.2rem;
 31  margin-top: 2em;
 32}
 33
 34h1::before { color: var(--maincolor); content: '# '; }
 35h2::before { color: var(--maincolor); content: '## '; }
 36h3::before { color: var(--maincolor); content: '### '; }
 37h4::before { color: var(--maincolor); content: '#### '; }
 38h5::before { color: var(--maincolor); content: '##### '; }
 39h6::before { color: var(--maincolor); content: '###### '; }
 40
 41p {
 42  font-family: 'IBM Plex Sans', sans-serif;
 43  line-height: 1.5;
 44}
 45
 46hr {
 47  border: 0;
 48  border-top: 3px dotted var(--bordercl);
 49  margin: 1em 0;
 50}
 51
 52blockquote {
 53  border-left: 3px solid var(--bordercl);
 54  color: #737373;
 55  margin: 0;
 56  padding-left: 1em;
 57}
 58
 59a {
 60  border-bottom: 3px solid var(--maincolor);
 61  color: inherit;
 62  text-decoration: none;
 63}
 64a:hover {
 65    background-color: var(--hovercolor);
 66  color: #fff;
 67}
 68
 69ul {
 70  list-style: none;
 71  padding-left: 2ch;
 72}
 73ul li {
 74  text-indent: -2ch;
 75}
 76ul li::before {
 77  content: '* ';
 78  font-weight: bold;
 79}
 80
 81/* Images */
 82img {
 83  border: 3px solid #ececec;
 84  max-width: 100%;
 85}
 86
 87figure {
 88  box-sizing: border-box;
 89  display: inline-block;
 90  margin: 0;
 91  max-width: 100%;
 92}
 93
 94figure img {
 95  max-height: 500px;
 96}
 97
 98@media screen and (min-width: 600px) {
 99  figure {
100    padding: 0 40px;
101  }
102}
103
104figure h4 {
105  font-size: 1rem;
106  margin: 0;
107  margin-bottom: 1em;
108}
109figure h4::before {
110  content: '↳ ';
111}
112
113/* Code blocks */
114code {
115  background-color: #f1f1f1;
116  padding: .1em .2em;
117}
118
119pre {
120  background-color: #ececec;
121  line-height: 1.4;
122  overflow-x: auto;
123  padding: 1em;
124}
125
126.highlight pre ::selection {
127  background: rgba(255, 255, 255, 0.2);
128  color: inherit;
129}
130
131pre code {
132  background-color: transparent;
133  color: inherit;
134  font-size: 100%;
135  padding: 0;
136}
137
138/* Containers */
139.content {
140  margin-bottom: 4em;
141  margin-left: auto;
142  margin-right: auto;
143  max-width: 800px;
144  padding: 0 1ch;
145  word-wrap: break-word;
146}
147
148/* Header */
149header {
150  display: flex;
151  flex-wrap: wrap;
152  justify-content: space-between;
153  margin: 1em 0;
154}
155
156header .main {
157  font-size: 1.5rem;
158}
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 blue; 
210}
211svg{
212  max-height: 15px;
213}
214.soc:hover{
215  background-color: hotpink;
216  color: white;
217}