/* General Reset and Behavior */
* {
  color: #fff;
  text-decoration: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  scroll-behavior: smooth;
  background-color: transparent;
  overflow-x: hidden;
  font-family: "Audiowide", sans-serif;
}

/* Particle Background */
#particles-js {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  background-color: black;
}

/* Main Sections */
section {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: transparent;
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px;
}

/* Header Name */
.Name {
  font-weight: bold;
  font-size: 10.5vw;
  position: absolute;
  left: clamp(5px, 27.5%, 400px);
  top: clamp(5px, 26%, 200px);
}

/* Typing Text */
.typewrite {
  font-weight: bold;
  font-size: 2.5vw;
  position: absolute;
  left: calc(clamp(5px, 27.5%, 400px) + 25vw);
  top: calc(clamp(5px, 26%, 200px) + 12vw);
  text-align: left;
}

/* Navigation Links */
#headder-links-div {
  position: absolute;
  bottom: 10%;
  max-width: 90%; /* Prevents overflow */
  left: 50%; /* Centers the div horizontally */
  transform: translateX(-50%); /* Corrects centering */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 2;
  overflow: hidden; /* Ensures no overflow */
}

.headder-link {
  font-size: 2vw;
  padding: 20px;
  text-align: center;
  white-space: nowrap; /* Prevents text wrapping */
}