/* ============================================================
   corner-of-the-net / style.css
   restyled to match https://pixelprismpower.neocities.org/ -
   tiled purple-stars-bg.gif, Courier New, purple text with a
   thin white outline, plain white/grey links. everything below
   builds on that same look for a full multi-page site.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
  --purple: #b34dff;      /* brightened from the site's plain "purple" for
                              readability across paragraphs & forms */
  --purple-dim: #7a2fbf;
  --white: #ffffff;
  --grey: #a9a9a9;         /* visited links, matches the reference site */
  --black: #000000;
  --panel-black: rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Courier New', Courier, monospace;
  color: var(--purple);
  -webkit-text-stroke: 0.4px var(--white);
  background-color: #000;
  background-image: url("../images/purple-stars-bg.gif");
  background-repeat: repeat;
}

a:link { color: var(--white); }
a:visited { color: var(--grey); }
a:hover { color: var(--purple); }

.page-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 20px 14px 40px;
}

/* ---------- header / banner ---------- */

.site-banner {
  text-align: center;
  padding: 10px 0 4px;
}

.site-banner h1 {
  margin: 0;
  font-size: 2.6rem;
  letter-spacing: 2px;
  color: var(--purple);
  -webkit-text-stroke: 0.6px var(--white);
}

.site-banner p.tagline {
  margin: 6px 0 0;
  font-style: italic;
  color: var(--white);
  -webkit-text-stroke: 0;
}

/* ---------- marquee (css version of the classic tag) ---------- */

.marquee-box {
  background: rgba(0, 0, 0, 0.7);
  border-top: 1px dashed var(--purple);
  border-bottom: 1px dashed var(--purple);
  overflow: hidden;
  white-space: nowrap;
  margin: 10px 0;
  padding: 6px 0;
}

.marquee-track {
  display: inline-block;
  padding-left: 100%;
  animation: marquee-scroll 18s linear infinite;
  color: var(--white);
  -webkit-text-stroke: 0;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 1.3rem;
}

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ---------- nav ---------- */

nav.main-nav {
  text-align: center;
  margin: 14px 0;
  padding: 6px 0;
  font-size: 1.05rem;
}

nav.main-nav a {
  color: var(--white);
  -webkit-text-stroke: 0;
  text-decoration: none;
  padding: 0 4px;
}

nav.main-nav a:hover {
  color: var(--purple);
  text-decoration: underline;
}

nav.main-nav a.current {
  color: var(--purple);
  -webkit-text-stroke: 0.3px var(--white);
  text-decoration: underline;
}

nav.main-nav .sep {
  color: var(--purple-dim);
  padding: 0 2px;
}

/* ---------- content sections ---------- */

.content-box {
  margin-bottom: 26px;
}

.content-box h2 {
  color: var(--purple);
  -webkit-text-stroke: 0.5px var(--white);
  border-bottom: 1px dashed var(--purple-dim);
  padding-bottom: 4px;
}

.content-box p, .content-box li {
  color: var(--white);
  -webkit-text-stroke: 0;
}

.content-box.center {
  text-align: center;
}

/* ---------- sparkle divider ---------- */

.sparkle-divider {
  display: block;
  width: 100%;
  height: 22px;
  margin: 14px 0;
}

/* ---------- badge row / blinkie strip ---------- */

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.badge-row img, .badge-row svg {
  width: 88px;
  height: 31px;
  image-rendering: pixelated;
  border: 1px solid var(--purple-dim);
}

/* bumped-up size for badges that need to actually be readable -
   an inline width="" attribute on the <img> won't win against the
   .badge-row img rule above (CSS beats HTML attributes), so this
   class exists to override it on purpose. SVGs stay crisp at any
   size since they're vector, so no quality loss scaling up. */
.badge-row img.badge-lg {
  width: 176px;
  height: 62px;
  image-rendering: auto;
}

/* ---------- webring / links buttons ---------- */

.button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 8px 0;
}

