1:root {
  2  --color-primary: #4f46e5;
  3  --color-primary-light: rgba(79, 70, 229, 0.08);
  4  --color-bg: #f1f5f9;
  5  --text-secondary: #374151;
  6}
  7
  8body {
  9  font-family:
 10    Menlo,
 11    Monaco,
 12    Lucida Console,
 13    Liberation Mono,
 14    DejaVu Sans Mono,
 15    Bitstream Vera Sans Mono,
 16    Courier New,
 17    monospace,
 18    serif;
 19  background-color: var(--color-bg);
 20}
 21
 22main {
 23  max-width: 40rem;
 24  margin: 0 auto;
 25  padding: 2rem 0 4rem;
 26}
 27
 28blockquote {
 29  margin: 0;
 30  padding-left: 1rem;
 31  color: var(--text-secondary);
 32  border-left: 6px solid var(--color-primary);
 33}
 34
 35a {
 36  color: var(--color-primary);
 37  text-decoration: none;
 38}
 39
 40a:hover {
 41  color: #818cf8;
 42  text-decoration: underline;
 43}
 44
 45h1 {
 46  font-size: 1.5rem;
 47  line-height: 2rem;
 48}
 49
 50h2 {
 51  font-size: 1.25rem;
 52  line-height: 1.75rem;
 53  margin-bottom: 1rem;
 54}
 55
 56p {
 57  margin: 1.5rem 0;
 58  line-height: 1.5;
 59}
 60
 61ul {
 62  line-height: 1.3;
 63}
 64
 65input, textarea {
 66  border-radius: 4px;
 67  border: 1px solid #eee;
 68  padding: 0.5rem;
 69  resize: vertical;
 70}
 71
 72button {
 73  border-radius: 4px;
 74  color: white;
 75  background-color: var(--color-primary);
 76  border: none;
 77  padding: 0.5rem;
 78  cursor: pointer;
 79
 80  &:hover,&:focus {
 81    opacity: 0.8;
 82  }
 83}
 84
 85pre:has(code) {
 86  padding: 0.5rem 0.75rem;
 87  border-radius: 4px;
 88  overflow: auto;
 89}
 90
 91:not(pre) > code {
 92  font-size: 0.9rem;
 93  color: var(--text-secondary);
 94  background-color: var(--color-primary-light);
 95  padding: 0 0.25rem;
 96  border-radius: 4px;
 97}
 98
 99nav {
100  display: grid;
101  grid-template-columns: 1fr 1fr;
102  margin: 2rem 0;
103}
104
105nav > a {
106  display: block;
107  padding-top: 0.5rem;
108  padding-bottom: 0.5rem;
109}
110
111.date {
112  font-size: 0.9rem;
113  color: var(--text-secondary);
114  background-color: var(--color-primary-light);
115  padding: 0 0.25rem;
116  border-radius: 4px;
117}
118
119.projects {
120  & .project {
121    margin-bottom: 2rem;
122  }
123
124  & a {
125    min-width: 10rem;
126  }
127
128  & p {
129    margin: 0.5rem 0 0;
130    font-size: 14px;
131  }
132}
133
134.activity-grid {
135  display: grid;
136  grid-template-columns: 1fr 4fr;
137  column-gap: 1rem;
138  row-gap: 1rem;
139
140  > h4 {
141    margin: 0;
142  }
143}
144
145.contact {
146  display: grid;
147  grid-template-columns: 1fr 1fr;
148  row-gap: 1rem;
149}
150
151#contact-form {
152  display: flex;
153  flex-direction: column;
154  row-gap: 1rem;
155
156  > button {
157    width: 100%;
158  }
159}
160
161ul.categories-list {
162  padding-left: 0;
163}
164
165ul.categories-list li {
166  padding: 0.8rem 0;
167  list-style: none;
168}
169
170ul.categories-list li::before {
171  content: '🌱 ';
172}
173
174@media only screen and (max-width: 600px) {
175  main {
176    padding: 0 0.5rem;
177  }
178
179  nav {
180    display: grid;
181    grid-template-columns: 1fr 1fr;
182  }
183
184  .contact {
185    display: flex;
186    flex-direction: column;
187  }
188
189  .activity-grid {
190    grid-template-columns: 1fr;
191  }
192
193  ul.links-list {
194    padding-left: 1rem;
195    font-size: 1.1rem;
196
197    & > * {
198      margin-bottom: 1rem;
199    }
200  }
201}
202
203@media (prefers-color-scheme: dark) {
204  :root {
205    --color-primary: #818cf8;
206    --color-primary-light: rgba(79, 70, 229, 0.2);
207    --color-bg: #18181b;
208    --color-bg: #14141f;
209    --text-secondary: #e2e4e8;
210  }
211
212  body {
213    color: white;
214  }
215}
216
217