@media (min-width: 768px) { html { font-size: 118%; } h1 img { zoom: 1.2; } }

* { box-sizing: border-box; }

body {
  max-width: 34rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  background: #000;
  color: #cfd2dd;
  font: .75rem/1.7 ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;
  -webkit-text-stroke: .42em #000;
  paint-order: stroke fill;
  image-rendering: pixelated;
}

h1 { margin: 0; font: inherit; width: fit-content; }
h1 * { display: block; }

h2, .prompt {
  width: fit-content;
  padding: .25em .85em;
  border: 1px solid #34c77b38;
  border-radius: 4px;
  font: inherit;
  background: #000;
}
h2::before, .prompt::before { content: "❯ "; color: #34c77b; }

p { margin: 0 0 1rem; }

ul { list-style: "‣ "; margin: 0; padding-left: 1.4em; }
li::marker { color: #6a6f80; }

a { color: #8b7dfb; text-decoration: none; }
a:hover, a:focus-visible { color: #34c77b; }
a:visited { -webkit-text-stroke-color: #000; }

.badges { display: flex; flex-wrap: wrap; gap: .5rem; }

footer { margin-top: 2rem; text-align: center; }