body{
  margin:0;
  font-family:Poppins;
  color:white;
  text-align:center;
  background:#000000; /* PURE BLACK */
  overflow:hidden;

  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  flex-direction:column;
}



@keyframes bgMove{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* Background particles */
#particles-js{
  position:fixed;
  width:100%;
  height:100%;
  z-index:-1;
}

/* Layout */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center; /* vertical center */
  align-items:center;     /* horizontal center */
  padding:20px;
  text-align:center;
}

/* Top title */
.top-title{
  color:#38bdf8;
  margin-bottom:40px; /* more space */
}

/* Moving glowing box */
.name-box{
  padding:25px 40px;
  border:2px solid #38bdf8;
  border-radius:15px;
  animation:boxMove 3s infinite alternate;
  box-shadow:0 0 25px #38bdf8;
  margin-bottom:50px; /* space before buttons */
}

@keyframes boxMove{
  from{ transform:translateY(-10px);}
  to{ transform:translateY(10px);}
}

.name-box h1{
  font-size:55px;
  margin:0;
  text-shadow:0 0 15px #38bdf8;
}

/* Buttons container spacing */
.buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px; /* space between buttons */
  margin-top:10px;
}

/* Buttons */
.btn{
  padding:12px 26px;
  border-radius:30px;
  border:2px solid cyan;
  color:cyan;
  background:transparent;
  cursor:pointer;
  font-size:16px;
  transition:0.3s;

  animation:pulse 2.5s infinite;
}

@keyframes pulse{
  0%{box-shadow:0 0 5px cyan;}
  50%{box-shadow:0 0 25px cyan;}
  100%{box-shadow:0 0 5px cyan;}
}

.btn:hover{
  background:cyan;
  color:black;
  transform:scale(1.1);
}