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: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
 10    Bitstream Vera Sans Mono, Courier New, monospace, serif;
 11  background-color: var(--color-bg);
 12}
 13
 14main {
 15  max-width: 40rem;
 16  margin: 0 auto;
 17  padding: 2rem 0 4rem;
 18}
 19
 20blockquote {
 21  margin: 0;
 22  color: var(--text-secondary);
 23}
 24
 25a {
 26  color: var(--color-primary);
 27  text-decoration: none;
 28}
 29
 30a:hover {
 31  color: #818cf8;
 32  text-decoration: underline;
 33}
 34
 35h1 {
 36  font-size: 1.5rem;
 37  line-height: 2rem;
 38}
 39
 40h2 {
 41  font-size: 1.25rem;
 42  line-height: 1.75rem;
 43  margin-bottom: 1rem;
 44}
 45
 46p {
 47  margin: 1.5rem 0;
 48  line-height: 1.5;
 49}
 50
 51ul {
 52  line-height: 1.3;
 53}
 54
 55pre:has(code) {
 56  padding: 0.5rem 0.75rem;
 57  border-radius: 4px;
 58  overflow: auto;
 59}
 60
 61:not(pre) > code {
 62  font-size: 0.9rem;
 63  color: var(--text-secondary);
 64  background-color: rgb(221, 221, 221);
 65  padding: 0 0.25rem;
 66  border-radius: 4px;
 67}
 68
 69nav {
 70  display: grid;
 71  grid-template-columns: 1fr 1fr;
 72}
 73
 74nav > a {
 75  display: block;
 76  padding-top: 0.5rem;
 77  padding-bottom: 0.5rem;
 78}
 79
 80.date {
 81  font-size: 0.9rem;
 82  color: var(--text-secondary);
 83  background-color: var(--color-primary-light);
 84  padding: 0 0.25rem;
 85  border-radius: 4px;
 86}
 87
 88.activity-grid {
 89  display: grid;
 90  grid-template-columns: 1fr 4fr;
 91  column-gap: 1rem;
 92  row-gap: 1rem;
 93
 94  > h4 {
 95    margin: 0;
 96  }
 97}
 98
 99.contact {
100  display: flex;
101  flex-direction: column;
102  row-gap: 1rem;
103}
104
105@media only screen and (max-width: 600px) {
106  main {
107    padding: 0 0.5rem;
108  }
109
110  nav {
111    display: grid;
112    grid-template-columns: 1fr 1fr;
113  }
114
115  .activity-grid {
116    grid-template-columns: 1fr;
117  }
118
119  ul.links-list {
120    padding-left: 1rem;
121    font-size: 1.1rem;
122
123    & > * {
124      margin-bottom: 1rem;
125    }
126  }
127}
128
129@media (prefers-color-scheme: dark) {
130  :root {
131    --color-primary: #818cf8;
132    --color-bg: #18181b;
133    --text-secondary: #9ca3af;
134  }
135
136  body {
137    color: white;
138  }
139}