html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #05080f;
  font-family: Arial, sans-serif;
  overflow-x: hidden;
  color: white;
}

/* TOP BAR */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, rgba(5,8,15,0.9), transparent);
  z-index: 10;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
}

.topbar ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
}

.nav-btn {
  cursor: pointer;
  color: #ffffffcc;
  transition: all 0.3s ease;
}

.nav-btn:hover {
  color: #ff9f43;
  text-shadow: 0 0 14px #ff9f43;
}

/* HERO */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
}

/* CANVAS */
#bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  display: block;
}

/* PROFILE */
.profile-wrap {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.profile-wrap img {
  width: 360px;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,0.9));
}