/* =====================================================================
   AARON'S TRADE  ::  styles.css
   cursed on purpose. mobile friendly on accident (i tried).
   ===================================================================== */

html, body { margin: 0; padding: 0; }

body {
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
  color: #ffffff;
  /* moving diamond-plate + caution stripes, no image files needed */
  background-color: #141414;
  background-image:
    repeating-linear-gradient(45deg,  #2b2b2b 0 10px, #1b1b1b 10px 20px),
    repeating-linear-gradient(-45deg, rgba(255,204,0,.10) 0 10px, transparent 10px 20px);
  animation: bgscroll 2.5s linear infinite;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
@keyframes bgscroll { to { background-position: 40px 0, -40px 0; } }

/* keep everything readable on a phone */
center { display: block; }
img { max-width: 100%; height: auto; image-rendering: pixelated; }
a { color: #00ccff; }
a:visited { color: #cc66ff; }
a:hover { color: #ff3366; }
hr.fat { border: none; height: 6px; margin: 14px 6px;
  background: repeating-linear-gradient(90deg,#ffcc00 0 14px,#000 14px 28px); }

/* ---------- top marquee ---------- */
.topmarq {
  background: #000; color: #00ff66; border-bottom: 3px solid #ffcc00;
  font-size: 15px; padding: 6px 0; letter-spacing: .5px;
}

/* ---------- header ---------- */
.topbar { padding: 10px 6px 4px; }
.topbar font[size="7"] {
  text-shadow: 3px 3px 0 #b30000, -1px -1px 0 #000;
  letter-spacing: 1px; line-height: 1.1;
}
.spin  { animation: spin 6s linear infinite; vertical-align: middle; }
.wobble{ animation: wob 1.2s ease-in-out infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wob  { 0%,100%{transform:rotate(-12deg)} 50%{transform:rotate(12deg)} }

/* ---------- the whole point: location ---------- */
.loczone { padding: 6px 8px 12px; }
.ledbox {
  display: inline-block; max-width: 96%;
  background: #001a05; border: 4px ridge #00ff66;
  border-radius: 6px; padding: 12px 18px; margin-top: 6px;
  box-shadow: 0 0 18px #00ff66 inset, 0 0 12px #00cc44;
}
.bigloc {
  font-family: "Courier New", monospace; font-weight: bold;
  color: #39ff14; letter-spacing: 2px;
  font-size: clamp(26px, 8vw, 60px);
  text-shadow: 0 0 8px #39ff14, 0 0 2px #fff;
  vertical-align: middle;
}
.blink { color: #ffcc00; font-size: clamp(20px,5vw,38px); vertical-align: middle;
  animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- under construction ---------- */
.constr {
  background: repeating-linear-gradient(45deg,#ffcc00 0 22px,#111 22px 44px);
  padding: 10px 6px; margin: 4px 0;
}
.constr font[size="4"] {
  background: #ffcc00; padding: 2px 8px; display: inline-block;
  border: 2px solid #000;
}
.constr img { vertical-align: middle; }

/* ---------- main layout table ---------- */
.mainlayout { width: 96%; max-width: 900px; margin: 0 auto; border-collapse: separate; }
.panel {
  background: #101820; border: 3px double #ffcc00; border-radius: 4px;
  width: 50%; text-align: left; vertical-align: top;
}
.panelhdr {
  background: #000; color: #ffcc00; font-weight: bold;
  text-align: center; padding: 5px; border-bottom: 2px solid #ffcc00;
  text-transform: uppercase; letter-spacing: 1px;
}
.tradelist { margin: 8px 0 4px; padding-left: 26px; line-height: 1.6; color: #d8f5ff; }
.tradelist li::marker { content: "\1F527  "; } /* wrench bullets */
.tinynote { color: #ff8888; font-size: 12px; padding: 2px 10px 10px; }
.abouttxt { color: #d8f5ff; padding: 8px 12px; line-height: 1.55; }
.quote {
  margin: 6px 10px; padding: 6px 10px; background: #08121a;
  border-left: 4px solid #00ccff; color: #cfe9ff; font-style: italic; font-size: 14px;
}

/* stack the "table" on phones */
@media (max-width: 620px) {
  .mainlayout, .mainlayout tbody, .mainlayout tr, .panel { display: block; width: auto; }
  .panel { margin: 10px auto; }
}

/* ---------- hire / guestbook buttons ---------- */
.hire { padding: 10px 6px; }
.bigbtn {
  display: inline-block; margin: 6px; padding: 12px 20px;
  background: #ffcc00; color: #000 !important; font-weight: bold;
  text-decoration: none; border: 3px outset #ffe066; border-radius: 4px;
  font-size: clamp(15px,4.5vw,20px); min-width: 200px;
}
.bigbtn:hover { background: #fff; transform: scale(1.03); }
.bigbtn.book { background: #00ccff; border-color: #99e9ff; }

/* ---------- badges ---------- */
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px; }
.badge88 {
  width: 88px; height: 31px; box-sizing: border-box;
  background: #000; color: #fff; border: 1px solid #fff;
  font-family: Arial, sans-serif; font-size: 8px; line-height: 1.1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; letter-spacing: .3px;
}
.badge88 b { color: #ffcc00; font-size: 10px; }
.badge88.grn { background: #003b00; } .badge88.grn b { color:#39ff14; }
.badge88.blu { background: #001a3b; } .badge88.blu b { color:#66ccff; }

.webring { padding: 8px; font-size: 13px; color: #ffcc00; }
.webring a { color: #00ccff; }

/* ---------- hit counter ---------- */
.counter { padding: 10px; font-size: 14px; color: #aaa; }
.odometer {
  font-family: "Courier New", monospace; font-weight: bold;
  background: #000; color: #39ff14; padding: 3px 8px;
  border: 2px inset #444; letter-spacing: 4px; font-size: 20px;
}

/* ---------- footer ---------- */
.footer { padding: 12px 8px 40px; line-height: 1.7; }

/* mouse trail dots (added by cursed.js) */
.trail {
  position: fixed; z-index: 9999; pointer-events: none;
  font-size: 18px; transform: translate(-50%,-50%);
  transition: opacity .6s linear, transform .6s linear; opacity: 1;
}


/* =====================================================================
   ON PURPOSE INCONSISTENT :: every section styled by a different mood.
   nothing matches. that is correct.
   ===================================================================== */
/* let the doom-zoom be scrolled around in both directions */
html, body { overflow-x: auto; }

.deadnote { font-family: Georgia, "Times New Roman", serif; font-style: italic;
  color: #ff9a3c; font-size: 13px; display: inline-block; }

/* each divider is a different scrap of tape */
hr.fat:nth-of-type(1){ background: repeating-linear-gradient(90deg,#ff5a00 0 10px,#000 10px 20px); height:8px; transform: rotate(-.4deg); }
hr.fat:nth-of-type(2){ background:#00ff66; height:3px; }
hr.fat:nth-of-type(3){ background: repeating-linear-gradient(45deg,#00ccff 0 8px,#00224d 8px 16px); height:11px; }
hr.fat:nth-of-type(4){ border-top:4px dashed #ffe14d !important; background:none; height:0; }
hr.fat:nth-of-type(5){ background:#ffcc00; height:5px; transform: rotate(.5deg); }

/* header: crooked + different typeface */
.topbar { transform: rotate(-1deg); }
.topbar font[size="7"] { font-family:"Impact","Arial Black",sans-serif !important; color:#ffd400 !important; text-shadow:3px 3px 0 #7a5c00,-1px -1px 0 #000 !important; display:inline-block; animation: hdrbounce 4.5s ease-in-out infinite alternate; }
@keyframes hdrbounce { from { transform: translateX(-7vw); } to { transform: translateX(7vw); } }

/* location zone: cold blue, serif, unlike everything else */
.loczone { background:#0b0b2a; border:5px groove #00ccff; margin:0 6px; }
.loczone font[size="5"] { font-family:"Times New Roman",serif !important; color:#ffe14d !important; letter-spacing:0; }

/* the two panels look nothing alike */
.mainlayout td:first-child { background:#0a1f0a !important; border:4px ridge #39ff14 !important; transform: rotate(.5deg); }
.mainlayout td:last-child  { background:#241017 !important; border:3px dashed #ff33cc !important; }
.mainlayout td:first-child .panelhdr { background:#39ff14; color:#000; font-family:"Impact",sans-serif; }
.mainlayout td:last-child  .panelhdr { background:#ffd21f; color:#000; font-family:"Comic Sans MS",cursive; }
.tradelist { font-family:"Courier New",monospace; color:#c9ffca; }
.abouttxt  { font-family:Georgia,"Times New Roman",serif; color:#ffd9ec; }
.quote { border-left-color:#ff33cc; font-family:"Trebuchet MS",Arial,sans-serif; }

/* guestbook zone: loud, shoved left, wrong font */
.hire { background:#2a2a00; text-align:left; padding-left:20px; }
.hire .bigbtn.book {
  font-family:"Times New Roman",serif;
  display:inline-block;
  animation: gbspin .45s linear infinite, gbslide 2.6s ease-in-out infinite alternate;
}
@keyframes gbspin  { to { transform: rotate(360deg); } }
@keyframes gbslide { from { margin-left: 0; } to { margin-left: max(0px, calc(100% - 260px)); } }

/* odds & ends each their own vibe */
.webring { font-family:"Times New Roman",serif; transform: rotate(-.5deg); color:#f5c000; }
.webring a { color:#00ff66; }
.counter { font-family:"Comic Sans MS",cursive; color:#00ccff; }
.constr { transform: rotate(.6deg); animation: constrflash .28s steps(1) infinite; }
@keyframes constrflash {
  0%,49%   { background-image: repeating-linear-gradient(45deg,#ffcc00 0 22px,#111 22px 44px); }
  50%,100% { background-image: none; background-color: #ffcc00; }
}
.footer { font-family:"Courier New",monospace; text-align:left; padding-left:16px; }


/* ---------- fake chrome scrollbar (left side, cosmetic) ----------
   lives on <html> + position:fixed so the body's doom-zoom / jpeg
   filter never touch it. pointer-events:none -> it does nothing. */
.fakebar {
  position: fixed; left: 0; top: 0; width: 15px; height: 100vh;
  background: #f1f1f1; border-right: 1px solid #dcdcdc;
  z-index: 2147483647; pointer-events: none;
}
.fakebar-thumb {
  position: absolute; left: 2px; width: 11px; top: 0;
  background: #c1c1c1; border-radius: 7px;
}

/* ---------- bouncing AARON + FREE ESTIMATE stamp (added by cursed.js) ------
   both on <html>, fixed, pointer-events:none so they never block the site. */
.dvd {
  position: fixed; left: 0; top: 0; z-index: 2147483646; pointer-events: none;
  font-family: "Comic Sans MS", "Comic Sans", cursive; font-weight: normal;
  font-size: clamp(44px, 15vw, 120px); letter-spacing: normal;
  color: #ffd400; /* just yellow. normal text. no glow, no stroke. */
  white-space: nowrap; will-change: transform;
}
.stamp {
  position: fixed; left: 0; top: 0; z-index: 2147483645; pointer-events: none;
  font-family: Impact, "Arial Black", sans-serif; font-weight: 900;
  font-size: clamp(18px, 5vw, 34px); letter-spacing: 2px; text-transform: uppercase;
  color: #c0000f; border: 4px solid #c0000f; border-radius: 6px;
  padding: 4px 12px; opacity: .1; white-space: nowrap;
}

/* ---------- wrench bullets + header wrench (low-res jpg) + zoom notice ---- */
.hdrwrench { vertical-align: middle; image-rendering: pixelated; }
.tradelist { list-style: none; padding-left: 32px; }
.tradelist li { position: relative; }
.tradelist li::marker { content: ""; }
.tradelist li::before {
  content: ""; position: absolute; left: -28px; top: 3px;
  width: 20px; height: 20px;
  background: url("wrench.jpg") center / contain no-repeat;
  image-rendering: pixelated;
}
.zoomnote {
  font-family: "Times New Roman", serif;
  color: red;
  background: #00ff00;
  border: 5px ridge blue;
  margin: 3px;
  padding: 2px 2px 2px 2px;
  font-size: 15px;
  font-weight: bold;
  width: 90%;
  text-align: LEFT;
}