#hero {
  background-size: cover;
  background-position: center;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
  gap: 20px;

  animation: appear-hero 1s linear forwards;

  h1 {
    text-transform: uppercase;
    font-family: var(--title);
    font-weight: normal;
    font-size: 40px;
    margin: 0;

    span {
      font-size: 50px;
      font-weight: bolder;
    }
  }
  
  p {
    font-family: --var(--standard);
    color: rgb(56, 56, 56);
    width: 70%;
    font-size: 25px;
    margin: 0px 0px 20px;
  }

  .purple-button {
    background-color: var(--purple-main);
    color: white;
    font-size: 25px;
    padding: 10px 30px;
    border: none;
    border-radius: 50px;
    text-transform: uppercase;
  }
}

#hero h1 span {
    background: linear-gradient(
      120deg,
      #000000 0%,
      #000000 35%,
      var(--purple-main) 45%,
      #000000 55%,
      #000000 100%
    );

    background-size: 250% auto;

    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;

    animation: shine-text 6s linear infinite;
  }

@keyframes shine-text {
    from {
      background-position: 200% center;
    }

    to {
      background-position: -200% center;
    }
  }

@keyframes appear-hero {
  from {
    filter: opacity(0);
  }
  to {
    filter: opacity(1) blur(0);
  }
}

.hero-bubbles {
  position: absolute;
  z-index: -1;
}

#hero_bubble_1 {
  width: 200px;
  top: 3%;
  left: -10%;
  animation: float-bubble1 5s alternate infinite;
}

#hero_bubble_2 {
  width: 150px;
  top: 10%;
  left: 67%;
  animation: float-bubble2 5s alternate infinite;
}

#hero_bubble_3 {
  width: 150px;
  top: 70%;
  left: 0%;
  animation: float-bubble3 5s alternate infinite;
}

#hero_bubble_4 {
  width: 200px;
  top: 70%;
  left: 60%;
  animation: float-bubble4 5s alternate infinite;
}

@keyframes float-bubble1 {
  0% {
    transform: translate(-100px, 0px) rotate(-2deg);
  }

  30% {
    transform: translate(12px, -10px) rotate(3deg);
  }

  65% {
    transform: translate(-6px, -18px) rotate(-1deg);
  }

  100% {
    transform: translate(0px, 0px) rotate(-2deg);
  }
}

@keyframes float-bubble2 {
  0% {
    transform: translate(100px, 0px) rotate(1deg);
  }

  40% {
    transform: translate(-14px, -8px) rotate(-6deg);
  }

  75% {
    transform: translate(8px, -14px) rotate(2deg);
  }

  100% {
    transform: translate(0px, 0px) rotate(1deg);
  }
}

@keyframes float-bubble3 {
  0% {
    transform: translate(-100px, 50px) rotate(0deg);
  }

  20% {
    transform: translate(6px, -12px) rotate(4deg);
  }

  55% {
    transform: translate(14px, -6px) rotate(7deg);
  }

  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

@keyframes float-bubble4 {
  0% {
    transform: translate(100px, 50px) rotate(3deg);
  }

  35% {
    transform: translate(-10px, -16px) rotate(-2deg);
  }

  60% {
    transform: translate(-4px, -7px) rotate(5deg);
  }

  100% {
    transform: translate(0px, 0px) rotate(3deg);
  }
}