/* 1994-ish vibes (but stable HTML) */

body { margin:0; font-family: "Times New Roman", Times, serif; background:#bfbfbf; }

.marqueeWrap { background:#111; border-bottom:3px solid #333; }
.marquee { color:#ffe84a; font-weight:bold; letter-spacing:1px; padding:6px 10px; white-space:nowrap; overflow:hidden; }

.layout { width: 1000px; margin: 18px auto; border: 4px solid #444; background:#d9d9d9; box-shadow: 0 0 0 6px #999; }

.left, .right { width: 210px; vertical-align: top; padding: 8px; }
.main { width: 580px; vertical-align: top; padding: 10px; }

.heroTitle { text-align:center; font-size: 28px; font-weight: bold; margin-top:4px; }
.glow { background:#111; color:#fff; padding:10px 18px; border:3px solid #7b3f8d; box-shadow: inset 0 0 0 3px #000; display:inline-block; }
.subTitle { text-align:center; margin:6px 0 10px; font-style: italic; }

.box { background:#e6e6e6; border:2px solid #777; margin-bottom:10px; }
.boxTitle { background:#52d12f; color:#000; font-weight:bold; font-size: 12px; padding:5px 7px; border-bottom:2px solid #777; text-transform: uppercase; }

.nav { margin: 6px 0 0; padding-left: 18px; }
.nav li { margin: 4px 0; }

.counter { padding: 10px; text-align:center; }
.counterLabel { margin-bottom:6px; }
.digits { font-family: "Courier New", monospace; font-size: 22px; background:#000; color:#38ff59; display:inline-block; padding:4px 10px; letter-spacing:2px; }

.heroRow { display:flex; gap:10px; align-items: stretch; }
.heroImgWrap { flex: 1 1 54%; background:#fff; border:2px solid #777; padding:8px; }
.heroImg { width:100%; height:auto; image-rendering: pixelated; border:1px solid #999; }
.imgCaption { margin-top:6px; background:#ffe84a; font-weight:bold; text-align:center; border:1px solid #999; padding:4px; }

.noteBox { flex: 1 1 46%; position: relative; padding-bottom: 52px; }
.noteText { padding: 10px; margin:0; line-height:1.2; }

.stamp { position:absolute; right:14px; bottom:12px; width:110px; height:110px; border:4px solid #222; border-radius: 999px; transform: rotate(-14deg); background: rgba(255,255,255,0.65); }
.stampInner { position:absolute; inset:14px; border:2px dashed #222; border-radius:999px; display:flex; align-items:center; justify-content:center; text-align:center; font-family: Arial, sans-serif; font-weight:bold; font-size: 14px; }

.twoCol { display:flex; gap:10px; }
.twoCol .box { flex:1; }

.buttons { padding: 10px; display:flex; gap:10px; flex-wrap:wrap; }
.brandChip { display:inline-block; padding:6px 8px; border:2px outset #999; background:#e9e9ff; font-family: Arial, sans-serif; font-size: 13px; text-decoration:none; color:#000; }
.btn { display:inline-block; padding:8px 10px; border:2px outset #999; background:#ddd; font-family: Arial, sans-serif; font-size: 12px; text-decoration:none; color:#000; }

.news { padding: 10px; }
.newsItem { margin-bottom: 8px; font-family: Arial, sans-serif; font-size: 12px; }
.tag { background:#ffe84a; padding:2px 6px; border:1px solid #000; font-weight:bold; margin-right:6px; }

.webring { padding: 10px; text-align:center; font-family: Arial, sans-serif; font-size: 12px; }
.sep { margin: 0 6px; }

.gifBox { padding: 10px; text-align:center; }
.mascotImg { width: 110px; height: auto; image-rendering: pixelated; border:2px inset #999; }

.footer { text-align:center; margin-top: 10px; padding: 10px; font-family: Arial, sans-serif; font-size: 12px; }
.tiny { font-size: 11px; color:#333; padding: 0 10px 10px; }

.blink { animation: blink 1.1s steps(1,end) infinite; }
.blink2 { animation: blink 1.6s steps(1,end) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.aboutWrap { display:flex; justify-content:center; margin: 20px; }
.aboutBox { width: 800px; background:#e6e6e6; border:2px solid #777; padding: 14px; }