/* Neocities-friendly Y2K stylesheet
   - All CSS variables removed
   - No 'inset' usage
   - Literal colors used throughout
   - Keeps layout, colors, and retro feel */

html{box-sizing:border-box}
/* set common elements to inherit box-sizing from html (avoid using the universal selector '*') */
body,div,header,footer,main,section,article,aside,nav,h1,h2,h3,h4,h5,h6,p,ul,ol,li,a,img,figure,figcaption,button,input,textarea{box-sizing:inherit}
html,body{height:100%;margin:0;padding:0}
/* older, boxy textured background to feel like classic forums */
body{font-family: Tahoma, Verdana, Arial, sans-serif; color:#222; background:#d6d9de url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='6' height='6' fill='%23d6d9de'/%3E%3Cpath d='M0 0h3v3H0z' fill='%23cfcfcf'/%3E%3C/svg%3E") repeat}

.page{width:100%;display:flex;justify-content:center;padding:20px 0}
.wrapper{width:980px;min-height:80vh;background:#f7fbfa;border:2px solid #9aa0a8;box-shadow:0 6px 0 rgba(0,0,0,0.06);}

.masthead{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;background:#2a75ff;color:#fff;border-bottom:3px solid #1a4fb2}
.masthead .brand{font-size:26px;font-weight:800;color:#fff;margin:0;padding:6px 0;text-shadow:1px 1px 0 rgba(0,0,0,0.25)}
.masthead .site-links{margin-left:16px}
.masthead .site-links a{color:#fff;text-decoration:none;margin-left:12px;font-weight:700;font-size:0.95rem}
.masthead .site-links a:hover{text-decoration:underline}

/* small tabbed navigation under banner (forum style) */
.tabs{display:flex;background:#eef6ff;border-top:3px solid rgba(0,0,0,0.04)}
.tabs .tab{padding:8px 12px;color:#2a75ff;text-decoration:none;border-right:1px solid rgba(0,0,0,0.04);font-weight:700}
.tabs .tab.active{background:#fff;border-bottom:3px solid #2a75ff}

.accent-strip{height:12px;background:#e9eef8;border-top:1px solid #c7ced8;border-bottom:1px solid #c7ced8;margin-bottom:6px}
.marquee{overflow:hidden;white-space:nowrap;background:#f4f8ff;padding:8px 12px;color:#000;font-size:0.95rem;border-left:1px solid #d7dce3;border-right:1px solid #d7dce3}
.marquee .inner{display:inline-block;padding-left:100%;animation:marquee 18s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}

.layout{display:flex}
.sidebar{width:220px;padding:12px;border-right:2px solid #cfd6dd;background:#eef3f8}
.main{flex:1;padding:14px}

.box{background:#fff;padding:10px;margin-bottom:12px;border:1px solid #cfd6dd;border-radius:2px}

/* posts — keep block flow but give them a forum-like boxed look */
.content .post{display:block;padding:10px;border:1px solid #c9ced4;background:#ffffff;margin-bottom:10px}
.content .post:nth-child(even){background:#fbfdff}

/* optional richer post layout when markup includes .post-avatar and .post-body */
.post.has-avatar{display:flex}
.post .post-avatar{width:72px;flex:0 0 72px;margin-right:12px}
.post .post-avatar img{width:72px;height:72px;display:block;border:1px solid #bfc6cd}
.post .post-body{flex:1}
.post .post-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.post .post-header h3{margin:0;font-size:1.02rem;color:#123a7a}
.post .post-meta{font-size:0.82rem;color:#666;font-family: Tahoma, 'Courier New', monospace}
.post .post-content{color:#111;line-height:1.45}
.post .post-actions{margin-top:8px;font-size:0.9rem}
.post .post-actions a{color:#123a7a;text-decoration:none;margin-right:10px}

/* smaller signatures look */
.signature{font-size:0.9rem;color:#666;border-top:1px dashed rgba(0,0,0,0.05);padding-top:8px;margin-top:10px}

.nav-list a{display:block;padding:8px 6px;color:#123a7a;text-decoration:none;border-radius:2px}
.nav-list a:hover{background:#eef6ff}

.hero{background:#fff8fb;padding:12px;border:1px solid #dfe6ec}
.hero h2{margin:0 0 8px 0;color:#030b1a}
.btn{display:inline-block;padding:6px 10px;background:#e9e9e9;color:#222;border-radius:2px;text-decoration:none;border:1px solid #8a8a8a;font-weight:700;box-shadow:0 3px 0 #8a8a8a}
.btn.small{padding:4px 8px;font-size:0.9rem}

/* older forum look: thread titles and small meta */
article.post{background:transparent;padding:0;margin:0;border:0}
article.post h3{margin:0}

.badge{display:inline-block;padding:3px 8px;background:#ff8a2a;color:white;border-radius:999px;font-size:0.8rem;font-weight:700;margin-left:6px}

.avatar{width:56px;height:56px;border-radius:2px;overflow:hidden;border:1px solid #bfc6cd;display:block}
.avatar img{width:100%;height:100%;object-fit:cover}

.shimmer{position:relative;overflow:hidden}
.shimmer:after{content:'';position:absolute;left:-120%;top:0;width:60%;height:100%;background:rgba(255,255,255,0.06);transform:skewX(-12deg);animation:shimmer 3.2s linear infinite}
@keyframes shimmer{to{left:200%}}
.flicker{animation:flicker 3s infinite}
@keyframes flicker{0%,100%{opacity:1}50%{opacity:0.9}}

.section-break{border:0;height:1px;margin:18px 0;background:linear-gradient(90deg,transparent,#c0c8ff,transparent)}

.site-footer{padding:12px;text-align:center;font-size:0.9rem;color:#666;border-top:1px solid #cfd6dd;background:#f6f8fa}

@media(max-width:900px){
  .wrapper{width:95%}
  .layout{flex-direction:column}
  .sidebar{width:100%;border-right:none;border-bottom:1px solid rgba(0,0,0,0.04)}
}

.scanlines{position:fixed;left:0;right:0;top:0;bottom:0;pointer-events:none;background-image:repeating-linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.02) 4px, transparent 4px, transparent 8px);opacity:0.18}

/* Note: This file uses literal colors and avoids CSS variables and 'inset' so it should be Neocities-compatible */