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