1*,
  2::before,
  3::after {
  4  box-sizing: border-box;
  5}
  6
  7:root {
  8  --line-height: 1.3rem;
  9  --grid-height: 0.65rem;
 10  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
 11  --pre: #252525;
 12  --bg-color: #282a36;
 13  --text-color: #f2f2f2;
 14  --link-color: #8be9fd;
 15  --visited: #bd93f9;
 16  --grey-light: #6a708e;
 17  --green: #50fa7b;
 18}
 19
 20html {
 21  background-color: var(--bg-color);
 22  color: var(--text-color);
 23  line-height: var(--line-height);
 24  font-family:
 25    -apple-system,
 26    BlinkMacSystemFont,
 27    "Segoe UI",
 28    Roboto,
 29    Oxygen,
 30    Ubuntu,
 31    Cantarell,
 32    "Fira Sans",
 33    "Droid Sans",
 34    "Helvetica Neue",
 35    Arial,
 36    sans-serif,
 37    "Apple Color Emoji",
 38    "Segoe UI Emoji",
 39    "Segoe UI Symbol";
 40  -webkit-text-size-adjust: 100%;
 41  -moz-tab-size: 4;
 42  -o-tab-size: 4;
 43  tab-size: 4;
 44}
 45
 46body {
 47  margin: 0 auto;
 48  max-width: var(--body-max-width, 720px);
 49  position: relative;
 50}
 51
 52header {
 53  margin: 1rem auto;
 54}
 55
 56h1 {
 57  margin: 0;
 58  padding: 0;
 59  border: 0;
 60  font-family: var(--font-mono);
 61  font-weight: bold;
 62  font-size: 1.6rem;
 63  line-height: calc(var(--line-height) * 1.5);
 64  margin-top: calc(var(--line-height) * 2.5);
 65  margin-bottom: var(--grid-height);
 66}
 67
 68p {
 69  margin-top: var(--line-height);
 70  margin-bottom: var(--line-height);
 71}
 72
 73article {
 74  overflow-wrap: break-word;
 75}
 76
 77footer {
 78  text-align: center;
 79  margin-bottom: calc(var(--line-height) * 3);
 80}
 81
 82a {
 83  color: var(--link-color);
 84  text-decoration: underline;
 85  text-decoration-thickness: 1px;
 86  text-underline-offset: 2px;
 87  padding: 0 2px;
 88  border-radius: 1px;
 89  transition: background-color 0.1s ease, color 0.1s ease;
 90}
 91
 92a:hover {
 93  background-color: var(--link-color);
 94  color: var(--bg-color);
 95  text-decoration: none;
 96}
 97
 98a:visited {
 99  color: var(--visited);
100}
101
102a:visited:hover {
103  background-color: var(--visited);
104  color: var(--bg-color);
105  text-decoration: none;
106}
107
108.mono,
109time {
110  font-family: var(--font-mono);
111  font-variant-numeric: tabular-nums;
112}
113
114.box-sm {
115  border: 1px solid var(--grey-light);
116  padding: var(--grid-height);
117  background-color: var(--pre);
118}
119
120.text-green {
121  color: var(--green);
122}
123
124.text-grey {
125  color: var(--grey-light);
126}
127
128.text-sm {
129  font-size: 0.8rem;
130}
131
132.text-md {
133  font-size: 1rem;
134  font-weight: bold;
135  line-height: var(--line-height);
136  margin-bottom: var(--grid-height);
137}
138
139.font-italic {
140  font-style: italic;
141}
142
143.transform-none {
144  text-transform: none;
145}
146
147.post-date {
148  width: 110px;
149}
150
151.flex {
152  display: flex;
153}
154
155.flex-1 {
156  flex: 1;
157}
158
159.items-center {
160  align-items: center;
161}
162
163.gap {
164  gap: var(--grid-height);
165}
166
167.my {
168  margin-top: var(--grid-height);
169  margin-bottom: var(--grid-height);
170}
171
172.my-4 {
173  margin-top: calc(var(--line-height) * 2);
174  margin-bottom: calc(var(--line-height) * 2);
175}
176
177@media only screen and (max-width: 40em) {
178  body {
179    padding: 0 var(--grid-height);
180  }
181
182  header {
183    margin: 0;
184  }
185}