*,
*::before,
*::after {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

p,
h1, h2, h3, h4, h5, h6,
li,
dl, dt,
blockquote {
  overflow-wrap: break-word;
}

body {
  min-height: 100vh;
}

:root {
  --font-xs: 0.75rem;
  --font-sm: 0.88rem;
  --font-rg: 1rem;
  --font-lg: 1.1rem;
  --color-brand: hsl(80deg, 60%, 45%);
  --color-text-subtle: hsl(0deg, 0%, 50%);
}

html {
  font-family: system-ui, sans-serif;
}

body {
  background-color: hsl(80, 50%, 97%);
  display: flex;
  flex-direction: column;
}
body > main {
  flex: 1;
}

a {
  color: black;
}

.stack {
  --s: initial;
}
.stack > * + * {
  margin-block-start: var(--s, 1.6rem);
}

a.none {
  color: inherit;
  text-decoration: none;
}

a.subtle {
  color: inherit;
  text-decoration: none;
}
a.subtle:hover, a.subtle:focus {
  text-decoration: underline;
}

a.stripped {
  color: inherit;
  text-decoration: none;
}
a.stripped:visited {
  color: var(--color-text-subtle);
}

button.subtle {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  border: none;
  background-color: inherit;
}
button.subtle:hover, button.subtle:focus {
  text-decoration: underline;
  cursor: pointer;
}

.site-header {
  background-color: var(--color-brand, green);
  font-size: var(--font-sm, 0.9rem);
  padding-block: 0.2rem;
  padding-inline: 0.5rem;
  margin-block-end: 1rem;
  display: flex;
  align-items: center;
}
.site-header h1 {
  font-size: var(--font-rg, 1rem);
}
.site-header nav {
  display: flex;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
  column-gap: 1rem;
}
.site-header ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}
.site-header ul > *:not(:last-child) {
  position: relative;
  margin-inline-end: 0.7rem;
}
.site-header ul > *:not(:last-child)::before {
  content: " ";
  position: absolute;
  inset-inline-end: -0.35rem;
  inset-block-start: 20%;
  inline-size: 1px;
  block-size: 60%;
  background-color: black;
}

.site-main {
  padding-inline: 2rem;
}
.site-main .more {
  margin-block-start: 1rem;
  color: var(--color-text-subtle);
  margin-inline-start: 0.4rem;
}

.quack-item-list li::marker {
  color: var(--color-text-subtle);
  font-size: var(--font-sm, 0.9);
}
.quack-item-list li > * {
  margin-inline-start: 0.4rem;
}

.quack-item .main .title {
  display: inline;
  font-weight: 400;
  font-size: var(--font-rg, 1rem);
}
.quack-item .main .from {
  color: var(--color-text-subtle);
  font-size: var(--font-xs, 0.8rem);
}
.quack-item .meta {
  color: var(--color-text-subtle);
  font-size: var(--font-xs, 0.9rem);
}

.quack-submit {
  margin-block-start: 1rem;
  margin-block-end: 3rem;
}
.quack-submit textarea {
  inline-size: min(100%, 35rem);
  block-size: 7rem;
}
.quack-submit button {
  display: block;
  font-family: monospace;
  padding-inline: 0.3rem;
}

.quack-comment {
  margin-block-start: 1rem;
}
.quack-comment .meta {
  color: var(--color-text-subtle);
  font-size: var(--font-xs);
}
.quack-comment .text {
  font-size: var(--font-sm);
  max-width: 75rem;
}
.quack-comment .reply {
  font-size: var(--font-xs);
}
.quack-comment .children {
  margin-inline-start: 2rem;
}

.quack-user {
  color: var(--color-text-subtle);
  table-layout: auto;
}
.quack-user tr > * + * {
  padding-inline-start: 0.5rem;
}
.quack-user .links {
  display: flex;
  flex-direction: column;
}

.site-footer {
  font-size: var(--font-sm);
  border-block-start: 2px solid var(--color-brand, green);
  margin-block-start: 1rem;
  padding-block-start: 1.5rem;
  padding-block-end: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.75rem;
}
.site-footer ul {
  font-size: var(--font-xs);
  list-style-type: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.site-footer ul > *:not(:last-child) {
  position: relative;
  margin-inline-end: 0.7rem;
}
.site-footer ul > *:not(:last-child)::before {
  content: " ";
  position: absolute;
  inset-inline-end: -0.35rem;
  inset-block-start: 20%;
  inline-size: 1px;
  block-size: 60%;
  background-color: black;
}
.site-footer input {
  max-inline-size: 16ch;
}

/*# sourceMappingURL=style.css.map */