/* --- DitchLink 1998-core Styles --- */
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Times New Roman", Times, serif;
  color: #000;
  background-image: repeating-linear-gradient(45deg, #79a7ff 0, #79a7ff 10px, #8fc0ff 10px, #8fc0ff 20px);
  image-rendering: pixelated;
  cursor: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">\
      <circle cx="8" cy="8" r="6" fill="red"/></svg>') 0 0, auto;
}
a { color: #0000ee; }
a:visited { color: #551a8b; }
.page {
  max-width: 960px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 0 6px #000 inset;
  border: 6px ridge #c0c0c0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header {
  background: linear-gradient(90deg, #0033cc, #0099ff);
  color: #fff;
  padding: 8px 12px;
  border-bottom: 6px ridge #c0c0c0;
  text-shadow: 1px 1px 0 #000;
  position: relative;
}
header h1 {
  margin: 0;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 40px;
  letter-spacing: 1px;
}
header .slogan { font-style: italic; font-size: 14px; }
.logo-spin {
  position: absolute; right: 12px; top: 8px;
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffd, #f90);
  border: 3px outset #fff;
  animation: spin 4s linear infinite;
  display: grid; place-items: center;
  font-weight: bold; color: #000;
  font-family: "Comic Sans MS", cursive;
}
@keyframes spin { to { transform: rotate(360deg); } }
nav {
  background: #ffffcc;
  border-bottom: 6px groove #c0c0c0;
  padding: 6px 10px;
  font-family: "Courier New", Courier, monospace;
}
nav a { margin-right: 16px; text-decoration: underline; }
.marquee-wrap {
  border-top: 4px double #000; border-bottom: 4px double #000;
  background: #e0ffe0;
  font-family: "Courier New", Courier, monospace;
}
marquee { font-weight: bold; }
.main {
  flex: 1 0 auto;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
}
.panel {
  border: 6px groove #c0c0c0;
  padding: 10px;
  background: #fefefe;
}
.panel h2 {
  margin: 0 0 8px 0;
  font-family: "Impact", Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  letter-spacing: .5px;
}
.blink { animation: blink 1s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hit-counter {
  font-family: "Courier New", Courier, monospace;
  background: #000; color: #0f0; padding: 2px 6px;
  display: inline-block; border: 3px inset #c0c0c0;
  letter-spacing: 2px;
}
.under-construction {
  display: inline-block;
  padding: 4px 8px;
  border: 3px dashed #f00;
  background: #ffefef;
  transform: skew(-6deg);
  font-weight: bold;
}
footer {
  border-top: 6px ridge #c0c0c0;
  padding: 10px;
  background: #fffff0;
  font-size: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.guestbook, .counter-area { display: flex; align-items: center; gap: 8px; }
.geo {
  font-family: "Courier New", Courier, monospace;
  border: 3px ridge #c0c0c0; padding: 6px; background: #eef;
}
.trail-dot {
  position: fixed; width: 6px; height: 6px; border-radius: 50%;
  background: #ff0; pointer-events: none; opacity: .9;
  box-shadow: 0 0 6px #000;
  will-change: transform, opacity;
  transition: transform .6s ease-out, opacity .8s ease-out;
}
.btn {
  border: 4px outset #c0c0c0; padding: 6px 10px; background: #eaeaea;
  text-decoration: none; display: inline-block;
}
.btn:active { border-style: inset; }
.two-col { columns: 2; column-gap: 16px; }
.mono { font-family: "Courier New", Courier, monospace; }
.center { text-align: center; }
.banner { padding: 8px; background: #e8f0ff; border: 4px inset #c0c0c0; margin: 8px 0; }
table.pricing { width: 100%; border-collapse: collapse; }
table.pricing td, table.pricing th { border: 1px solid #000; padding: 6px; }
table.pricing th { background: #ffffcc; text-align: left; }
.sidebar-only { grid-template-columns: 1fr; }