/* === GLOBAL SETTINGS === */
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: #0a001a;
  color: white;
  font-family: 'JetBrains Mono', monospace;
}

/* Background Canvas (Fluid Smoke) */
canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* behind everything */
}

/* === MAIN SECTION === */
main {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  z-index: 2;
}

/* Center Name */
.center-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 3.5rem;
  background: linear-gradient(90deg, #00ffff, #ff00cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 25px #00ffff70;
  margin: 0;
}

/* Subtitle */
.subtitle {
  margin-top: 10px;
  color: #9efeff;
  font-size: 1rem;
}

/* === NODE CONTAINER === */
.node-container {
  position: absolute;
  top: 45%;
  left: 46%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* === INDIVIDUAL NODES === */
.node {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, #2c006e, #120033);
  box-shadow: 0 0 15px #ff00cc80;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 0.9rem;
  text-align: center;
  cursor: pointer;
  pointer-events: all;
  transition: transform 0.3s, box-shadow 0.3s;
  animation: float 6s ease-in-out infinite;
}

/* Hover Glow */
.node:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px #00ffff;
}

/* Floating Animation (Subtle Movement) */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

.node:nth-child(odd) { animation-duration: 6s; }
.node:nth-child(even) { animation-duration: 8s; }

/* === NODE POSITIONS (Equal Distance from Center) === */
/* Projects (Top Center) */
.node:nth-child(3) {
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Chatbot (Bottom Center) */
.node:nth-child(4) {
  top: 82%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Experience (Upper Left) */
.node:nth-child(1) {
  top: 30%;
  left: 20%;
}

/* Skills (Upper Right) */
.node:nth-child(2) {
  top: 30%;
  left: 80%;
}

/* Contact (Lower Left) */
.node:nth-child(5) {
  top: 70%;
  left: 20%;
}

/* About (Lower Right) */
.node:nth-child(6) {
  top: 70%;
  left: 80%;
}

/* === FOOTER === */
footer {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
  color: #9efeffa0;
  font-size: 0.9rem;
}

#fluid-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;  /* Keeps it behind content */
  pointer-events: none;
  background: black;
}