/*===== Light Gradient Style =====*/
@import "main.css";

/* body-style */
body {
  position: relative;
}

body::before {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 100%;
  bottom: -50%;
  left: 25%;
  box-shadow: 0 50px 400px rgb(48, 51, 107);
  transform: rotate(-180deg);
}

body::after {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 100%;
  top: -50%;
  left: 25%;
  box-shadow: 0 150px 300px rgba(243, 86, 146, 1);
  animation: animate_1 10s infinite;
}

/* gradient-bg-style */
.gradient-bg::before {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 100%;
  border-radius: 100%;
  top: 0%;
  left: -50%;
  box-shadow: 0 0 500px 450px rgba(254, 201, 63, 1);
  animation: animate_2 10s infinite;
}

.gradient-bg::after {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 100%;
  border-radius: 100%;
  top: 0%;
  right: -50%;
  bottom: -1000px;
  box-shadow: 0 0 500px 450px rgba(93, 248, 240, 1);
  animation: animate_3 10s infinite;
}

/* animate-1 */
@keyframes animate_1 {
  25% {
    box-shadow: 0 150px 300px rgba(243, 86, 146, 1);
  }

  50% {
    box-shadow: 0 150px 300px rgba(254, 201, 63, 1);
  }

  75% {
    box-shadow: 0 150px 300px rgba(93, 248, 240, 1);
  }

  100% {
    box-shadow: 0 150px 300px rgba(243, 86, 146, 1);
  }
}

@-webkit-keyframes animate_1 {
  25% {
    box-shadow: 0 150px 300px rgba(243, 86, 146, 1);
  }

  50% {
    box-shadow: 0 150px 300px rgba(254, 201, 63, 1);
  }

  75% {
    box-shadow: 0 150px 300px rgba(93, 248, 240, 1);
  }

  100% {
    box-shadow: 0 150px 300px rgba(243, 86, 146, 1);
  }
}

/* animate-2 */
@keyframes animate_2 {
  25% {
    box-shadow: 0 0 500px 450px rgba(254, 201, 63, 1);
  }

  50% {
    box-shadow: 0 0 500px 450px rgba(93, 248, 240, 1);
  }

  75% {
    box-shadow: 0 0 500px 450px rgba(243, 86, 146, 0.7);
  }

  100% {
    box-shadow: 0 0 500px 450px rgba(254, 201, 63, 1);
  }
}

@-webkit-keyframes animate_2 {
  25% {
    box-shadow: 0 0 500px 450px rgba(254, 201, 63, 1);
  }

  50% {
    box-shadow: 0 0 500px 450px rgba(93, 248, 240, 1);
  }

  75% {
    box-shadow: 0 0 500px 450px rgba(243, 86, 146, 0.7);
  }

  100% {
    box-shadow: 0 0 500px 450px rgba(254, 201, 63, 1);
  }
}

/* animate-3 */
@keyframes animate_3 {
  25% {
    box-shadow: 0 0 500px 450px rgba(93, 248, 240, 1);
  }

  50% {
    box-shadow: 0 0 500px 450px rgba(243, 86, 146, 0.7);
  }

  75% {
    box-shadow: 0 0 500px 450px rgba(254, 201, 63, 1);
  }

  100% {
    box-shadow: 0 0 500px 450px rgba(93, 248, 240, 1);
  }
}

@-webkit-keyframes animate_3 {
  25% {
    box-shadow: 0 0 500px 450px rgba(93, 248, 240, 1);
  }

  50% {
    box-shadow: 0 0 500px 450px rgba(243, 86, 146, 0.7);
  }

  75% {
    box-shadow: 0 0 500px 450px rgba(254, 201, 63, 1);
  }

  100% {
    box-shadow: 0 0 500px 450px rgba(93, 248, 240, 1);
  }
}