1:root {
  2  --rosewater: #dc8a78;
  3  --flamingo: #dd7878;
  4  --pink: #ea76cb;
  5  --mauve: #8839ef;
  6  --red: #d20f39;
  7  --maroon: #e64553;
  8  --peach: #fe640b;
  9  --yellow: #df8e1d;
 10  --green: #40a02b;
 11  --teal: #179299;
 12  --sky: #04a5e5;
 13  --sapphire: #209fb5;
 14  --blue: #1e66f5;
 15  --lavender: #7287fd;
 16  --text: #4c4f69;
 17  --subtext1: #5c5f77;
 18  --subtext0: #6c6f85;
 19  --overlay2: #7c7f93;
 20  --overlay1: #8c8fa1;
 21  --overlay0: #9ca0b0;
 22  --surface2: #acb0be;
 23  --surface1: #bcc0cc;
 24  --surface0: #ccd0da;
 25  --base: #eff1f5;
 26  --mantle: #e6e9ef;
 27  --crust: #dce0e8;
 28  --inverted-text: var(--base);
 29  --selection-color: var(--blue);
 30
 31  --color-primary: var(--lavender);
 32  --color-bg: var(--base);
 33  --color-primary-light: color-mix(in srgb, var(--color-primary) 20%, var(--color-bg));
 34  --text-primary: var(--text);
 35  --text-secondary: var(--subtext1);
 36}
 37
 38body {
 39  font-family:
 40    Menlo,
 41    Monaco,
 42    Lucida Console,
 43    Liberation Mono,
 44    DejaVu Sans Mono,
 45    Bitstream Vera Sans Mono,
 46    Courier New,
 47    monospace,
 48    serif;
 49  background-color: var(--color-bg);
 50  color: var(--text-primary);
 51}
 52
 53main {
 54  max-width: 40rem;
 55  margin: 0 auto;
 56  padding: 2rem 0 4rem;
 57}
 58
 59blockquote {
 60  margin: 0;
 61  padding-left: 1rem;
 62  color: var(--text-secondary);
 63  border-left: 6px solid var(--color-primary);
 64}
 65
 66:not(a) > img {
 67  width: 100%;
 68}
 69
 70a {
 71  color: var(--color-primary);
 72  text-decoration: none;
 73}
 74
 75a:hover {
 76  color: #818cf8;
 77  text-decoration: underline;
 78}
 79
 80h1 {
 81  font-size: 1.5rem;
 82  line-height: 2rem;
 83}
 84
 85h2 {
 86  font-size: 1.25rem;
 87  line-height: 1.75rem;
 88  margin-bottom: 1rem;
 89}
 90
 91p {
 92  margin: 1.5rem 0;
 93  line-height: 1.5;
 94}
 95
 96ul {
 97  line-height: 1.3;
 98}
 99
100input, textarea {
101  border-radius: 4px;
102  border: 1px solid #eee;
103  padding: 0.5rem;
104  resize: vertical;
105}
106
107button {
108  border-radius: 4px;
109  color: white;
110  background-color: var(--color-primary);
111  border: none;
112  padding: 0.5rem;
113  cursor: pointer;
114
115  &:hover,&:focus {
116    opacity: 0.8;
117  }
118}
119
120pre:has(code) {
121  padding: 0.5rem 0.75rem;
122  border-radius: 4px;
123  overflow: auto;
124}
125
126:not(pre) > code {
127  font-size: 0.9rem;
128  color: var(--text-secondary);
129  background-color: var(--color-primary-light);
130  padding: 0 0.25rem;
131  border-radius: 4px;
132}
133
134nav {
135  display: grid;
136  grid-template-columns: 1fr 1fr;
137  margin: 2rem 0;
138}
139
140nav > a {
141  display: block;
142  padding-top: 0.5rem;
143  padding-bottom: 0.5rem;
144}
145
146.date {
147  font-size: 0.9rem;
148  color: var(--text-secondary);
149  background-color: var(--color-primary-light);
150  padding: 0 0.25rem;
151  border-radius: 4px;
152}
153
154.projects {
155  & .project {
156    margin-bottom: 2rem;
157  }
158
159  & a {
160    min-width: 10rem;
161  }
162
163  & p {
164    margin: 0.5rem 0 0;
165    font-size: 14px;
166  }
167}
168
169.activity-grid {
170  display: grid;
171  grid-template-columns: 1fr 4fr;
172  column-gap: 1rem;
173  row-gap: 1rem;
174
175  > h4 {
176    margin: 0;
177  }
178}
179
180.contact {
181  display: grid;
182  grid-template-columns: 1fr 1fr;
183  row-gap: 1rem;
184}
185
186#contact-form {
187  display: flex;
188  flex-direction: column;
189  row-gap: 1rem;
190
191  > button {
192    width: 100%;
193  }
194}
195
196ul.categories-list {
197  padding-left: 0;
198}
199
200ul.categories-list li {
201  padding: 0.8rem 0;
202  list-style: none;
203}
204
205ul.categories-list li::before {
206  content: '🌱 ';
207}
208
209@media only screen and (max-width: 600px) {
210  main {
211    padding: 0 0.5rem;
212  }
213
214  nav {
215    display: grid;
216    grid-template-columns: 1fr 1fr;
217  }
218
219  .contact {
220    display: flex;
221    flex-direction: column;
222  }
223
224  .activity-grid {
225    grid-template-columns: 1fr;
226  }
227
228  ul.links-list {
229    padding-left: 1rem;
230    font-size: 1.1rem;
231
232    & > * {
233      margin-bottom: 1rem;
234    }
235  }
236}
237
238@media (prefers-color-scheme: dark) {
239  :root {
240    --rosewater: #f5e0dc;
241    --flamingo: #f2cdcd;
242    --pink: #f5c2e7;
243    --mauve: #cba6f7;
244    --red: #f38ba8;
245    --maroon: #eba0ac;
246    --peach: #fab387;
247    --yellow: #f9e2af;
248    --green: #a6e3a1;
249    --teal: #94e2d5;
250    --sky: #89dceb;
251    --sapphire: #74c7ec;
252    --blue: #89b4fa;
253    --lavender: #b4befe;
254    --text: #cdd6f4;
255    --subtext1: #bac2de;
256    --subtext0: #a6adc8;
257    --overlay2: #9399b2;
258    --overlay1: #7f849c;
259    --overlay0: #6c7086;
260    --surface2: #585b70;
261    --surface1: #45475a;
262    --surface0: #313244;
263    --base: #1e1e2e;
264    --mantle: #181825;
265    --crust: #11111b;
266    --inverted-text: var(--crust);
267    --selection-color: var(--mauve)
268  }
269
270  body {
271    color: white;
272  }
273}
274
275