.tutorial_box {
    border-radius: 111px;
    @apply lg:rounded-[70px]
    background: #111827;
    box-shadow: -28px -28px 36px #151e31,
                28px 28px 36px #0d121d;

}

.logo_shadow {
    background: #111827;
    box-shadow: 22px 22px 55px #0c111c,
                -22px -22px 55px #161f32;
}

.button_shadow {
    box-shadow: -16px -16px 20px #151e31,
                16px 16px 20px #0d121d;;
}

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

.bg-gradient-animation {
  animation: gradientAnimation 3s linear infinite;
  background: linear-gradient(to right, #86EFAC, #3b82f6);
  background-size: 400% 400%;
}

.border-gradient-animation {
  position: relative;
}

.border-gradient-animation::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  background: linear-gradient(to right, #86EFAC, #3b82f6);
  background-size: 200% 200%;
  border-radius: inherit;
  border: 2px dotted transparent;
  animation: gradientAnimation 5s linear infinite;
}