* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  height: 100vh;
  background: #000;
  position: relative;
  overflow: hidden;
  color: white;
  font-family: sans-serif;
  display: grid;
  place-items: center;
  font-family: "Inter", sans-serif;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}

.cursor-char {
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.cursor-char img {
  width: 3vw;
}

.floating-icons {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.icon {
  position: absolute;
  font-size: 2rem;
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.1s ease;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.icon.vibrate {
  animation: vibrate 0.05s infinite alternate;
}

@keyframes vibrate {
  0% {
    transform: translate(-1px, -1px) rotate(-2deg);
  }
  50% {
    transform: translate(1px, 1px) rotate(2deg);
  }
  100% {
    transform: translate(-1px, 1px) rotate(-1deg);
  }
}

.nav {
  place-self: start center;
  margin-top: 2vw;
  position: relative;
}

.nav .blur {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.3);
  filter: blur(50px);
  width: 110%;
  height: 90%;
  z-index: 1;
}
/* Glass sliding selector */
.nav .outerbox .innerbox {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 80%;
  width: 25%;
  border-radius: 8px;

  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.nav .outerbox {
  position: relative;
  width: 28vw;
  height: max-content;
  border: 1px solid #505050;
  border-radius: 10px;
  background-color: #1a1a1aa4;
  z-index: 3;
  backdrop-filter: blur(3px);
}

.nav .outerbox ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 1.25rem;
  font-weight: 500;
  position: relative;
  z-index: 2;
}

.nav .outerbox ul li {
  flex: 1;
  text-align: center;
  position: relative;
}

.nav .outerbox a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding: 0.8vw 1vw;
  border-radius: 6px;
  transition: color 0.3s ease;
  position: relative;
  z-index: 3;
  flex: 1;
}

.nav .outerbox a.active {
  color: #ffffff;
}

.name {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: max-content;
}

.name-only {
  position: relative;
  display: flex;
}

.name-only .blur {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.3);
  filter: blur(100px);
  width: 120%;
  height: 100%;
  z-index: 2;
}

.name-only .fname {
  position: relative;
  font-size: 8rem;
  color: #fff;
  /* -webkit-text-stroke: 2px #fff; */
  z-index: 2;
  font-family: "Inter";
}

.name-only > .ang-right,
.ang-left,
.slash {
  font-size: 8rem;
  margin: 0 5px;
  color: rgb(44, 46, 48);
}

.name p {
  color: rgba(138, 175, 85, 1);
  font-size: 2rem;
  margin-top: 0.5rem;
  font-size: 2rem;
}

.slash {
  background: linear-gradient(5deg, #f00 11.15%, #f0e 43.91%, #7b00ff 74.58%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}