body {
  background:#050505;
  color:#e6ffff;
  font-family:monospace;
  margin:0;
  overflow-x:hidden;
  scroll-behavior:smooth;
  cursor:none}
canvas {
  position:fixed;
  top:0; left:0;
  
  z-index:-1
}

.cursor {
  position:fixed;
  width:24px; height:24px;
  border:3px solid #00ffee;
  border-radius:6px;
  pointer-events:none;
  z-index:9999;
  mix-blend-mode:difference;
  box-shadow:0 0 12px #00ffee
  
}


  
nav {
  position:fixed;
  top:0; width:100%;
  display:flex; justify-content:center; gap:50px;
  background:rgba(0,0,0,0.85);
  padding:19px;
  z-index:9998;
  backdrop-filter:blur(8px)
}
nav a {
  color:#00ffee;
  text-decoration:none;
  font-size:1.2rem;
  transition:0.2s
}
nav a:hover {
  text-shadow:0 0 10px #00ffee}
section {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:90px 16%
}

.hero h1 {
  font-size:72px;
  margin:0;
  animation:glitch 2s infinite
}
@keyframes glitch {
  0% {text-shadow:2px 0 #00ffee,-2px 0 #ff00ff}
  50% {text-shadow:-2px 0 #00ffee,2px 0 #ff00ff}
}
.hero h2 {color:#00ffee;font-size:1.9rem}
.skills, .projects {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:30px;
  margin-top:50px
}
.skill, .crd {
  border:2px solid #00ffee;
  padding:26px;
  background:#0b0b0b;
  min-width:210px;
  transition:all .35s ease
}
.crd:hover {
  transform:scale(1.04) translateY(-12px);
  box-shadow:0 0 30px #00ffee66
}
.b {
  height:8px;
  background:#00ffee;
  width:0;
  margin-top:14px;
  transition:width 1.8s cubic-bezier(0.25,0.1,0.25,1)
}
#term {
  background:#000;
  border:3px solid #00ffee;
  padding:25px;
  font-family:monospace;
  text-align:left;
  max-width:820px;
  margin:0 auto;
  
  color:#00ffee;
  box-shadow:0 0 40px #00ffee44;
  overflow:hidden;
  height:480px;
  position:relative
}
.terml {
  margin:4px 0;
  white-space:pre-wrap
}

.prompt {color:#00ffcc}

  
#btn {
  background:#00ffee;
  color:#050505;
  border:none;
  padding:18px 48px;
  font-size:1.4rem;
  font-weight:bold;
  cursor:pointer;
  margin:40px 0;
  border-radius:8px;
  transition:0.3s;
  box-shadow:0 0 20px #00ffee66
} 
#btn:hover {
  background:#ff00ff;
  color:#fff;
  transform:scale(1.12);
  box-shadow:0 0 40px #ff00ff88
}

#cont {
  background:#0b0b0b;
  border:2px solid #00ffee;
  padding:50px;
  max-width:700px;
  margin:60px auto 80px auto
}
.contl a {
  color:#00ffee;
  text-decoration:none
}
.back {
  position:fixed;
  
  bottom:45px;
  right:45px;
  background:#00ffee;
  color:#000;
  border:none;
  padding:16px 22px;
  border-radius:50%;
  font-size:32px;
  cursor:pointer;
  
  box-shadow:0 0 25px #00ffee99;
  z-index:9997
}
#pr {
  position:fixed;
  top:0; left:0;
  height:4px;
  background:linear-gradient(to right,#00ffee,#ff00ff);
  z-index:9999;
  width:0%;
  transition:width 0.1s
}