/* ===========================================================
   mrpigeon's homepage — style.css
   best viewed in 800x600 with 16 million colors!!
   =========================================================== */

body {
  background-color: #000080;
  background-image:
    repeating-linear-gradient(45deg, #0000a0 0, #0000a0 2px, #000080 2px, #000080 40px),
    repeating-linear-gradient(-45deg, #0000a0 0, #0000a0 2px, #000080 2px, #000080 40px);
  color: #00ff00;
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 20px 0;
  cursor: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="), auto;
}

a {
  color: #ffff00;
}
a:visited {
  color: #ff00ff;
}
a:hover {
  color: #ffffff;
  background-color: #ff00ff;
}

/* the main page table */
.page-table {
  width: 770px;
  margin: 0 auto;
  background-color: #000040;
  border: 4px ridge #c0c0c0;
  border-collapse: collapse;
}

.page-table td {
  vertical-align: top;
  padding: 8px;
  border: 1px dashed #4040a0;
}

/* ---------- blink shim ---------- */
.blink {
  animation: blinkAnim 1s steps(1) infinite;
}
@keyframes blinkAnim {
  50% { opacity: 0; }
}

/* ---------- under construction banner ---------- */
.construction-banner {
  text-align: center;
  padding: 6px 0;
  margin-bottom: 6px;
  font-weight: bold;
  color: #000000;
  background: repeating-linear-gradient(
    45deg,
    #ffcc00,
    #ffcc00 20px,
    #000000 20px,
    #000000 40px
  );
  background-size: 200% 200%;
  animation: tapeScroll 4s linear infinite;
  font-family: Impact, "Arial Narrow", sans-serif;
  text-shadow: 1px 1px 0 #fff;
  border: 3px solid #000;
}
@keyframes tapeScroll {
  from { background-position: 0 0; }
  to   { background-position: 80px 0; }
}

/* ---------- page title ---------- */
.page-title {
  text-shadow: 2px 2px 0 #ff00ff;
}

/* ---------- nav column ---------- */
.nav-col {
  width: 150px;
  background-color: #400040;
}
.nav-col ul {
  list-style: none;
  padding-left: 0;
}
.nav-col li::before {
  content: "\2726 ";
  color: #ffff00;
}
.nav-col li {
  margin-bottom: 8px;
}

/* ---------- sidebar ---------- */
.side-col {
  width: 170px;
  background-color: #400040;
  text-align: center;
}

/* blinkies */
.blinkie {
  width: 150px;
  height: 20px;
  margin: 10px auto;
  border: 2px solid #ffffff;
  background-color: #000000;
  color: #00ffff;
  font-size: 10px;
  line-height: 20px;
  font-family: "Courier New", monospace;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
}

/* 800x600 badge */
.retro-badge {
  width: 150px;
  margin: 10px auto;
  padding: 4px;
  border: 2px outset #c0c0c0;
  background-color: #000080;
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
}

/* webring widget */
.webring {
  width: 150px;
  margin: 10px auto;
  padding: 6px;
  border: 2px inset #c0c0c0;
  background-color: #202060;
  font-size: 11px;
}
.webring-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.webring-nav a {
  font-size: 10px;
}

/* visitor counter */
.counter-wrap {
  margin: 10px auto;
  width: 150px;
}
.counter-digits {
  background-color: #000000;
  color: #ff0000;
  font-family: "Courier New", monospace;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 4px;
  padding: 4px 6px;
  border: 2px inset #808080;
  text-align: center;
}

/* music button */
.music-button {
  display: inline-block;
  padding: 6px 12px;
  background-color: #ff00ff;
  color: #ffff00;
  border: 2px outset #ffffff;
  font-weight: bold;
  cursor: pointer;
  font-family: "Comic Sans MS", cursive, sans-serif;
}
.music-button:active {
  border-style: inset;
}

/* horizontal rule, 90s style */
hr.old-hr {
  border: none;
  height: 3px;
  background: linear-gradient(to right, #ff00ff, #00ffff, #ffff00, #ff00ff);
}

/* cursor trail sparkle */
.sparkle {
  position: fixed;
  pointer-events: none;
  font-size: 14px;
  color: #ffff00;
  text-shadow: 0 0 4px #fff;
  z-index: 9999;
  transition: opacity 0.6s linear, transform 0.6s linear;
}

/* footer */
.footer {
  text-align: center;
  font-size: 11px;
  padding-top: 8px;
}