.tutorial_box {
    border-radius: 60px;
    @apply lg:rounded-[60px]
    background: linear-gradient(145deg, #e6e6e6, #ffffff);
    box-shadow:  35px 35px 70px #a3a3a3,
                 -35px -35px 70px #ffffff;}

.box_blur_green {
   -webkit-box-shadow:0px 0px 201px 4px rgba(45,255,196,0.81);
    -moz-box-shadow: 0px 0px 201px 4px rgba(45,255,196,0.81);
    box-shadow: 0px 0px 201px 4px rgba(45,255,196,0.81);
}

.box_blur_gray {
    -webkit-box-shadow:0px 0px 105px 6px rgba(66,66,66,0.25);
    -moz-box-shadow: 0px 0px 105px 6px rgba(66,66,66,0.25);
    box-shadow: 0px 0px 105px 6px rgba(66,66,66,0.25);
}

@media (min-width: 640px) {

    @media not all and (min-width: 1024px) {
        .sm\:max-lg\:box-blur-gray {
            -webkit-box-shadow:0px 0px 105px 6px rgba(66,66,66,0.25);
            -moz-box-shadow: 0px 0px 105px 6px rgba(66,66,66,0.25);
            box-shadow: 0px 0px 105px 6px rgba(66,66,66,0.25);
        }
    }

    @media not all and (min-width: 768px) {
        .sm\:max-md\:box-blur-gray {
            -webkit-box-shadow:0px 0px 105px 6px rgba(66,66,66,0.25);
            -moz-box-shadow: 0px 0px 105px 6px rgba(66,66,66,0.25);
            box-shadow: 0px 0px 105px 6px rgba(66,66,66,0.25);
        }
    }
}

.box_blue_cyan {
    -webkit-box-shadow:0px 0px 30px 10px rgba(0,217,255,0.43);
    -moz-box-shadow: 0px 0px 30px 10px rgba(0,217,255,0.43);
    box-shadow: 0px 0px 30px 10px rgba(0,217,255,0.43);
}

.button_elevation {
    box-shadow: 0px 16px 32px rgba(37, 33, 41, .08),
                0px 4px 12px rgba(37, 33, 41, .08);;
}

.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%;
  }
}

.flip-diagonal {
	-webkit-animation: flip-diagonal-1-bl 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: flip-diagonal-1-bl 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@-webkit-keyframes flip-diagonal-1-bl {
  0% {
    -webkit-transform: rotate3d(1, 1, 0, 0deg);
            transform: rotate3d(1, 1, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(1, 1, 0, -180deg);
            transform: rotate3d(1, 1, 0, -180deg);
  }
}
@keyframes flip-diagonal-1-bl {
  0% {
    -webkit-transform: rotate3d(1, 1, 0, 0deg);
            transform: rotate3d(1, 1, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(1, 1, 0, -180deg);
            transform: rotate3d(1, 1, 0, -180deg);
  }
}


.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;
}

.check-container {
  width: 6.25rem;
  height: 7.5rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-between;
}
.check-container .check-background {
  width: 100%;
  height: calc(100% - 1.25rem);
  background: linear-gradient(to bottom right, #5de593, #41d67c);
  box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
  transform: scale(0.84);
  border-radius: 50%;
  animation: animateContainer 0.75s ease-out forwards 0.75s;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.check-container .check-background svg {
  width: 65%;
  transform: translateY(0.25rem);
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: animateCheck 0.35s forwards 1.25s ease-out;
}
.check-container .check-shadow {
  bottom: calc(-15% - 5px);
  left: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, #49da83, transparent);
  animation: animateShadow 0.75s ease-out forwards 0.75s;
}

@keyframes animateContainer {
  0% {
    opacity: 0;
    transform: scale(0);
    box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
  }
  25% {
    opacity: 1;
    transform: scale(0.9);
    box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
  }
  43.75% {
    transform: scale(1.15);
    box-shadow: 0px 0px 0px 43.334px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
  }
  62.5% {
    transform: scale(1);
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 21.667px rgba(255, 255, 255, 0.25) inset;
  }
  81.25% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;
  }
  100% {
    opacity: 1;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;
  }
}
@keyframes animateCheck {
  from {
    stroke-dashoffset: 80;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes animateShadow {
  0% {
    opacity: 0;
    width: 100%;
    height: 15%;
  }
  25% {
    opacity: 0.25;
  }
  43.75% {
    width: 40%;
    height: 7%;
    opacity: 0.35;
  }
  100% {
    width: 85%;
    height: 15%;
    opacity: 0.25;
  }
}