/* ===== DialUpChat landing — circa 2002 homepage ===== */

body {
  margin: 0;
  padding: 0 0 24px;
  font-family: "Comic Sans MS", "Tahoma", "Geneva", sans-serif;
  color: #000080;
  background-color: #008080;            /* classic teal */
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 12px, rgba(0,0,0,0.06) 12px 24px);
  text-align: center;
}

a { color: #0000ee; }
a:visited { color: #551a8b; }

/* webring strip across the very top */
.webring {
  background: #000080;
  color: #ffff00;
  font: 11px "Times New Roman", serif;
  padding: 3px 0;
}
.webring a { color: #00ffff; text-decoration: underline; }

/* main page container — a beveled "window" like the old days */
.page {
  width: 760px;
  max-width: 96%;
  margin: 14px auto;
  background: #c0c0c0;
  border: 3px ridge #ffffff;
  text-align: left;
}
.page > tbody > tr > td { padding: 8px; }

/* ===== Masthead ===== */
.masthead { text-align: center; padding: 10px 6px 4px; }
.logo {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 56px;
  letter-spacing: 1px;
  color: #ff00ff;
  text-shadow: 2px 2px 0 #00ffff, 4px 4px 0 #000080;
}
.tagline { font-size: 13px; color: #800000; margin-top: 2px; }
.news {
  display: block;
  margin-top: 8px;
  background: #000000;
  color: #00ff00;
  font: bold 13px "Courier New", monospace;
  padding: 4px 0;
  border: 2px inset #808080;
}

/* ===== Ads ===== */
.ad { border: 2px outset #d4d0c8; background: #ffffcc; margin: 8px 0; }
.ad-banner {
  text-align: center;
  font-weight: bold;
  color: #ff0000;
  padding: 10px 6px;
  background: repeating-linear-gradient(90deg, #ffff00 0 16px, #ffffff 16px 32px);
}
.ad-box { font-size: 12px; }
.ad-head {
  background: #ff0000; color: #ffffff; font-weight: bold;
  padding: 3px 6px; text-align: center; letter-spacing: .5px;
}
.ad-body { padding: 7px; color: #000080; }
.fineprint { font-size: 9px; color: #666; }

/* ===== Layout columns ===== */
.layout { width: 100%; }
.col-side { width: 180px; padding: 0 8px; vertical-align: top; }
.col-main { padding: 4px 14px; vertical-align: top; }

/* hit counter */
.counter {
  margin: 12px 0;
  text-align: center;
  font-size: 12px;
  color: #000;
}
.odometer {
  display: inline-block;
  margin-top: 4px;
  background: #000;
  color: #00ff66;
  font: bold 18px "Courier New", monospace;
  letter-spacing: 3px;
  padding: 4px 8px;
  border: 2px inset #444;
}

/* ===== Main content ===== */
.col-main h1 {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 30px;
  color: #000080;
  margin: 6px 0 4px;
  border-bottom: 3px double #000080;
}
.lede { font-size: 14px; line-height: 1.5; color: #000; font-family: "Tahoma", sans-serif; }

.signon { text-align: center; margin: 16px 0; }
.cta {
  display: inline-block;
  font-family: "Arial Black", sans-serif;
  font-size: 20px;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(#3a6ea5, #004e98);
  padding: 12px 34px;
  border: 3px outset #6f9fd8;
}
.cta:hover { border-style: inset; }
.cta:visited { color: #fff; }
.signon-note { font-size: 11px; color: #800000; margin-top: 5px; }

/* feature section */
.section { margin-top: 14px; }
.section-head {
  background: #000080; color: #ffff00; font-weight: bold;
  padding: 4px 8px; font-family: "Tahoma", sans-serif;
}
ul.features {
  list-style: square;
  font-family: "Tahoma", sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: #000;
  margin: 10px 0;
  padding-left: 26px;
}
ul.features b { color: #000080; }
.honest { font-size: 12px; color: #800000; font-family: "Tahoma", sans-serif; }

.construction {
  margin-top: 16px;
  text-align: center;
  background: #ffff00;
  border: 2px dashed #000;
  font-weight: bold;
  font-size: 12px;
  padding: 6px;
  color: #000;
}

/* ===== Footer ===== */
.footer { text-align: center; margin-top: 14px; padding-top: 8px; border-top: 2px groove #fff; }
.badges { margin-bottom: 6px; }
.badge {
  display: inline-block;
  background: #000;
  color: #c0c0c0;
  font: 10px "Tahoma", sans-serif;
  padding: 3px 6px;
  margin: 2px;
  border: 1px solid #555;
}
.badge b { color: #fff; }
.copyright { font-size: 11px; color: #000080; font-family: "Tahoma", sans-serif; }

/* ===== Blink (because of course) ===== */
.blink { animation: blink 1s steps(1) infinite; }
.blink-soft { animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .blink, .blink-soft { animation: none; }
}

/* keep it usable on phones despite the retro fixed widths */
@media (max-width: 640px) {
  .logo { font-size: 40px; }
  .col-side { display: none; }       /* hide the ad rail on small screens */
  .col-main { padding: 4px 10px; }
}