/* RemilioStrategy. made in paint. on purpose. */
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #e9e3de url("img/tile.png") repeat;
  background-size: 257px 104px;
  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.45;
  color: #000;
}
a { color: #0000ee; }
a:visited { color: #551a8b; }
a:hover { color: #ff0000; background: #ffe800; }
img { max-width: 100%; }

:root {
  --impact: Impact, "Anton", "Arial Black", sans-serif;
  --comic: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive;
  --papyrus: Papyrus, fantasy;
  --money: #28d23c;
  --red: #eb0000;
  --yellow: #ffe800;
  --pink: #ff3fa4;
  --orange: #ff7a00;
  --lime: #78e628;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 10px 16px 70px; position: relative; }

/* marquees */
.top {
  display: block; background: #000; color: var(--lime);
  font-family: "Courier New", Courier, monospace; font-size: 14px; font-weight: bold;
  padding: 6px 0; white-space: nowrap;
}
.top2 {
  display: block; background: var(--yellow); color: var(--red);
  font-family: var(--impact); font-size: 22px; letter-spacing: 1px;
  padding: 3px 0; border-top: 3px solid #000; border-bottom: 3px solid #000; white-space: nowrap;
}

/* header */
.hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0 4px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #000; transform: rotate(-2deg); }
.brand:hover { background: none; }
.brand img { height: 40px; image-rendering: pixelated; }
.brand .strat {
  font-family: var(--impact); font-size: 32px; color: var(--orange);
  -webkit-text-stroke: 1.5px #000; text-shadow: 3px 3px 0 #000;
  display: inline-block; transform: rotate(-4deg) translateY(4px);
}
nav.menu { font-family: var(--comic); font-weight: bold; font-size: 15px; }
nav.menu a { margin: 0 5px; display: inline-block; }
nav.menu a:nth-child(odd) { transform: rotate(-3deg); }
nav.menu a:nth-child(even) { transform: rotate(2deg); }

/* the banner on the page */
.bannerimg {
  display: block; width: 100%; height: auto; border: 4px solid #fff; outline: 3px solid #000;
  box-shadow: 9px 9px 0 #000; transform: rotate(-1deg); margin: 18px 0 10px; position: relative;
}
.tape { position: absolute; width: 120px; height: 30px; background: rgba(240, 230, 190, 0.8); z-index: 5; }

/* boxes */
.box {
  background: #fff; border: 3px solid #000; box-shadow: 8px 8px 0 #000;
  padding: 26px 26px; margin: 46px 0; position: relative; transform: rotate(-0.6deg);
}
.box.alt { transform: rotate(0.7deg); }
.box.yellow { background: #fff6b0; }
.box.pink { background: #ffd6ec; }
.box.lime { background: #e3ffc9; }
.box.blue { background: #d9e6ff; }
@media (max-width: 640px) { .box { padding: 20px 14px; margin: 38px 0; } }

h2 {
  font-family: var(--impact); font-weight: normal; font-size: 40px; line-height: 1; margin: 0 0 6px;
  color: var(--red); -webkit-text-stroke: 1px #000; text-shadow: 3px 3px 0 var(--yellow), 6px 6px 0 #000;
  letter-spacing: 1px; transform: rotate(-1.5deg); display: inline-block;
}
.sub { font-family: var(--comic); font-size: 16px; margin: 2px 0 14px; color: #222; }
.sub b { color: var(--red); }
h3 { font-family: var(--comic); font-size: 20px; margin: 20px 0 6px; text-decoration: underline wavy var(--pink); }
.note { font-family: var(--comic); font-size: 14px; color: #333; }
.big { font-size: 22px; }

/* hero */
.hero {
  background: repeating-conic-gradient(from 0deg at 72% 45%, #fff07a 0deg 6deg, #ffc4e3 6deg 12deg);
  min-height: 560px; overflow: hidden;
}
.hero .left { position: relative; z-index: 3; max-width: 54%; }
@media (max-width: 760px) { .hero .left { max-width: 100%; } }
.ticker {
  font-family: var(--impact); font-size: clamp(64px, 13vw, 128px); line-height: 0.95; margin: 6px 0 4px;
  color: var(--money); -webkit-text-stroke: 3px #000; text-shadow: 7px 7px 0 #000;
  transform: rotate(-4deg); display: inline-block; letter-spacing: 1px; font-weight: normal;
}
.line {
  font-family: var(--impact); font-size: clamp(26px, 4.4vw, 40px); color: #fff; -webkit-text-stroke: 1.5px #000;
  text-shadow: 3px 3px 0 #000; transform: rotate(-1.5deg); display: inline-block; margin: 6px 0 4px;
}
.btc { font-family: var(--papyrus); font-size: 22px; margin: 6px 0 0; }
.btc s { text-decoration-color: var(--red); text-decoration-thickness: 4px; }
.btc .we { font-family: var(--comic); font-weight: bold; color: var(--red); display: inline-block; transform: rotate(-3deg); margin-left: 8px; }
.ca {
  font-family: "Courier New", Courier, monospace; font-size: 15px; font-weight: bold; word-break: break-all;
  background: #fff; border: 3px dashed #000; padding: 8px 10px; display: inline-block; max-width: 100%;
}
.copy { font-family: var(--comic); font-weight: bold; font-size: 14px; border: 3px solid #000; background: var(--yellow); padding: 4px 10px; cursor: pointer; margin: 6px 0 0 4px; box-shadow: 3px 3px 0 #000; }
.copy:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }

.btn {
  display: inline-block; font-family: var(--impact); font-size: 24px; letter-spacing: 1px; color: #000;
  background: var(--yellow); border: 3px solid #000; box-shadow: 5px 5px 0 #000; padding: 8px 18px;
  text-decoration: none; margin: 8px 12px 6px 0; cursor: pointer; line-height: 1.15; transform: rotate(-2deg);
}
.btn:nth-of-type(2) { transform: rotate(2deg); }
.btn:visited { color: #000; }
.btn:hover { background: var(--pink); color: #000; }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #000; }
.btn.buy { background: var(--money); font-size: 30px; animation: flash 0.9s steps(2, start) infinite; }
@keyframes flash { 50% { background: var(--yellow); } }
.btn.grey { background: #ccc; color: #555; animation: none; cursor: default; }

.hero-art { position: absolute; right: 0; top: 0; width: 46%; height: 100%; z-index: 2; }
.hero-art .s { position: absolute; filter: saturate(1.25) contrast(1.05); }
.hero-art .b, .hero-art .burst { z-index: 4; }
@media (max-width: 760px) {
  .hero { min-height: 0; }
  .hero-art { position: relative; width: 100%; height: 400px; margin-top: 12px; }
  .hero-art .burst { width: 112px !important; height: 112px !important; font-size: 16px !important; }
  .b { font-size: 17px; padding: 9px 15px; }
}

/* stickers placed anywhere */
.stk { position: absolute; z-index: 6; pointer-events: none; filter: saturate(1.25) contrast(1.05); }
@media (max-width: 760px) { .dm { display: none; } }

/* speech bubbles */
.b {
  position: absolute; background: #fff; border: 3px solid #000; border-radius: 50%;
  padding: 12px 20px; font-family: var(--comic); font-weight: bold; font-size: 20px; white-space: nowrap; line-height: 1.1;
}
.b::after {
  content: ""; position: absolute; left: 22%; bottom: -26px; width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 14px solid transparent; border-top: 28px solid #000;
  transform: rotate(18deg);
}
.b::before {
  content: ""; position: absolute; left: calc(22% + 3px); bottom: -19px; width: 0; height: 0; z-index: 1;
  border-left: 7px solid transparent; border-right: 10px solid transparent; border-top: 21px solid #fff;
  transform: rotate(18deg);
}
.b.r::after { left: auto; right: 22%; transform: rotate(-18deg); }
.b.r::before { left: auto; right: calc(22% + 3px); transform: rotate(-18deg); }

/* starbursts */
.burst {
  position: absolute; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center;
  text-align: center; font-family: var(--impact); font-size: 22px; line-height: 1.05; color: var(--red); background: var(--yellow);
  clip-path: polygon(50.0% 0.0%, 58.2% 13.9%, 71.7% 5.0%, 73.1% 21.1%, 89.1% 18.8%, 83.3% 33.9%, 98.7% 38.9%, 87.0% 50.0%, 98.7% 61.1%, 83.3% 66.1%, 89.1% 81.2%, 73.1% 78.9%, 71.7% 95.0%, 58.2% 86.1%, 50.0% 100.0%, 41.8% 86.1%, 28.3% 95.0%, 26.9% 78.9%, 10.9% 81.2%, 16.7% 66.1%, 1.3% 61.1%, 13.0% 50.0%, 1.3% 38.9%, 16.7% 33.9%, 10.9% 18.8%, 26.9% 21.1%, 28.3% 5.0%, 41.8% 13.9%);
  filter: drop-shadow(0 0 0 #000);
}
.burst.green { background: var(--lime); color: #000; }
.burst.pinkb { background: var(--pink); color: #fff; }
.burstwrap { position: absolute; filter: drop-shadow(4px 5px 0 #000); z-index: 7; }
.burstwrap .burst { position: static; }

/* scrawls */
.scrawl { position: absolute; font-family: var(--comic); font-weight: bold; z-index: 7; white-space: nowrap; text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff; }
.scrawl.red { color: var(--red); }
.scrawl.blue { color: #2850ff; }

/* under construction */
.construction {
  background: repeating-linear-gradient(45deg, #ffe800 0 22px, #000 22px 44px);
  border: 3px solid #000; padding: 8px; margin: 34px 0; transform: rotate(0.8deg);
}
.construction span {
  display: block; background: #fff; border: 3px solid #000; text-align: center; font-family: var(--impact);
  font-size: clamp(18px, 3vw, 28px); padding: 6px 10px; letter-spacing: 1px;
}

/* the pile */
.pile { display: flex; flex-wrap: wrap; justify-content: center; padding: 10px 0 20px; }
.pile img { width: 150px; height: auto; margin: -16px -12px; filter: saturate(1.3) contrast(1.05); transition: transform 0.1s; }
.pile img:nth-child(3n) { width: 185px; transform: rotate(9deg); }
.pile img:nth-child(3n+1) { transform: rotate(-11deg); }
.pile img:nth-child(5n) { width: 125px; transform: rotate(16deg); }
.pile img:nth-child(7n) { transform: rotate(180deg); }
.pile img:hover { transform: scale(1.25) rotate(-6deg); position: relative; z-index: 9; }
@media (max-width: 640px) { .pile img { width: 108px; margin: -10px -8px; } .pile img:nth-child(3n) { width: 130px; } }

/* steps */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 18px 0 8px; }
@media (max-width: 880px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .steps { grid-template-columns: 1fr; } }
.step { border: 3px solid #000; background: #fff; padding: 12px; box-shadow: 5px 5px 0 #000; position: relative; }
.step:nth-child(odd) { transform: rotate(-2deg); }
.step:nth-child(even) { transform: rotate(1.5deg); background: #fffbe0; }
.step .n { font-family: var(--impact); font-size: 52px; color: var(--orange); -webkit-text-stroke: 1.5px #000; text-shadow: 3px 3px 0 #000; line-height: 1; }
.step p { margin: 6px 0 0; font-size: 15px; }
.step .face { position: absolute; right: -14px; top: -22px; width: 70px; transform: rotate(12deg); }
.rules li { margin: 5px 0; }

/* stamps */
.stamp {
  display: inline-block; font-family: var(--impact); font-size: 26px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--red); border: 5px double var(--red); padding: 4px 12px; transform: rotate(-8deg); background: rgba(255, 255, 255, 0.85);
}
.stamp.buy { color: #0a8f2f; border-color: #0a8f2f; }
.stamp.hold { color: #333; border-color: #333; }
.stamp.sell { color: var(--red); border-color: var(--red); }
.stamp.wait { color: #7a4b00; border-color: #7a4b00; }
.sticker { position: absolute; right: -10px; top: -26px; transform: rotate(9deg); z-index: 8; }
@media (max-width: 640px) { .sticker { right: 6px; top: -22px; font-size: 20px; } }
.blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* kpis */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 16px 0; }
@media (max-width: 780px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { border: 3px solid #000; background: #fff; padding: 10px 12px; box-shadow: 5px 5px 0 #000; min-height: 92px; }
.kpi:nth-child(3n) { transform: rotate(1.2deg); background: #fff6b0; }
.kpi:nth-child(3n+1) { transform: rotate(-1deg); }
.kpi:nth-child(4n) { background: #e3ffc9; }
.kpi .v { font-family: var(--impact); font-size: 32px; line-height: 1.1; word-break: break-word; }
.kpi .l { font-family: var(--comic); font-weight: bold; font-size: 13px; color: #222; }
.kpi .s { font-size: 12px; color: #555; font-family: Arial, Helvetica, sans-serif; }

/* treasury gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; margin-top: 14px; }
.card { background: #fff; border: 1px solid #888; padding: 8px 8px 10px; box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.45); font-size: 13px; position: relative; }
.card::before { content: ""; position: absolute; top: -10px; left: 30%; width: 40%; height: 20px; background: rgba(240, 230, 190, 0.85); transform: rotate(-4deg); }
.card:nth-child(odd) { transform: rotate(-2deg); }
.card:nth-child(even) { transform: rotate(1.6deg); }
.card img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; background: #eee; }
.card .t { font-family: var(--comic); font-weight: bold; margin-top: 6px; }
.card .sale { position: absolute; top: -10px; right: -10px; background: var(--yellow); border: 2px solid #000; font-family: var(--impact); font-size: 13px; padding: 2px 6px; transform: rotate(10deg); z-index: 2; }
.empty {
  font-family: var(--comic); font-weight: bold; font-size: 20px; padding: 22px; border: 4px dashed #000;
  background: #fff; margin-top: 14px; text-align: center; transform: rotate(-1deg);
}

/* why */
.why { display: grid; grid-template-columns: 1fr 1.6fr; gap: 22px; align-items: start; }
@media (max-width: 760px) { .why { grid-template-columns: 1fr; } }
.polaroid { background: #fff; padding: 10px 10px 28px; border: 1px solid #888; box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.45); display: inline-block; transform: rotate(-3deg); margin: 0; max-width: 100%; position: relative; }
.polaroid img { width: 100%; max-width: 340px; display: block; }
.polaroid figcaption { font-family: var(--comic); font-weight: bold; font-size: 14px; text-align: center; margin-top: 8px; }
.polaroid::before { content: ""; position: absolute; top: -12px; left: 32%; width: 36%; height: 24px; background: rgba(240, 230, 190, 0.85); transform: rotate(5deg); }
.tweets { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-top: 14px; }
.tweets img { width: min(100%, 300px); border: 2px solid #000; box-shadow: 5px 5px 0 #000; background: #fff; transform: rotate(-2deg); }
.tweets img:nth-child(even) { transform: rotate(2.5deg); }
.tweets img:nth-child(3n) { transform: rotate(-4deg); }

/* wallets */
.wallet { border: 3px solid #000; padding: 10px 12px; background: #fff; margin: 14px 0; font-size: 15px; box-shadow: 4px 4px 0 #000; }
.wallet:nth-of-type(odd) { transform: rotate(-0.8deg); }
.wallet b { font-family: var(--comic); }
.addr { font-family: "Courier New", Courier, monospace; font-size: 13px; word-break: break-all; }
.ok { color: #0a8f2f; font-weight: bold; }
.bad { color: var(--red); font-weight: bold; }
.meh { color: #7a4b00; font-weight: bold; }

/* ledger */
table.ledger { border-collapse: collapse; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #fff; }
table.ledger th { background: var(--yellow); border: 2px solid #000; padding: 6px; text-align: left; font-family: var(--comic); white-space: nowrap; }
table.ledger td { border: 1px solid #000; padding: 5px 6px; vertical-align: top; }
table.ledger tr:nth-child(even) td { background: #fff3fa; }
.scroll { overflow-x: auto; margin-top: 10px; }

/* footer */
.foot { text-align: center; font-size: 14px; padding: 30px 0 0; font-family: var(--comic); font-weight: bold; }
.foot a { margin: 0 6px; }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0 14px; }
.badge88 { display: inline-block; width: 88px; height: 31px; border: 2px outset #ccc; font: bold 10px/26px "Courier New", monospace; text-align: center; overflow: hidden; white-space: nowrap; }
.badge88.k { background: #000; color: var(--lime); }
.badge88.p { background: var(--pink); color: #000; }
.badge88.o { background: var(--orange); color: #000; }
.badge88.y { background: var(--yellow); color: var(--red); }
.badge88.g { background: var(--money); color: #000; }
.badge88.bl { background: #2850ff; color: #fff; }

/* proof page bits */
pre.code { background: #000; color: var(--lime); font-family: "Courier New", Courier, monospace; font-size: 12px; padding: 10px; overflow-x: auto; border: 3px solid #000; white-space: pre-wrap; word-break: break-all; }
.sig { font-family: "Courier New", Courier, monospace; font-size: 12px; word-break: break-all; background: #fff; padding: 6px; border: 2px dashed #000; }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }