/* Shared look of the info pages (About, Legal notice, Privacy): the app's grey Minecraft panel on sky */
:root {
  --panel: #c6c6c6;
  --panel-light: #ffffff;
  --panel-dark: #555555;
  --ink: #2f2f2f;
  --ink-soft: #555555;
  --link: #1d4fa8;
  --sky: #7ea6ff;
  --grass: #5b8731;
  --todo: #fff3a0;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --panel: #2f2f2f;
    --panel-light: #4d4d4d;
    --panel-dark: #151515;
    --ink: #e8e8e8;
    --ink-soft: #a6a6a6;
    --link: #8fb4ff;
    --sky: #1b2440;
    --grass: #3f6122;
    --todo: #5a5220;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(var(--sky) 0 70%, var(--grass) 0) fixed;
  color: var(--ink);
  font: 20px/1.35 'Jersey 15', 'Courier New', monospace;
  padding: 24px 16px 48px;
}
.page {
  max-width: 760px;
  margin: 0 auto;
  background: var(--panel);
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 var(--panel-light), inset -2px -2px 0 var(--panel-dark);
  padding: 20px 24px 24px;
}
.home { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; margin-bottom: 8px; }
.home img { width: 36px; height: 36px; border: 2px solid #000; }
.home span { font-size: 26px; }
h1 { font-size: 34px; font-weight: 400; margin: 8px 0 4px; line-height: 1.1; }
h2 { font-size: 25px; font-weight: 400; margin: 26px 0 6px; line-height: 1.15; }
h3 { font-size: 21px; font-weight: 400; margin: 16px 0 4px; }
p, li { color: var(--ink); }
p { margin: 6px 0; }
ul { margin: 6px 0; padding-left: 22px; }
.lead { color: var(--ink-soft); }
.muted { color: var(--ink-soft); font-size: 17px; }
a { color: var(--link); }
address { font-style: normal; }
code { font-family: inherit; background: rgba(0, 0, 0, 0.12); padding: 0 4px; }
/* Details still to be filled in by the site owner */
.todo { background: var(--todo); outline: 1px dashed currentColor; padding: 0 4px; }
.page-foot {
  max-width: 760px;
  margin: 14px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: center;
  font-size: 17px;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.page-foot a { color: #fff; }
@media (max-width: 600px) {
  body { padding: 12px 12px 32px; font-size: 18px; }
  .page { padding: 14px 16px 18px; }
  h1 { font-size: 28px; }
}
