/* =====================================================================
   highlyreputable.company
   Stylesheet. Written in Notepad. Do not open in a good text editor.
   ===================================================================== */

:root{
  --void:#000033;
  --lime:#00ff00;
  --cyan:#00ffff;
  --magenta:#ff00ff;
  --yellow:#ffff00;
  --red:#ff0000;
  --silver:#c0c0c0;
}

*{box-sizing:border-box;}

body{
  margin:0;
  padding:8px;
  color:var(--lime);
  font-family:"Comic Sans MS","Chalkboard SE","Comic Neue",cursive,sans-serif;
  font-size:16px;
  line-height:1.45;
  cursor:crosshair;
  background-color:var(--void);
  /* A "starfield". Four radial gradients and a lot of confidence. */
  overflow-x:hidden;
  background-image:
    radial-gradient(#ffffff 1.6px, transparent 1.7px),
    radial-gradient(#ffffcc 1.4px, transparent 1.5px),
    radial-gradient(#88ccff 1.2px, transparent 1.3px),
    radial-gradient(circle at 50% 50%, #1a1a5e 0%, #000022 100%);
  background-size:97px 89px, 151px 137px, 67px 61px, 100% 100%;
  background-position:0 0, 40px 60px, 90px 20px, 0 0;
  background-attachment:fixed;
}

a{color:var(--cyan);text-decoration:underline;}
a:visited{color:var(--magenta);}
a:hover{color:var(--yellow);background:#330066;}
a:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;}

.page{max-width:1000px;margin:0 auto;}
.center{text-align:center;}
.small{font-size:13px;}
.tiny{font-size:11px;line-height:1.35;color:#9fd;}
.big{font-size:28px;}

hr{border:0;border-top:2px dashed var(--magenta);margin:10px 0;}

/* ---------- motion (respected if you'd rather it stopped) ---------- */
@keyframes blink{50%{opacity:0}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes slide{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
@keyframes bob{50%{transform:translateY(-6px)}}

.blink{animation:blink 1s steps(1,end) infinite;font-weight:bold;color:var(--yellow);}
.rainbow{
  background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hue 4s linear infinite;font-weight:bold;
}

@media (prefers-reduced-motion:reduce){
  .blink,.rainbow,.scroller span,.odo-digit,.pointer{animation:none!important;}
  .blink{opacity:1;}
}

/* ---------- scrolling marquee, hand rolled ---------- */
.topbar{
  border:3px ridge var(--yellow);
  background:#000;
  overflow:hidden;
  white-space:nowrap;
  padding:5px 0;
  margin-bottom:10px;
}
.scroller span{
  display:inline-block;
  padding-left:100%;
  color:var(--yellow);
  font-weight:bold;
  letter-spacing:1px;
  animation:slide 26s linear infinite;
}

/* ---------- hero ---------- */
.hero{
  border:6px outset var(--silver);
  background:linear-gradient(180deg,#4b0082,#000033 60%,#003300);
  padding:18px 10px;
  text-align:center;
}
.logo{
  margin:0;
  font-family:Impact,"Haettenschweiler","Arial Black",sans-serif;
  font-size:clamp(28px,7vw,62px);
  letter-spacing:1px;
  text-shadow:3px 3px 0 #000, 6px 6px 0 #660066;
  word-break:break-word;
}
.logo .l1{color:#ff0000}.logo .l2{color:#ff8800}.logo .l3{color:#ffff00}
.logo .l4{color:#00ff00}.logo .l5{color:#00ffff}.logo .l6{color:#ff00ff}
.logo .dot{color:#fff}
.tagline{color:#fff;font-size:15px;margin:8px 0 4px;}
.under{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:10px 0 0;}

/* ---------- nav ---------- */
.nav{
  display:flex;flex-wrap:wrap;gap:4px;justify-content:center;
  background:var(--silver);
  border:3px outset #fff;
  padding:5px;margin:10px 0;
}
.nav a{
  display:flex;align-items:center;gap:5px;
  background:#000080;color:#fff;text-decoration:none;
  border:3px outset #8888ff;
  padding:5px 11px;font-weight:bold;font-size:14px;
}
.nav a:hover{background:var(--magenta);color:#000;border-style:inset;}
.nav a.on{background:#008000;}

/* ---------- layout ---------- */
.layout{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;}
.content{flex:1 1 560px;min-width:0;}
.sidebar{flex:0 0 230px;min-width:220px;}

@media (max-width:760px){
  .sidebar{flex:1 1 100%;}
  body{cursor:auto;}
}

/* ---------- boxes ---------- */
.box{border:4px ridge var(--cyan);background:#000044;margin-bottom:12px;}
.box-t{
  background:linear-gradient(90deg,#000080,#1084d0);
  color:#fff;font-weight:bold;font-size:13px;
  padding:4px 7px;border-bottom:2px solid var(--cyan);
  letter-spacing:1px;
}
.box-b{padding:9px;}

.panel{
  border:5px double var(--magenta);
  background:rgba(0,0,40,.86);
  padding:14px;margin-bottom:14px;
}
.panel h2{
  margin:0 0 10px;color:var(--yellow);
  font-family:Impact,"Arial Black",sans-serif;font-size:26px;
  text-shadow:2px 2px 0 #f0f;letter-spacing:1px;
}
.panel h3{color:var(--cyan);margin:14px 0 6px;font-size:18px;}
.panel p{margin:0 0 10px;}
.panel ul{margin:0 0 10px;padding-left:22px;}
.panel li{margin-bottom:5px;}

/* ---------- odometer ---------- */
.odometer{
  display:inline-flex;gap:1px;padding:3px;max-width:100%;
  background:#000;border:3px inset var(--silver);
}
.odo-digit{
  font-family:"Courier New",monospace;font-weight:bold;font-size:16px;
  color:#0f0;background:#001100;padding:2px 3px;
  border:1px solid #030;text-shadow:0 0 6px #0f0;
}
.odometer .odo-digit:nth-last-child(1){color:var(--yellow);text-shadow:0 0 8px var(--yellow);}

/* ---------- buttons + forms ---------- */
.btn-3d{
  font-family:inherit;font-size:15px;font-weight:bold;
  background:linear-gradient(#ffee55,#cc9900);
  color:#000;border:4px outset #ffdd00;
  padding:7px 16px;cursor:pointer;
}
.btn-3d:hover{background:linear-gradient(#fff,#ff9900);}
.btn-3d:active{border-style:inset;}
.btn-3d:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;}

.gb-form label{display:block;font-weight:bold;color:var(--yellow);margin:9px 0 3px;font-size:14px;}
.gb-form input[type=text],.gb-form textarea{
  width:100%;font-family:"Courier New",monospace;font-size:14px;
  background:#000;color:var(--lime);border:3px inset var(--silver);padding:6px;
}
.gb-form textarea{min-height:110px;resize:vertical;}
.gb-form input:focus,.gb-form textarea:focus{outline:2px solid var(--magenta);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.msg{border:4px ridge;padding:9px;margin-bottom:12px;font-weight:bold;}
.msg.ok{border-color:var(--lime);background:#003300;color:var(--lime);}
.msg.bad{border-color:var(--red);background:#330000;color:#ff8888;}

/* ---------- guestbook entries ---------- */
.entry{border:3px groove var(--silver);background:#000033;margin-bottom:11px;}
.entry-h{
  background:#4b0082;color:#fff;padding:4px 8px;font-size:13px;
  display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;
}
.entry-h .who{font-weight:bold;color:var(--yellow);}
.entry-b{padding:9px;white-space:pre-wrap;word-wrap:break-word;color:#dfd;}
.entry .del{color:#ff8888;font-size:11px;}
.pager{text-align:center;margin:12px 0;}
.pager a,.pager span{padding:3px 8px;border:2px outset var(--silver);margin:0 2px;display:inline-block;}
.pager span{background:#008000;color:#fff;}

/* ---------- misc junk ---------- */
.pointer{display:inline-block;animation:bob 1s ease-in-out infinite;}
.testimonial{border-left:6px solid var(--magenta);padding-left:10px;margin:0 0 12px;font-style:italic;color:#fff;}
.testimonial cite{display:block;font-style:normal;color:var(--cyan);font-size:13px;margin-top:4px;}
.badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0;}
table.junk{width:100%;border-collapse:collapse;border:3px ridge var(--cyan);margin-bottom:12px;}
table.junk th{background:#000080;color:#fff;padding:6px;border:2px groove var(--silver);text-align:left;}
table.junk td{padding:6px;border:2px groove #444488;font-size:14px;}

/* ---------- popup ---------- */
.popup{
  position:fixed;z-index:99;top:14%;left:50%;transform:translateX(-50%);
  width:min(420px,92vw);
  border:4px outset var(--silver);background:#000055;
  box-shadow:8px 8px 0 rgba(0,0,0,.6);
}
.popup-bar{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:linear-gradient(90deg,#800000,#ff0000);
  color:#fff;font-weight:bold;font-size:13px;padding:4px 6px;
}
.popup-bar button{
  font-family:inherit;font-weight:bold;background:var(--silver);color:#000;
  border:2px outset #fff;cursor:pointer;padding:0 8px;
}
.popup-body{padding:14px;text-align:center;}
.popup-body p{margin:0 0 10px;}

.foot{
  border:4px ridge var(--yellow);background:#000022;
  margin-top:14px;padding:12px;text-align:center;
}
.foot img{margin:0 3px;vertical-align:middle;}
.legal{max-width:70ch;margin:8px auto;color:#778;}