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
 65pre:has(code) {
 66  padding: 0.5rem 0.75rem;
 67  border-radius: 4px;
 68  overflow: auto;
 69}
 70
 71:not(pre) > code {
 72  font-size: 0.9rem;
 73  color: var(--text-secondary);
 74  background-color: rgb(221, 221, 221);
 75  padding: 0 0.25rem;
 76  border-radius: 4px;
 77}
 78
 79nav {
 80  display: grid;
 81  grid-template-columns: 1fr 1fr;
 82}
 83
 84nav > a {
 85  display: block;
 86  padding-top: 0.5rem;
 87  padding-bottom: 0.5rem;
 88}
 89
 90.date {
 91  font-size: 0.9rem;
 92  color: var(--text-secondary);
 93  background-color: var(--color-primary-light);
 94  padding: 0 0.25rem;
 95  border-radius: 4px;
 96}
 97
 98.activity-grid {
 99  display: grid;
100  grid-template-columns: 1fr 4fr;
101  column-gap: 1rem;
102  row-gap: 1rem;
103
104  > h4 {
105    margin: 0;
106  }
107}
108
109.contact {
110  display: flex;
111  flex-direction: column;
112  row-gap: 1rem;
113}
114
115@media only screen and (max-width: 600px) {
116  main {
117    padding: 0 0.5rem;
118  }
119
120  nav {
121    display: grid;
122    grid-template-columns: 1fr 1fr;
123  }
124
125  .activity-grid {
126    grid-template-columns: 1fr;
127  }
128
129  ul.links-list {
130    padding-left: 1rem;
131    font-size: 1.1rem;
132
133    & > * {
134      margin-bottom: 1rem;
135    }
136  }
137}
138
139@media (prefers-color-scheme: dark) {
140  :root {
141    --color-primary: #818cf8;
142    --color-bg: #18181b;
143    --text-secondary: #9ca3af;
144  }
145
146  body {
147    color: white;
148  }
149}