/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Share Tech Mono', monospace; background:#1a1a1a; color:#f0f0f0; line-height:1.6; }

/* Horizontal Scroll Wrapper */
#scroll-wrapper { display:flex; justify-content:center; align-items:flex-start; overflow-x:auto; scroll-behavior:smooth; padding:0 10px; gap:20px; }

/* Sidebars stacked vertically */
.side-gif-left, .side-gif-right { display:flex; flex-direction:column; flex:0 0 auto; gap:10px; }
#wrapper { flex:0 0 auto; max-width:900px; width:100%; padding:20px 0; }

/* Header */
header { text-align:center; margin-bottom:20px; }
.logo { max-width:100%; height:auto; }

/* Buttons */
.button-bar { margin-top:10px; }
.button {
  display:inline-block; padding:12px 24px; background:linear-gradient(to bottom,#ffcc00,#b38f00);
  border:3px solid #000; box-shadow:0 4px #000,inset 0 2px 4px rgba(255,255,255,0.3),inset 0 -2px 4px rgba(0,0,0,0.5);
  font-family:'Orbitron',sans-serif; font-size:1.1em; text-transform:uppercase; color:#000; cursor:pointer; transition:all 0.2s ease; margin:10px; user-select:none;
}
.button:hover { background:linear-gradient(to bottom,#ffe066,#cc9900); box-shadow:0 6px #000,inset 0 2px 6px rgba(255,255,255,0.4),inset 0 -2px 6px rgba(0,0,0,0.6),0 0 10px #ffcc00; }
.button:active { transform:translateY(2px); box-shadow:0 2px #000,inset 0 1px 3px rgba(255,255,255,0.3),inset 0 -1px 3px rgba(0,0,0,0.6); }

/* Content Boxes */
.content-box { background:#111; border:6px solid #555; margin:30px 0; padding:25px; position:relative; box-shadow:0 0 25px rgba(0,255,255,0.25),0 10px 30px rgba(0,0,0,0.8); font-family:'Share Tech Mono',monospace; overflow:hidden; }
.content-box::before { content:''; position:absolute; top:-6px; left:-6px; width:calc(100%+12px); height:calc(100%+12px); border:2px solid #0ff; pointer-events:none; mask: linear-gradient(135deg,transparent 10px,black 0) top left, linear-gradient(-135deg,transparent 10px,black 0) top right, linear-gradient(-45deg,transparent 10px,black 0) bottom right, linear-gradient(45deg,transparent 10px,black 0) bottom left; mask-composite:intersect; -webkit-mask-composite:destination-in; }
.content-box::after { content:''; position:absolute; top:0; left:0; width:6px; height:100%; background:linear-gradient(to bottom,#0ff,transparent); opacity:0.6; animation:flicker 2s infinite; }
@keyframes flicker { 0%,19%,21%,23%,25%,54%,56%,100%{opacity:0.6;} 20%,24%,55%{opacity:0.1;} }
.content-box h2, .content-box p, .content-box ul { position:relative; z-index:2; }
.content-box::marker { color:#ffcc00; }

/* Side GIFs */
.side-gif { width:120px; height:auto; flex-shrink:0; }

/* Gallery Grid */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:15px; margin-top:20px; }
.gallery-item { width:100%; height:150px; object-fit:cover; cursor:pointer; border:2px solid #ffcc00; transition: transform 0.2s, box-shadow 0.2s; }
.gallery-item:hover { transform:scale(1.05); box-shadow:0 0 15px #ffcc00; }

/* Lightbox */
.lightbox { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:9999; justify-content:center; align-items:center; }
.lightbox-content { max-width:90%; max-height:90%; border:4px solid #ffcc00; box-shadow:0 0 50px #0ff; }
.lightbox .close { position:absolute; top:20px; right:30px; color:#ffcc00; font-size:40px; font-weight:bold; cursor:pointer; text-shadow:0 0 10px #0ff,0 0 20px #ffcc00; }

/* Glitch effect keyframes */
@keyframes glitchTop { 0%{clip:rect(0,9999px,0,0);}10%{clip:rect(5px,9999px,25px,0);transform:translate(-2px,-2px);}20%{clip:rect(10px,9999px,40px,0);transform:translate(2px,-1px);}30%,100%{clip:rect(0,9999px,0,0);transform:none;} }
@keyframes glitchBottom { 0%{clip:rect(0,9999px,0,0);}10%{clip:rect(60px,9999px,80px,0);transform:translate(2px,1px);}20%{clip:rect(30px,9999px,60px,0);transform:translate(-1px,2px);}30%,100%{clip:rect(0,9999px,0,0);transform:none;} }

/* Header glitch effect */
h2,h3,h4 { color:#ffcc00; position:relative; font-family:'Orbitron',sans-serif; }
h2::before,h2::after,h3::before,h3::after,h4::before,h4::after { content:attr(data-text); position:absolute; left:0; top:0; width:100%; overflow:hidden; color:#0ff; clip:rect(0,0,0,0); }
h2::before,h3::before,h4::before { animation:glitchTop 3s infinite linear alternate-reverse; }
h2::after,h3::after,h4::after { color:#f0f; animation:glitchBottom 3s infinite linear alternate-reverse; }

/* Link glitch effect */
.glitch-text { color:#ffcc00; position:relative; font-family:'Orbitron',sans-serif; }
.glitch-text::before,.glitch-text::after { content:attr(data-text); position:absolute; left:0; top:0; width:100%; overflow:hidden; clip:rect(0,0,0,0); }
.glitch-text::before { color:#0ff; animation:glitchTop 3s infinite linear alternate-reverse; }
.glitch-text::after { color:#f0f; animation:glitchBottom 3s infinite linear alternate-reverse; }