/* Index Page Styles */
body {
  background: linear-gradient(-45deg, #050816, #0a192f, #001f3f, #0f172a);
  background-size: 400% 400%;
  animation: gradientMove 12s ease infinite;
  color: white;
  overflow-x: hidden;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  padding-top: 120px;
}
.container h1 {
  font-size: 50px;
  color: cyan;
  text-shadow:
    0 0 3px cyan,
    0 0 5px rgb(173, 206, 206);
}
.container h1 span {
  color: cyan;
  text-shadow: 0 0 15px cyan;
}
#typing-text {
  font-size: 32px;
  color: cyan;
  margin-top: 20px;
}
.home-description {
  max-width: 700px;
  font-size: 20px;
  margin-top: 20px;
  line-height: 1.8;
}
.home-button {
  margin-top: 30px;
}
.btn {
  display: inline-block;
  color: wheat;
  border: 2px solid cyan;
  padding: 12px 25px;
  margin: 10px;
  border-radius: 10px;
  transition: 0.3s;
  text-decoration: none;
}
.btn:hover {
  background: cyan;
  color: #111827;
  transition: 0.3s;
  box-shadow: 0 0 20px cyan;
}
.profile-image {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 25px;
  box-shadow: 0 0 25px cyan;
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* BACKGROUND GLOW CIRCLES */
.bg-circle {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  z-index: -1;
  animation: floatCircle 10s ease-in-out infinite;
}
/* CIRCLE 1 */
.circle1 {
  width: 300px;
  height: 300px;
  background: cyan;
  top: 10%;
  left: 10%;
  opacity: 0.25;
}
/* CIRCLE 2 */
.circle2 {
  width: 350px;
  height: 350px;
  background: blue;
  bottom: 10%;
  right: 10%;
  opacity: 0.25;
  animation-delay: 2s;
}
/* CIRCLE 3 */
.circle3 {
  width: 250px;
  height: 250px;
  background: purple;
  top: 50%;
  left: 50%;
  opacity: 0.18;
  animation-delay: 4s;
}
/* FLOATING ANIMATION */
@keyframes floatCircle {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  50% {
    transform: translateY(-30px) translateX(20px);
  }
  100% {
    transform: translateY(0px) translateX(0px);
  }
}
/* PARTICLES */
.particles {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
  overflow: hidden;
}
.particles::before,
.particles::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  box-shadow:
    100px 200px white,
    300px 400px cyan,
    500px 150px white,
    700px 350px cyan,
    900px 250px white,
    1100px 500px cyan,
    1300px 100px white,
    1500px 450px cyan;
  animation: starsMove 15s linear infinite;
  opacity: 0.8;
}
.particles::after {
  animation-duration: 25s;
  opacity: 0.5;
}
@keyframes starsMove {
  0% {
    transform: translateY(100vh);
  }
  100% {
    transform: translateY(-100vh);
  }
}