/* ---------- Base & Background (use your GIF) ---------- */
body{
  margin:0; padding:0; color:#fff; font-family: Arial, sans-serif;
  background:#0a0a0a url('background.gif') center/cover no-repeat fixed;
}

/* ---------- Solid Top Nav ---------- */
.navbar{
  position: sticky; top:0; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  background:#0b0b0b; padding:1rem 2rem; border-bottom:2px solid #ff00ff;
}
.nav-left h1{margin:0; font-size:1.8rem; font-weight:800; color:#00ffff;
  text-shadow:0 0 6px #00ffff,0 0 12px #00ffff;}
.nav-right{display:flex; align-items:center; gap:1rem;}
.icon{width:28px;height:28px;object-fit:contain;display:inline-block;transition:transform .2s;}
.icon:hover{transform:scale(1.12);}
/* Make LinkedIn white; tint GitHub/LeetCode cyan w/ glow */
.icon:not(.icon-neon){filter:brightness(0) invert(1);}
.icon-neon{
  filter: brightness(0) saturate(100%) invert(73%) sepia(95%) saturate(6000%)
          hue-rotate(150deg) brightness(105%) contrast(102%)
          drop-shadow(0 0 6px #00ffff) drop-shadow(0 0 12px #00ffff);
}
.nav-btn{
  background:#ff00ff; color:#000; text-decoration:none; font-weight:800; text-transform:uppercase;
  padding:.5rem 1rem; border-radius:4px; box-shadow:0 0 8px #ff00ff,0 0 16px #ff00ff; transition:.2s;
}
.nav-btn:hover{background:#00ffff; box-shadow:0 0 8px #00ffff,0 0 16px #00ffff;}

/* ---------- Industrial Window ---------- */
.window{
  max-width:1100px; margin:3rem auto; border:2px solid #fff;
  background:rgba(0,0,0,.85); box-shadow:0 0 14px #ff00ff, 0 0 28px #00ffff;
}

/* Fake URL bar */
.window-topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:.4rem .8rem; background:#151515; border-bottom:1px solid #444;
  font-family: "Courier New", Consolas, monospace; font-size:.9rem;
}
.window-topbar .url{opacity:.9; letter-spacing:.03em;}
.window-topbar .controls .dot{
  display:inline-block; width:10px; height:10px; margin-left:.4rem; border:1px solid #777; border-radius:2px;
}
.window-topbar .controls .dot:nth-child(1){background:#2ecc71;}  /* minimize */
.window-topbar .controls .dot:nth-child(2){background:#f1c40f;}  /* maximize */
.window-topbar .controls .dot:nth-child(3){background:#e74c3c;}  /* close */

/* Menu row */
.window-menu{
  display:flex; gap:1.2rem; align-items:center;
  padding:.45rem .8rem; background:#0f0f0f; border-bottom:1px dashed #666;
  font-family: "Courier New", Consolas, monospace; font-size:.8rem;
}
.window-menu a{color:#fff; text-decoration:none; position:relative;}
.window-menu a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px;
  background:linear-gradient(90deg,#ff00ff,#00ffff); opacity:0; transition:.2s;
}
.window-menu a:hover::after{opacity:1}

/* Split panes */
.window-content{display:grid; grid-template-columns: 1.2fr 1fr; min-height:420px;}
.pane{padding:1.25rem;}
.pane.left{border-right:1px solid rgba(255,255,255,.2);}
.about-title{margin:0 0 .5rem 0; font-size:3.2rem; line-height:1; letter-spacing:.02em; text-transform:lowercase;}
.about-title .slash{color:#00ffff; text-shadow:0 0 10px #00ffff;}
.mono{font-family:"Courier New", Consolas, monospace;}
.small{font-size:.9rem; opacity:.9;}
.pane.right{
  background:rgba(255,255,255,.03);
  border-left:1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(2px);
}
.reigner-img{width:100%; height:100%; object-fit:cover; filter:none(100%) contrast(120%)}

/* Grid dots + scanlines overlays (toggle by adding classes) */
.grid-overlay{
  position:relative; isolation:isolate;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:16px 16px;
}
.grid-overlay::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image: linear-gradient(transparent calc(100% - 1px), rgba(255,255,255,.08) 1px);
  background-size: 100% 24px; mix-blend-mode:overlay;
}
.scanlines::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 2px, transparent 2px 4px);
}

/* ---------- Clock & Footer ---------- */
#clock{
  max-width:1100px; margin:1rem auto 2rem; text-align:center; font-family:monospace; font-size:1.4rem;
  background:rgba(0,0,0,.7); padding:.6rem 0; border-radius:6px;
  box-shadow:0 0 8px #00ffff,0 0 16px #ff00ff;
}

/* ===== Default desktop/tablet layout: side by side ===== */
.window-content {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.25rem;
}

/* ===== Mobile: stack and put photo last ===== */
@media (max-width: 1024px) {
  .window-content {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Force text above, image below */
  .pane.left { order: 1; }
  .pane.right { order: 2; }

  /* Scale image nicely */
  .reigner-img {
    width: 100%;
    height: auto;
    margin-top: 1rem;
    border-radius: 12px;
  }

  /* Make nav menu easier to tap */
  .window-menu {
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .window-menu a {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 0.4rem 0.6rem;
    text-decoration: none;
    color: #00ffff;
  }
  .window-menu a:hover {
    text-shadow: 0 0 6px #00ffff, 0 0 12px #00ffff;
  }
}