/* CyberCarnage Terminal - Blue on Black */
:root{
  --bg:#000;
  --neon:#39f;
  --muted:#0b2340;
  --glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--neon);font-family: "VT323", monospace;}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#terminal{width:100%;max-width:1200px;padding:40px;position:relative;z-index:3}
.mono{font-size:20px;line-height:1.3;color:var(--neon);text-shadow:0 0 8px rgba(57,153,255,0.15);}
#boot-text{min-height:160px;white-space:pre-wrap;}

h1#title{font-size:48px;margin:10px 0;opacity:0}
.hidden{opacity:0;pointer-events:none}
#links{margin-top:14px;font-size:18px}

.btn{background:transparent;border:1px solid rgba(57,153,255,0.12);color:var(--neon);padding:8px 12px;margin-right:10px;cursor:pointer;border-radius:4px;font-family:inherit}
.btn:hover{transform:translateY(-2px)}

/* overlay images */
#overlay,#noise{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:5;mix-blend-mode:screen;opacity:0.45}
#noise{mix-blend-mode:overlay;opacity:0.15;filter:blur(0.6px)}
#crt-flicker{position:fixed;inset:0;z-index:6;pointer-events:none;background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.06));animation:flicker 3s linear infinite}

@keyframes flicker{
  0%{opacity:0.02}10%{opacity:0.08}20%{opacity:0.03}30%{opacity:0.06}50%{opacity:0.02}70%{opacity:0.05}100%{opacity:0.02}
}

/* glitch effect */
.glitch{position:relative;color:var(--neon);text-transform:uppercase;letter-spacing:2px}
.glitch::before, .glitch::after{content:attr(data-text);position:absolute;left:0;top:0;opacity:0.8}
.glitch::before{transform:translate(-2px, -1px);color:#66f;mix-blend-mode:screen;clip-path:inset(0 0 50% 0)}
.glitch::after{transform:translate(2px,1px);color:#2af;mix-blend-mode:screen;clip-path:inset(50% 0 0 0)}
.glitch.anim{animation:glitch-anim 1s linear infinite}
@keyframes glitch-anim{
  0%{transform:translate(0,0)}
  20%{transform:translate(-1px,0)}
  40%{transform:translate(1px,-1px)}
  60%{transform:translate(-1px,1px)}
  80%{transform:translate(1px,0)}
  100%{transform:translate(0,0)}
}

/* main site */
.mainpage{background:linear-gradient(180deg, rgba(0,0,0,0.95), rgba(0,0,10,0.95));padding:80px;overflow:auto}
.content{max-width:900px;margin:0 auto;text-align:left}
.content h2{font-size:32px;color:var(--neon);margin-bottom:8px}
.links li{margin:8px 0}
.links a{color:var(--neon);text-decoration:none;border-bottom:1px dashed rgba(57,153,255,0.12);padding-bottom:2px}
footer{margin-top:40px;color:#446}

/* responsive */
@media (max-width:600px){
  .mono{font-size:16px}
  h1#title{font-size:32px}
  #terminal{padding:20px}
}