:root {
  --inset-color1: #044868;
  --inset-color2: #6b0327;
  --inset-color3: #9b8c02;
  --inset-color4: #ffffff75;
  --transition: all 2s linear;
}


@keyframes defaultglow {
  0% {
    text-shadow: 0 0 5px #e0aaff, 0 0 10px #e0aaff, 0 0 15px #e0aaff,
      0 0 20px #e0aaff;
  }
  50% {
    text-shadow: 0 0 10px #e0aaff, 0 0 20px #e0aaff, 0 0 30px #e0aaff,
      0 0 40px #e0aaff;
  }
  100% {
    text-shadow: 0 0 5px #e0aaff, 0 0 10px #e0aaff, 0 0 15px #e0aaff,
      0 0 20px #e0aaff;
  }
}

.text_effect_glow {
  
    animation: defaultglow 2s ease-in-out infinite;
  }


@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

  .float_effect_object {
    animation: float 2s infinite;
  }

@keyframes loader {
  0% {
    width: 0;
  }
  20% {
    width: 10%;
  }
  25% {
    width: 24%;
  }
  43% {
    width: 41%;
  }
  56% {
    width: 50%;
  }
  66% {
    width: 52%;
  }
  71% {
    width: 60%;
  }
  75% {
    width: 76%;
  }
  94% {
    width: 86%;
  }
  100% {
    width: 100%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes twinkling {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes floatUp {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) scale(1);
    opacity: 0;
  }
}

@keyframes fadeOut {
  0%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.bubble::after,
.bubble::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
  z-index: 10;
  filter: blur(calc(var(--bubble-size) / 75));
  transition: var(--transition);
}

.bubble::before {
  top: 25%;
  left: 22.5%;
  width: calc(var(--bubble-size) / 6.7);
  height: calc(var(--bubble-size) / 6.7);
}

.bubble::after {
  top: 40%;
  left: 40%;
  width: calc(var(--bubble-size) / 10);
  height: calc(var(--bubble-size) / 10);
}

.bubble span {
  position: absolute;
  border-radius: 50%;
  transition: var(--transition);
}

.bubble span:first-child {
  inset: calc(var(--bubble-size) / 20);
  border-left: calc(var(--bubble-size) / 13.3) solid var(--inset-color1);
  filter: blur(calc(var(--bubble-size) / 25));
}

.bubble span:nth-child(2) {
  inset: calc(var(--bubble-size) / 20);
  border-right: calc(var(--bubble-size) / 13.3) solid var(--inset-color2);
  filter: blur(calc(var(--bubble-size) / 25));
}

.bubble span:nth-child(3) {
  inset: calc(var(--bubble-size) / 10);
  border-top: calc(var(--bubble-size) / 13.3) solid var(--inset-color3);
  filter: blur(calc(var(--bubble-size) / 25));
}

.bubble span:nth-child(4) {
  inset: calc(var(--bubble-size) / 6.7);
  border-left: calc(var(--bubble-size) / 13.3) solid var(--inset-color2);
  filter: blur(calc(var(--bubble-size) / 16.7));
}

.bubble span:nth-child(5) {
  inset: calc(var(--bubble-size) / 20);
  border-bottom: calc(var(--bubble-size) / 20) solid var(--inset-color4);
  filter: blur(calc(var(--bubble-size) / 25));
  transform: rotate(330deg);
}