/* Retro neon stylesheet */
:root{--bg:#050305;--paper:#0b0b0c;--accent:#06f;--border:rgba(255,255,255,0.06);--accent-yellow:#ffeb3b;--accent-violet:#6c2aa8;--link-default:#ffb07a;--link-visited:#0b6623}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--accent-yellow);
  font-family: 'Montserrat', "Times New Roman", serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.site-header{background:transparent;border-bottom:1px solid rgba(255,255,255,0.04);padding:1rem;text-align:center}
.site-header h1{margin:.2rem;font-size:2rem;color:var(--accent-yellow);text-shadow:none}
.tagline{margin:0;color:rgba(255,255,255,0.45)}
.container{max-width:780px;margin:2rem auto;padding:1rem}
article{background:var(--paper);padding:1.2rem;border:3px solid rgba(255,255,255,0.04);box-shadow:0 6px 18px rgba(0,0,0,0.6)}
h1{font-size:1.6rem;margin:.2rem 0;font-weight:700}
/* Neon text effect for main text */
body, p, li { text-shadow: 0 0 6px rgba(255,235,59,0.08), 0 0 16px rgba(255,200,0,0.04); color:var(--accent-yellow) }
a, a:link { color: var(--link-default); text-decoration: none; }
 a:visited { color: var(--link-visited); }
 .interlink { font-style: normal; font-weight:400; text-decoration: none; }
/* Post list titles stay violet regardless of visited state */
ul.post-list li a, ul.post-list li a:link, ul.post-list li a:visited { color: var(--accent-violet); text-decoration: none; }
 a:hover, a:focus { text-shadow: 0 0 12px rgba(108,42,168,0.9); color: #ffd; text-decoration:none; }
.post-meta{font-size:.9rem;color:rgba(255,255,255,0.45);margin-bottom:.6rem}
.site-footer{text-align:center;padding:1rem;margin-top:2rem;color:#fff}
.site-footer, .site-footer p { color: #fff; text-shadow: none; }

/* lowercase styling for titles, paragraphs and interface bits */
h1, p, .tagline, .post-meta, ul.post-list li, .back-link, .site-header h1, .site-footer { text-transform: lowercase; }

ul.post-list{list-style:none;padding:0}
ul.post-list li{padding:.6rem 0;border-bottom:1px dashed rgba(255,255,255,0.04)}
.gif{max-width:260px;display:block;margin:0.5rem 0;border:2px solid rgba(255,235,59,0.18)}
.gif, .gif-fallback{display:block;margin:0.5rem 0;border:2px solid rgba(255,235,59,0.12)}
.gif-fallback{width:260px;height:140px;background:linear-gradient(90deg, rgba(255,255,255,0.02) 0 10%, rgba(255,255,255,0.01) 10% 20%);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent-yellow);position:relative;overflow:hidden}
.gif-fallback:after{content:'';position:absolute;left:-40%;top:0;width:40%;height:100%;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06));transform:skewX(-20deg);animation:shimmer 1.6s linear infinite}

.accent-yellow{color:var(--accent-yellow);background:rgba(255,235,59,0.04);padding:0 .2rem;border-radius:2px;text-shadow:0 0 10px rgba(255,235,59,0.8)}
.accent-violet{color:var(--accent-violet);padding:0 .2rem;border-radius:2px;text-shadow:0 0 10px rgba(108,42,168,0.75)}

@keyframes shimmer{to{left:140%}}

/* small "jquery-like" entrance animation */
.animate-in{opacity:0;transform:translateY(8px);transition:opacity .45s ease, transform .45s ease}
.animate-in.visible{opacity:1;transform:translateY(0)}

.interlink{font-weight:400}
.back-link{display:inline-block;margin-top:1rem}

/* heading violet variant */
.neon-title { color: var(--accent-violet); text-shadow: 0 0 8px rgba(108,42,168,0.6), 0 0 18px rgba(108,42,168,0.25); }
/* Post page titles (article h1) should use the violet accent */
article h1 { color: var(--accent-violet); }