/* RG-DesktopLink site: a plain, classic page. No fonts to download, no frameworks. */

:root {
  --paper: #f8f6f0;
  --ink: #222;
  --muted: #5d5d5d;
  --rule: #cfcabd;
  --link: #1d4f91;
  --visited: #5b3d86;
  --box: #fff;
  --note: #fffbe6;
  --note-rule: #e2d38c;
  --lime: #c8f135;
}

html { background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 Georgia, "Times New Roman", serif;
}
.page { max-width: 800px; margin: 0 auto; padding: 22px 16px 36px; }

header .brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink); text-decoration: none;
  font-size: 30px; font-weight: bold; letter-spacing: -0.5px;
}
header .brand img { border-radius: 10px; }
header .tag { margin: 4px 0 12px; color: var(--muted); font-style: italic; }

nav {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 7px 0; font: 14px/1.8 Verdana, Geneva, sans-serif;
}
nav a { margin-right: 4px; }

a { color: var(--link); }
a:visited { color: var(--visited); }

h1 { font-size: 27px; margin: 26px 0 8px; }
h2 { font-size: 22px; margin: 34px 0 10px; padding-bottom: 3px; border-bottom: 1px solid var(--rule); }
h3 { font-size: 18px; margin: 22px 0 6px; }
p, ul, ol { margin: 0 0 12px; }
li { margin-bottom: 4px; }
code, kbd {
  font: 14px Consolas, "Courier New", monospace;
  background: var(--box); border: 1px solid var(--rule); padding: 0 4px;
}
kbd { border-bottom-width: 2px; }

figure { margin: 18px 0 22px; }
figure img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid #8f8a7e; box-shadow: 3px 3px 0 #ddd8cb;
}
figcaption { margin-top: 6px; font-size: 14px; color: var(--muted); font-style: italic; }

table { border-collapse: collapse; width: 100%; margin: 8px 0 16px; background: var(--box); }
th, td { border: 1px solid #b9b3a5; padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: #ece7da; font-weight: bold; }
td.num { white-space: nowrap; }

.button, button.button {
  display: inline-block; cursor: pointer;
  background: var(--link); color: #fff !important; text-decoration: none;
  border: 1px solid #123866; padding: 6px 14px;
  font: bold 14px Verdana, Geneva, sans-serif;
}
.button:hover { background: #163f74; }
.button.soon, .button.soon:hover { background: #8a8578; border-color: #77736a; cursor: default; }
table.downloads th { width: 34%; }

.key {
  font: 15px/1.5 Consolas, "Courier New", monospace; word-break: break-all;
  background: var(--box); border: 1px dashed #777; padding: 10px 12px;
}
.note { background: var(--note); border: 1px solid var(--note-rule); padding: 9px 13px; }
.small { font-size: 14px; color: var(--muted); }
.hidden { display: none; }
.toc { background: var(--box); border: 1px solid var(--rule); padding: 10px 14px 4px; }
.toc ol { margin-bottom: 6px; }

footer {
  margin-top: 44px; padding-top: 10px; border-top: 1px solid var(--rule);
  font: 13px/1.7 Verdana, Geneva, sans-serif; color: var(--muted);
}
footer p { margin: 0 0 6px; }

@media (max-width: 520px) {
  body { font-size: 16px; }
  header .brand { font-size: 24px; }
  th, td { padding: 6px; }
}