/* 1998. Web safe colors, bevels, Comic Sans, Impact WordArt. Bad on purpose, working on purpose. */
@font-face { font-family: "Comic Neue"; src: url("fonts/comic-neue-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Comic Neue"; src: url("fonts/comic-neue-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Anton"; src: url("fonts/anton-400.woff2") format("woff2"); font-display: swap; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 10px 6px;
  background: #8a6e42 url("img/sack.jpg");
  color: #000;
  font: 16px/1.35 "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive;
}
a { color: #0000ff; }
a:visited { color: #800080; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px dotted #ff00ff; outline-offset: 2px; }
img { max-width: 100%; height: auto; }
section { scroll-margin-top: 8px; padding: 2px 0; }

.page { width: 100%; max-width: 860px; margin: 0 auto; background: #ffffcc; border: 6px ridge #c0c0c0; border-collapse: separate; }
.top { background: #000; color: #00ff00; padding: 4px 0; font: bold 15px "Courier New", monospace; }
.tick { display: block; }

.nav { width: 150px; min-width: 150px; background: #000080; padding: 8px 6px; border-right: 6px ridge #c0c0c0; }
.nav a { display: block; color: #ffff00; font-size: 13px; font-weight: bold; padding: 4px 0; text-decoration: underline; }
.nav a:visited { color: #ffff00; }
.nav a:hover { color: #ff00ff; background: #fff; }
.nav img { vertical-align: middle; }
.navspin { display: block; margin: 0 auto 6px; }
.navtitle { color: #00ffff; font: bold 16px "Courier New", monospace; text-align: center; border: 2px ridge #00ffff; margin-bottom: 6px; }
.navlinks a { color: #00ff00; }
.navlinks a:visited { color: #00ff00; }

.main { padding: 10px 14px 16px; min-width: 0; }
.center { text-align: center; }
.rule { display: block; width: 100%; height: 12px; margin: 14px 0; object-fit: cover; }
img.rule[src*="flames"] { height: 44px; }

/* WordArt */
.wa {
  margin: 10px 0 12px;
  text-align: center;
  font-family: Impact, "Anton", "Arial Black", sans-serif;
  font-weight: normal;
  font-size: clamp(30px, 6.4vw, 46px);
  line-height: 1.05;
  letter-spacing: 1px;
  color: #ff00ff;
  background: linear-gradient(180deg, #ffff00 0%, #ff8000 48%, #ff0000 52%, #800080 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px #000;
  filter: drop-shadow(4px 4px 0 #808080);
  transform: skewX(-8deg);
}
.wa-huge { font-size: clamp(82px, 20vw, 150px); margin: 0; filter: drop-shadow(7px 7px 0 #000080); }

.hero { display: block; }
.heroimg { display: block; margin: 2px auto 0; border: 6px ridge #c0c0c0; }
.thesis { font: 900 clamp(24px, 4.6vw, 36px)/1.1 Impact, "Anton", sans-serif; margin: 12px 0 8px; color: #000; }
.rainbow {
  background: linear-gradient(90deg, #f00, #f80, #dd0, #0a0, #00f, #80f, #f0f);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sub { font-size: 17px; margin: 0; }

.bevel { background: #c0c0c0; border: 3px outset #fff; padding: 10px; }
.bevel-in { border: 3px inset #fff; background: #000; }
.small { font-size: 13px; }
.mono { font: bold 14px "Courier New", monospace; overflow-wrap: anywhere; }
.shout { font-size: 22px; font-weight: 700; color: #ff0000; }
.blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

.getnuts, .nuts, .flow { width: 100%; }
.getnuts td { width: 50%; text-align: center; vertical-align: top; }
.getlabel { font: 24px Impact, "Anton", sans-serif; color: #000080; }
.ca { margin: 6px 0; font-size: 15px; }
.bigbutton {
  display: block; margin: 8px 0; padding: 12px 6px;
  font: 26px Impact, "Anton", sans-serif; letter-spacing: 1px;
  color: #000; background: #00ff00; border: 4px outset #fff; text-decoration: none; text-align: center;
}
.bigbutton:visited { color: #000; }
.bigbutton:active { border-style: inset; }
.bigbutton.off { background: #808080; color: #333; }
button { font: bold 15px "Comic Sans MS", "Comic Neue", cursive; background: #c0c0c0; border: 3px outset #fff; padding: 5px 14px; cursor: pointer; color: #000; }
button:active { border-style: inset; }

/* the sack meter, the one thing this page is remembered by */
.meter { position: relative; height: 54px; overflow: hidden; }
.blocks { display: flex; gap: 2px; height: 100%; padding: 3px; }
.blocks i { flex: 1; background: #1a1a1a; }
.blocks i.on { background: #ff00ff url("img/sack.jpg"); background-blend-mode: hard-light; }
.metertext {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: clamp(22px, 5vw, 32px) Impact, "Anton", sans-serif; color: #fff;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.metersub { text-align: center; margin: 6px 0 10px; font-size: 17px; }
/* the mint meter is the sack meter's brother: same blocks, minted nuts in green */
#mintblocks i.on { background: #00c000 url("img/sack.jpg"); background-blend-mode: hard-light; }
.freshhead { font: 26px Impact, "Anton", sans-serif; letter-spacing: 1px; color: #000080; text-align: center; margin: 14px 0 6px; }
.fresh { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
.fresh a { display: block; background: #fff; border: 3px ridge #c0c0c0; color: #000; text-align: center; text-decoration: none; font: bold 14px "Courier New", monospace; padding-bottom: 3px; }
.fresh a:hover { border-color: #ff00ff; }
.fresh img { display: block; width: 100%; height: auto; aspect-ratio: 1; background: #333; }
.fresh small { display: block; font: 11px "Courier New", monospace; color: #555; }
.stats { width: 100%; }
.stats td:first-child { background: #000080; color: #fff; padding: 5px 8px; font-weight: bold; font-size: 14px; }
.led { background: #000; color: #00ff00; font: bold 16px "Courier New", monospace; text-align: right; padding: 5px 8px; white-space: nowrap; }

.say { font-size: 18px; margin: 0 0 8px; }
.bb { color: #0066ff; font-weight: 700; }
.red { color: #ff0000; }
.green { color: #008000; }
.pic { text-align: center; vertical-align: top; width: 334px; min-width: 334px; }
.pic img { border: 4px ridge #c0c0c0; }
.flow .pic { width: 50%; min-width: 0; }
.flow img { border: 3px solid #000; }

.nuts td { width: 33.33%; vertical-align: top; text-align: center; padding: 8px; border: 4px ridge #c0c0c0; font-size: 15px; }
.nutcell.left { background: #ffccff; }
.nutcell.right { background: #ccffff; }
.nutcell.boths { background: #ffff66; }
.nutcell img { display: block; margin: 0 auto 4px; border: 2px solid #000; }
.pct { font: 44px/1 Impact, "Anton", sans-serif; color: #ff0000; -webkit-text-stroke: 1px #000; margin: 4px 0; }

.pairs, .result, .addresses, .receipts { width: 100%; background: #fff; border-collapse: collapse; font-size: 15px; }
.pairs th, .receipts th { background: #000080; color: #fff; }
.pairs td:last-child { font-weight: 700; }
.result { margin-top: 8px; }
.result .num { text-align: right; font: bold 16px "Courier New", monospace; white-space: nowrap; }
.result .total { background: #ffff00; font-weight: 700; font-size: 18px; }

.rulelist { padding-left: 44px; margin: 0; list-style-image: url("img/arrow.gif"); }
.rulelist li { margin-bottom: 8px; }

.form label { display: block; font-weight: 700; margin-bottom: 8px; }
.form input { display: block; width: 100%; font: bold 16px "Courier New", monospace; padding: 5px; border: 3px inset #fff; background: #fff; color: #000; margin-top: 2px; }
.hp { position: absolute; left: -9999px; }
.walletout { margin-top: 8px; background: #000; color: #00ff00; border: 3px inset #fff; padding: 10px; font: bold 15px "Courier New", monospace; overflow-wrap: anywhere; }
.walletout .hit { color: #ffff00; }
.scrollx { overflow-x: auto; }
.receipts td { font: 13px "Courier New", monospace; white-space: nowrap; }
.addresses { margin-top: 10px; }
.addresses td:first-child { font-weight: 700; white-space: nowrap; }
.nerds { margin-top: 10px; background: #fff; border: 3px inset #fff; padding: 6px 10px; }
.nerds summary { font-weight: 700; cursor: pointer; color: #0000ff; text-decoration: underline; }
.times { font: 16px/1.35 "Times New Roman", Times, serif; }

.lorepic { border: 4px ridge #c0c0c0; }
.traitbox { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; align-items: start; margin-top: 8px; }
.traits { width: 100%; background: #fff; border-collapse: collapse; font-size: 14px; }
.traits th { background: #000080; color: #fff; }
.traits .num { text-align: right; font: bold 14px "Courier New", monospace; white-space: nowrap; }
/* the creed reads like it was typed on a barracks wall: Times, centered, framed */
.creed { font: 18px/1.45 "Times New Roman", Times, serif; background: #000080; color: #ffff00; border: 6px ridge #c0c0c0; padding: 12px 16px; text-align: center; }
.creed p { margin: 0 0 10px; }
.creed p:first-child { font: 26px/1.15 Impact, "Anton", sans-serif; color: #fff; letter-spacing: 1px; }
.creed p:last-child { margin-bottom: 0; font-weight: bold; }
/* X's own frame when it loads, the same words and picture here when it doesn't */
.tweetbox { max-width: 540px; margin: 10px auto; background: #c0c0c0; border: 4px ridge #c0c0c0; padding: 8px; text-align: center; }
.tweetframe { display: block; width: 100%; max-width: 520px; min-height: 200px; border: 0; margin: 0 auto; background: #fff; }
/* collapsed, never display: none: a frame that isn't laid out doesn't load */
.tweetframe.waiting { height: 0; min-height: 0; }
.tweetcard { background: #fff; border: 2px solid #000; padding: 10px; text-align: left; font: 16px/1.35 "Times New Roman", Times, serif; }
.tweetcard[hidden] { display: none; }
.tweetcard p { margin: 0 0 8px; }
.tweetcard img { display: block; margin: 8px auto 0; }
.tweethead { font: bold 14px "Courier New", monospace; margin-bottom: 8px; }
.tweetlink { display: inline-block; margin-top: 8px; font-weight: 700; }
.quote { font: italic 22px "Times New Roman", Times, serif; margin: 8px 16px; padding: 8px 12px; background: #fff; border-left: 8px solid #ff00ff; }

.faq dt { font-weight: 700; color: #800080; margin-top: 8px; }
.faq dd { margin: 0 0 0 16px; }

.book { margin-top: 10px; }
.book .row { background: #fff; border: 2px solid #000; padding: 6px 8px; margin-bottom: 6px; overflow-wrap: anywhere; }
.book .who { color: #ff0000; font-weight: 700; }
.book .when { font-size: 11px; color: #555; }

.foot { display: block; }
.foot p { margin: 8px 0; }
.counter {
  display: inline-block; padding: 3px 10px; background: #000; color: #ff0000; letter-spacing: 6px;
  font: bold 28px "Courier New", monospace; border: 4px inset #c0c0c0;
}
.btns img { margin: 2px; image-rendering: pixelated; }
.ring { margin: 8px auto; background: #c0c0c0; }

@media (max-width: 720px) {
  body { padding: 4px 2px; }
  .page, .page > tbody, .page > tbody > tr, .page > tbody > tr > td { display: block; width: 100%; min-width: 0; }
  .nav { border-right: 0; border-bottom: 6px ridge #c0c0c0; display: flex !important; flex-wrap: wrap; justify-content: center; gap: 2px 10px; }
  .navspin, .navtitle { display: none; }
  .nav a { padding: 3px 2px; font-size: 13px; }
  .nav a img { display: none; }
  .navlinks { display: flex; gap: 10px; flex-basis: 100%; justify-content: center; }
  .main { padding: 8px; }
  .getnuts, .getnuts tbody, .getnuts tr, .getnuts td,
  .nuts, .nuts tbody, .nuts tr, .nuts td,
  .flow, .flow tbody, .flow tr, .flow td,
  #problem > table, #problem > table tbody, #problem > table tr, #problem > table td,
  #program > table, #program > table tbody, #program > table tr, #program > table td { display: block; width: 100%; min-width: 0; }
  .getnuts td { margin-bottom: 8px; }
  .nuts td { margin-bottom: 8px; }
  .heroimg { width: 280px; }
  /* the newest six on a phone, the newest twelve on a computer */
  .fresh a:nth-child(n+7) { display: none; }
  .led { font-size: 14px; }
  .stats td:first-child { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blink { animation: none; }
}