/* =========================================================================
   V6e · WEBRING
   Sincere web-1.0 revival. Centered table-based layout, beveled buttons,
   marquee, hit counter, guestbook, webring nav. Times + Verdana + Comic
   for one element only. Web-safe pastel palette.
   ========================================================================= */

/* Reset just enough to let the table-layout breathe; intentionally
   preserve browser-default styling on h1/h2/h3/lists/links. */

html, body { margin: 0; padding: 0; }
body {
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  background: #FFFFCC;
  color: #000080;
  padding: 20px 0;
}

/* ---------------------------------------------------------------------------
   Outer page table — slight 3D bevel reminiscent of a windowed app
   --------------------------------------------------------------------------- */

table.page {
  background: #FFFFFF;
  border: 2px solid #000080;
  box-shadow:
    inset 1px 1px 0 #FFFFFF,
    inset -1px -1px 0 #808080,
    2px 2px 0 #808080,
    4px 4px 0 #606060;
}

/* ---------------------------------------------------------------------------
   Headings — boxy w/ underline, like an early-2000s page
   --------------------------------------------------------------------------- */

h2 {
  font-family: Verdana, sans-serif;
  font-size: 20px;
  color: #000080;
  margin: 0 0 10px 0;
  padding: 4px 8px;
  background: #FFCC00;
  border-left: 6px solid #000080;
  border-bottom: 2px solid #000080;
}
h3 {
  font-family: Verdana, sans-serif;
  font-size: 14px;
  margin: 6px 0 8px 0;
  padding: 0;
}

p { margin: 0 0 12px 0; line-height: 1.55; }
b, strong { font-weight: bold; }
i, em { font-style: italic; }

a, a:link {
  color: #0000EE;
  text-decoration: underline;
}
a:visited { color: #551A8B; }
a:hover   { color: #FF0000; background: #FFFF99; }

code {
  font-family: "Courier New", monospace;
  background: #EEEEEE;
  padding: 0 4px;
  border: 1px solid #CCCCCC;
}

hr {
  height: 2px;
  border: none;
  background: #000080;
  margin: 14px 0;
}
hr[noshade]   { background: #000080; }
hr[size="1"]  { height: 1px; }
hr[size="3"]  { height: 3px; }

img.icon {
  border: 2px solid #000080 !important;
  margin: 0 12px 4px 0;
}

/* ---------------------------------------------------------------------------
   Hit counter — odometer style, mono
   --------------------------------------------------------------------------- */

.hits {
  display: inline-block;
  background: #000000;
  color: #00FF00;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 14px;
  padding: 2px 6px;
  margin: 0 3px;
  border: 2px inset #808080;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
   Marquee — CSS keyframes, no <marquee> element
   --------------------------------------------------------------------------- */

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font-family: Verdana, sans-serif;
  font-size: 13px;
  color: #C00000;
  font-weight: bold;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 38s linear infinite;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ---------------------------------------------------------------------------
   Nav buttons — beveled, outset, classic
   --------------------------------------------------------------------------- */

.navbtn {
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(#FFFFCC, #FFCC66);
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-right: 2px solid #806000;
  border-bottom: 2px solid #806000;
  color: #000080 !important;
  font-family: Verdana, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none !important;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.navbtn:hover {
  background: linear-gradient(#FFCC66, #FFFFCC);
  color: #C00000 !important;
}
.navbtn:active {
  border-top: 2px solid #806000;
  border-left: 2px solid #806000;
  border-right: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
}

/* ---------------------------------------------------------------------------
   Works / essays lists
   --------------------------------------------------------------------------- */

ul.works {
  list-style: square;
  padding-left: 24px;
  margin: 0;
}
ul.works li { margin-bottom: 14px; line-height: 1.55; }
ul.works small { color: #606060; font-style: italic; }

ol.essays {
  padding-left: 24px;
  margin: 0;
}
ol.essays li { margin-bottom: 6px; line-height: 1.55; }
ol.essays small { color: #606060; }

ul.links {
  list-style: "» ";
  padding-left: 18px;
  margin: 8px 0 0 0;
}
ul.links li { margin-bottom: 6px; }

.new {
  display: inline-block;
  background: #FF0000;
  color: #FFFFFF;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 5px;
  letter-spacing: 0.06em;
  vertical-align: 1px;
  animation: blink 1.6s steps(2, start) infinite;
}
.old {
  display: inline-block;
  background: #808080;
  color: #FFFFFF;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 5px;
  letter-spacing: 0.06em;
  vertical-align: 1px;
}

/* ---------------------------------------------------------------------------
   Badges row at bottom — 88x31 spirit, but inline CSS
   --------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  width: 110px;
  height: 31px;
  line-height: 27px;
  text-align: center;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.04em;
  border: 2px outset #808080;
  margin: 3px;
  vertical-align: middle;
  color: #FFFFFF;
}
.badge--a { background: #000080; }
.badge--b { background: #006600; }
.badge--c { background: #800000; }
.badge--d { background: #663300; }
.badge--e { background: #663366; }

/* ---------------------------------------------------------------------------
   Blinking text — keep but tame to a 1.8s cycle
   --------------------------------------------------------------------------- */

.blink {
  animation: blink 1.8s steps(2, start) infinite;
  color: #C00000;
  font-weight: bold;
}
@keyframes blink {
  to { visibility: hidden; }
}

/* ---------------------------------------------------------------------------
   Mobile — let the table reflow gracefully, keep the vibe
   --------------------------------------------------------------------------- */

@media (max-width: 800px) {
  table.page { width: 95% !important; }
  table.page td[width="65%"],
  table.page td[width="33%"] {
    display: block;
    width: 100% !important;
  }
  table.page td[width="1%"] { display: none; }
  .badge { width: 100px; font-size: 9.5px; }
}