/* rat-pit/zine
   table layout, fixed 760, verdana 11, bevels. written the way a page
   was written when the monitor was 1024 wide and css was mostly colours. */

body {
  margin: 0; padding: 14px 0 30px;
  background: #0d0d0f url("media/bg.png") repeat;
  color: #c9c4b8;
  font: 11px Verdana, Tahoma, Geneva, sans-serif;
}

a { color: #7ea6ff; }
a:visited { color: #b48ad6; }
a:hover { color: #e04a42; }

hr { border: none; border-top: 1px solid #35353d; border-bottom: 1px solid #0a0a0c; margin: 14px 0; }
img { border: 0; }
p { margin: 0 0 10px; line-height: 1.55; }
small { font-size: 10px; }

.page { margin: 0 auto; }
.center { text-align: center; }

/* ---- the window ---- */
.win { border: 2px outset #4a4a54; background: #16161a; }
.tbar {
  background: #2c2c34 url("media/tbar.png") repeat-x;
  border-bottom: 1px solid #0a0a0c;
  padding: 4px 8px; color: #ded8cc; font-weight: bold; font-size: 11px;
}
.winbody { padding: 10px; }

/* ---- left column ---- */
.side { border-right: 1px solid #2a2a32; padding-right: 10px; }
.seal { display: block; width: 150px; height: 150px; margin: 0 auto 8px; }
.sbox {
  border: 1px inset #3d3d46; background: #101014;
  padding: 6px 7px; margin-bottom: 8px; line-height: 1.6;
}
.sbox b { color: #ded8cc; }
.sbox hr { margin: 6px 0; }
.on { color: #57c24a; font-weight: bold; }

/* ---- headings ---- */
.head {
  background: #22222a; border: 1px outset #43434c;
  padding: 3px 7px; margin: 0 0 9px;
  color: #ded8cc; font-weight: bold;
}
.head img { vertical-align: -1px; margin-right: 4px; }

/* ---- faq ---- */
.faq { margin: 0; }
.faq dt {
  color: #e6ded0; font-weight: bold; margin: 0 0 3px;
  background: #191920; border-left: 3px solid #a8201c; padding: 3px 6px;
}
.faq dd { margin: 0 0 12px 12px; line-height: 1.6; }

/* ---- roll ---- */
.roll { border: 1px inset #3d3d46; background: #101014; margin-bottom: 12px; }
.roll td { border-bottom: 1px solid #202028; }
.roll tr:last-child td { border-bottom: none; }
.roll b { color: #a8201c; }
.hand { color: #55555e; }

.stamp { width: 240px; height: auto; }

.code {
  border: 1px inset #3d3d46; background: #0a0a0c; color: #8f8a80;
  padding: 7px 8px; margin-bottom: 10px;
  font: 10px "Courier New", Courier, monospace; white-space: pre; overflow-x: auto;
}

.foot { margin: 12px 0 0; text-align: center; color: #6f6a62; font-size: 10px; line-height: 1.7; }

/* narrow screens did not exist then, but people do have phones now */
@media (max-width: 780px) {
  .page { width: 100% !important; }
  .side { display: block; width: auto !important; border-right: none;
          border-bottom: 1px solid #2a2a32; padding: 0 0 8px; margin-bottom: 10px; }
  .side ~ td { display: block; width: auto !important; }
}

/* ---- the front page ---- */
.bigseal { display: block; width: 190px; height: 190px; margin: 4px auto 8px; }
.wordmark {
  font-size: 26px; font-weight: bold; color: #ded8cc; margin-bottom: 14px;
}
.wordmark span { color: #a8201c; }

.clock { margin: 0 auto 6px; }
.clock td { padding: 0 5px; text-align: center; }
.clock b {
  display: block; min-width: 74px;
  border: 2px inset #3d3d46; background: #08080a;
  color: #e6ded0; font: bold 34px "Courier New", Courier, monospace;
  padding: 6px 4px;
}
.clock small { color: #8f8a80; font-size: 10px; }
.clock.done b { color: #a8201c; }

.until { margin: 10px 0 0; color: #8f8a80; }
.ctrl { margin: 0; }
.ctrl a { border: none; }
.ctrl img { vertical-align: middle; }

@media (max-width: 560px) {
  .clock b { min-width: 0; font-size: 24px; padding: 5px 2px; }
  .clock td { padding: 0 2px; }
}

/* ---- things that move ---- */
.ticker {
  background: #101014; border-bottom: 1px solid #0a0a0c;
  padding: 3px 0; color: #8f8a80; font-size: 10px;
}
.bar { margin: 14px 0 2px; }
.bar img { display: block; margin: 0 auto; }
.barlab { margin: 0; color: #8f8a80; letter-spacing: .08em; }

.bigseal, .seal { animation: turn 200s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }

/* the blink, used once, on the one word that earns it */
.on { animation: blink 1.4s steps(1, end) infinite; }
@keyframes blink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .25; } }

.clock b.flash { animation: flash .18s steps(2, end); }
@keyframes flash { from { color: #fff; background: #1a1a20; } to { color: #e6ded0; background: #08080a; } }

.faq dt { transition: background .1s; }
.faq dt:hover { background: #23232c; }

@media (prefers-reduced-motion: reduce) {
  .bigseal, .seal, .on, .clock b.flash { animation: none; }
}

/* the same colour as what is behind it. drag across it. */
.ink { color: #0d0d0f; }
.ink::selection { background: #a8201c; color: #ded8cc; }