.button-grid a img {
  width: 88px;
  height: 31px;
  border: 1px solid var(--purple-dim);
  display: block;
}

.link-list {
  list-style: none;
  padding: 0;
}

.link-list li {
  background: var(--panel-black);
  border: 1px dashed var(--purple-dim);
  border-radius: 2px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.link-list li a {
  font-weight: bold;
}

.link-list .desc {
  display: block;
  font-size: 0.85rem;
  color: var(--grey);
  -webkit-text-stroke: 0;
  margin-top: 2px;
}

/* ---------- shrine page ---------- */

.shrine-frame {
  display: block;
  margin: 14px auto;
  max-width: 100%;
  padding: 10px;
  background: #000;
  border: 4px double var(--purple);
  box-shadow: 0 0 14px rgba(179, 77, 255, 0.6);
}

.shrine-frame img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--purple-dim);
}

.shrine-caption {
  text-align: center;
  font-style: italic;
  color: var(--grey);
  -webkit-text-stroke: 0;
  margin: 8px 0 0;
}

/* ---------- guestbook ---------- */

.guestbook-form label {
  display: block;
  color: var(--white);
  -webkit-text-stroke: 0;
  font-weight: bold;
  margin-top: 10px;
}

.guestbook-form input[type="text"],
.guestbook-form textarea {
  width: 100%;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  padding: 6px;
  background: #000;
  color: var(--white);
  border: 1px solid var(--purple);
  margin-top: 3px;
}

.guestbook-form textarea {
  min-height: 80px;
  resize: vertical;
}

.guestbook-form button,
.retro-button {
  margin-top: 12px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  font-weight: bold;
  padding: 6px 22px;
  background: #000;
  border: 1px solid var(--purple);
  color: var(--purple);
  -webkit-text-stroke: 0.3px var(--white);
  cursor: pointer;
}

.guestbook-form button:hover,
.retro-button:hover {
  background: var(--purple);
  color: #000;
  -webkit-text-stroke: 0;
}

/* honeypot field - hidden from real visitors, bots often fill it in */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

#guestbook-status {
  margin-top: 8px;
  font-weight: bold;
  color: var(--white);
  -webkit-text-stroke: 0;
}

#guestbook-entries {
  margin-top: 18px;
}

.gb-entry {
  background: var(--panel-black);
  border: 1px solid var(--purple-dim);
  border-radius: 2px;
  padding: 10px 12px;
  margin-bottom: 12px;
  position: relative;
}

.gb-entry .gb-name {
  font-weight: bold;
  color: var(--purple);
  -webkit-text-stroke: 0.3px var(--white);
  font-size: 1.05rem;
}

.gb-entry .gb-date {
  float: right;
  font-size: 0.75rem;
  color: var(--grey);
  -webkit-text-stroke: 0;
}

.gb-entry .gb-message {
  margin: 6px 0 0;
  color: var(--white);
  -webkit-text-stroke: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- visitor counter ---------- */

.counter-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #000;
  border: 1px solid var(--purple);
  padding: 6px 10px;
  margin: 10px auto;
}

.counter-label {
  color: var(--white);
  -webkit-text-stroke: 0;
  font-size: 0.95rem;
}

.counter-digits {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 1.7rem;
  letter-spacing: 4px;
  background: #111;
  color: var(--purple);
  -webkit-text-stroke: 0.3px var(--white);
  padding: 2px 8px;
  border: 1px solid var(--purple-dim);
  text-shadow: 0 0 6px var(--purple);
}

/* ---------- footer ---------- */

footer.site-footer {
  text-align: center;
  font-style: italic;
  color: var(--grey);
  -webkit-text-stroke: 0;
  font-size: 0.85rem;
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px dashed var(--purple-dim);
}

footer.site-footer p {
  margin: 6px 0;
}

footer.site-footer img.neocities-badge {
  margin-top: 6px;
  border: none;
}

.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% { opacity: 0; }
}

@media (max-width: 480px) {
  .site-banner h1 { font-size: 1.9rem; }
}