.animated-border-bottom {
    overflow: hidden;
}

.animated-border-bottom::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    opacity: 0;
    border-radius: 1px;
    pointer-events: none;
}

.animated-border-bottom::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    width: 0%;
    background: radial-gradient(ellipse at center, rgba(111, 176, 214, 0) 0%, rgb(255, 255, 255) 100%);
    box-shadow: 2px 2px 5px rgba(57, 57, 57, 1);
    opacity: 1;
    border-radius: 1px;
    pointer-events: none;

    animation: amRipple 6s ease-out infinite;
}

.animated-border-top {
    overflow: hidden;
}

.animated-border-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    width: 100%;
    background-color: rgb(164, 61, 255);
    opacity: 0;
    border-radius: 1px;
    pointer-events: none;
}

.animated-border-top::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    width: 0%;
    background: radial-gradient(ellipse at center, rgba(111, 176, 214, 0) 0%, rgb(164, 61, 255) 100%);
    box-shadow: 2px 2px 5px rgba(57, 57, 57, 1);
    opacity: 1;
    border-radius: 1px;
    pointer-events: none;

    animation: amRipple 6s ease-out infinite;
}

.animated-border-both {
    overflow: hidden;
}

.animated-border-both::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    width: 0%;
    background: radial-gradient(ellipse at center, rgb(164, 61, 255) 0%, rgb(164, 61, 255) 100%);
    opacity: 1;
    border-radius: 1px;
    pointer-events: none;

    animation: amRipple 6s ease-out infinite;
}

.animated-border-both::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    width: 0%;
    background: radial-gradient(ellipse at center, rgb(230, 89, 255) 0%, rgb(230, 89, 255) 100%);
    box-shadow: 2px 2px 5px rgba(57, 57, 57, 1);
    opacity: 1;
    border-radius: 1px;
    pointer-events: none;

    animation: amRipple 6s ease-out infinite;
}

@keyframes amRipple {
    0% {
        width: 0%;
        opacity: 0.4;
    }

    33% {
        width: 100%;
        opacity: 0.15;
    }

    100% {
        width: 100%;
        opacity: 0;
    }
}

.blur {  
  background-color: rgba(25, 5, 20, 0.1); /* fallback */

  -webkit-backdrop-filter: blur(7px);
  
  backdrop-filter: blur(7px);
  
  transform: translateZ(0); 
}