body {
  background-color: #0d3d7a;
  background-image:
    linear-gradient(#0a3468 1px, transparent 1px),
    linear-gradient(90deg, #0a3468 1px, transparent 1px);
  background-size: 24px 24px;
  color: #ffffff;
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
  margin: 0;
  padding: 20px;
}

.page {
  max-width: 780px;
  margin: 0 auto;
  background: #06254d;
  border: 6px ridge #ffffff;
  padding: 16px;
}

.site-header {
  text-align: center;
  margin-bottom: 10px;
}
.site-header img.logo {
  width: 110px;
  height: 110px;
}
h1 {
  text-align: center;
  color: #ffffff;
  text-shadow: 2px 2px #000000;
  font-size: 2.3em;
  letter-spacing: 1px;
  margin: 6px 0 0 0;
}
h1 .paw { color: #ffffff; }

.marquee-wrap {
  background: #000000;
  color: #ffffff;
  font-weight: bold;
  padding: 4px 0;
  border: 2px dashed #ffffff;
  margin-bottom: 12px;
}

hr.pawline {
  border: 0;
  text-align: center;
  height: 1.4em;
  letter-spacing: 12px;
  color: #ffffff;
  font-size: 1.2em;
}
hr.pawline:before {
  content: "\1F43E \1F43E \1F43E \1F43E \1F43E \1F43E \1F43E \1F43E \1F43E \1F43E";
}

.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

table.layout { width: 100%; border-collapse: collapse; }
table.layout td { vertical-align: top; padding: 10px; }

.sidebar {
  width: 190px;
  background: #000000;
  border: 2px solid #ffffff;
  border-radius: 8px;
}
.sidebar b.heading { color: #ffffff; }
.sidebar a {
  display: block;
  color: #cfe0ff;
  text-decoration: none;
  padding: 4px 0 4px 20px;
  font-weight: bold;
  position: relative;
}
.sidebar a:before { content: "\1F43E"; position: absolute; left: 0; }
.sidebar a:hover { color: #ffffff; text-decoration: underline; }
.sidebar a.current { color: #ffffff; text-decoration: underline wavy; }

.construction {
  text-align: center;
  background: #ffffff;
  color: #06254d;
  border: 3px dashed #000000;
  padding: 8px;
  font-weight: bold;
  margin: 12px 0;
  border-radius: 6px;
}
.construction .barsign {
  display: inline-block;
  background: repeating-linear-gradient(45deg, #000000 0, #000000 10px, #ffffff 10px, #ffffff 20px);
  color: #000;
  padding: 4px 10px;
  border: 2px solid #000000;
  margin: 0 6px;
}

.fursona-card {
  background: #000000;
  border: 3px solid #ffffff;
  border-radius: 10px;
  padding: 12px;
  margin: 14px 0;
}
.fursona-card table td { padding: 4px 8px; vertical-align: top; }
.fursona-portrait {
  width: 120px;
  height: 120px;
  background: #06254d;
  border: 3px dashed #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3em;
  text-align: center;
}
.fursona-card h2 { color: #ffffff; margin-top: 0; }
.fursona-card .label { color: #cfe0ff; font-weight: bold; }

.counter {
  font-family: "Courier New", monospace;
  background: #000;
  color: #ffffff;
  border: 2px inset #888;
  padding: 4px 10px;
  letter-spacing: 4px;
  font-size: 1.3em;
}

.guestbook { text-align: center; margin: 16px 0; }
.guestbook a, .cta {
  background: #000000;
  color: #fff;
  padding: 6px 14px;
  border: 2px outset #ffffff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  display: inline-block;
}

.affiliates { text-align: center; margin: 14px 0; }
.aff-badge {
  display: inline-block;
  width: 88px;
  height: 31px;
  line-height: 31px;
  background: #000000;
  color: #cfe0ff;
  border: 1px solid #ffffff;
  font-size: 0.65em;
  font-family: "Courier New", monospace;
  margin: 3px;
  vertical-align: middle;
}

.webring {
  text-align: center;
  font-size: 0.85em;
  color: #9fc0ef;
  border-top: 2px solid #000000;
  margin-top: 20px;
  padding-top: 10px;
}
.webring a { color: #ffffff; }

.badge-row { text-align: center; margin: 14px 0; }
.badge {
  display: inline-block;
  background: #000000;
  color: #ffffff;
  border: 2px solid #ffffff;
  font-family: "Courier New", monospace;
  font-size: 0.7em;
  padding: 3px 6px;
  margin: 2px;
}

.content-box {
  background: #000000;
  border: 2px solid #ffffff;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0;
}
.content-box h2 { color: #ffffff; margin-top: 0; }
.content-box .edit-note {
  color: #9fc0ef;
  font-size: 0.8em;
  font-style: italic;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0;
}
.gallery-slot {
  background: #06254d;
  border: 2px dashed #ffffff;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  color: #9fc0ef;
  text-align: center;
}

form.retro-form { width: 100%; }
form.retro-form label { display: block; margin: 8px 0 2px 0; color: #cfe0ff; font-weight: bold; }
form.retro-form input, form.retro-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: #06254d;
  color: #fff;
  border: 2px inset #ffffff;
  padding: 6px;
  font-family: inherit;
}
form.retro-form button {
  margin-top: 10px;
  background: #000000;
  color: #fff;
  border: 2px outset #ffffff;
  padding: 6px 16px;
  font-weight: bold;
  cursor: pointer;
}

footer {
  text-align: center;
  font-size: 0.8em;
  color: #9fc0ef;
  margin-top: 10px;
}