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