1:root {
  2  --color-primary: #E0E722;
  3  --color-bg: #18181b;
  4  --text-primary: #44D62C;
  5  --color-link: #a3ea97;
  6  --text-secondary: #9ca3af;
  7}
  8
  9body {
 10  color: var(--text-primary);
 11  font-family:
 12    Menlo,
 13    Monaco,
 14    Lucida Console,
 15    Liberation Mono,
 16    DejaVu Sans Mono,
 17    Bitstream Vera Sans Mono,
 18    Courier New,
 19    monospace,
 20    serif;
 21  background-color: var(--color-bg);
 22}
 23
 24main {
 25  max-width: 40rem;
 26  margin: 0 auto;
 27  padding: 2rem 0 4rem;
 28}
 29
 30blockquote {
 31  margin: 0;
 32  padding-left: 1rem;
 33  color: var(--text-secondary);
 34  border-left: 6px solid var(--color-primary);
 35}
 36
 37a {
 38  color: var(--color-link);
 39}
 40
 41a:hover {
 42  opacity: 0.7;
 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
 65input, textarea {
 66  border-radius: 4px;
 67  border: 1px solid #eee;
 68  padding: 0.5rem;
 69  resize: vertical;
 70}
 71
 72button {
 73  border-radius: 4px;
 74  color: white;
 75  background-color: var(--color-primary);
 76  border: none;
 77  padding: 0.5rem;
 78  cursor: pointer;
 79
 80  &:hover,&:focus {
 81    opacity: 0.8;
 82  }
 83}
 84
 85pre:has(code) {
 86  padding: 0.5rem 0.75rem;
 87  border-radius: 4px;
 88  overflow: auto;
 89}
 90
 91:not(pre) > code {
 92  font-size: 0.9rem;
 93  color: var(--text-secondary);
 94  background-color: rgb(221, 221, 221);
 95  padding: 0 0.25rem;
 96  border-radius: 4px;
 97}
 98
 99nav {
100  display: grid;
101  grid-template-columns: 1fr 1fr;
102}
103
104nav > a {
105  display: block;
106  padding-top: 0.5rem;
107  padding-bottom: 0.5rem;
108}
109
110.date {
111  font-size: 0.9rem;
112  color: var(--text-secondary);
113  background-color: var(--color-primary-light);
114  padding: 0 0.25rem;
115  border-radius: 4px;
116}
117
118.activity-grid {
119  display: grid;
120  grid-template-columns: 1fr 4fr;
121  column-gap: 1rem;
122  row-gap: 1rem;
123
124  > h4 {
125    margin: 0;
126  }
127}
128
129@media only screen and (max-width: 600px) {
130  main {
131    padding: 0 0.5rem;
132  }
133
134  nav {
135    display: grid;
136    grid-template-columns: 1fr 1fr;
137  }
138
139  .activity-grid {
140    grid-template-columns: 1fr;
141  }
142
143  ul.links-list {
144    padding-left: 1rem;
145    font-size: 1.1rem;
146
147    & > * {
148      margin-bottom: 1rem;
149    }
150  }
151}