/* Low-contrast Gruvbox wallpaper and color overrides. */
:root {
  --gruv-bg: #282828;
  --gruv-panel: #32302f;
  --gruv-text: #ebdbb2;
  --gruv-muted: #a89984;
  --gruv-line: #504945;
  --gruv-link: #83a598;
}

body {
  color: var(--gruv-text);
  background-color: var(--gruv-bg);
  background-image: none;
}


.panel {
  background: rgba(50, 48, 47, .92);
  border: 1px #b8bb26;
}

.panel h1 { color: var(--gruv-text); }
.muted, small, .optional, .message-meta { color: var(--gruv-muted); }
input, textarea {
  color: var(--gruv-text);
  background: #3c3836;
  border-color: var(--gruv-line);
}
button[type="submit"] {
  color: var(--gruv-bg);
  background: #d79921;
}
button[type="submit"]:hover { background: #fabd2f; }
.slug-input { border-color: var(--gruv-line); }
.slug-input input { background: #3c3836; }
.alert { background: #3c3836; border-color: var(--gruv-line); }
.share-link, .text-link { color: var(--gruv-link); }
.share-link { background: transparent; }
.message-image img,
.not-found-image {
  width: 320px;
  height: 240px;
  max-width: 100%;
  object-fit: contain;
}
.message-meta { transform: rotate(.5deg); }

body:has(.not-found-screen) { background: #000; }
body:has(.not-found-screen) .shell { width: 100%; max-width: none; padding: 0; }
.not-found-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  background: #000;
}
.not-found-screen .not-found-image {
  width: 100vw;
  height: 100vh;
  max-width: none;
  object-fit: contain;
}