.animate-charcter
{
    text-transform: uppercase;
    background-image: linear-gradient(
        -225deg,
        #6db4ff 0%,
        #846fd1 29%,
        #84c8d5 67%
    );
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 5s linear infinite;
    display: inline-block;
    font-size: 190px;
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}

.animate__fadeIn {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

/* Border Animation */
.border-animation {
    --border-width: 0.1em;
    --animation-speed: 0.5s;
    --color: #ffffff;
    color: var(--color);
    position: relative;
    display: inline-block;
    font-size: 4em;
    line-height: 1em;
    transform: scale(1, 0.8);
    border: var(--border-width) solid transparent;
}
    .border-animation__inner {
      position: relative;
      display: inline-block;
      width: 100%;
      font-family: 'Six Caps', sans-serif;
      font-weight: 300;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      cursor: pointer;
      padding: 0.2em;
      background: #333;
      z-index: 1;
      border: solid var(--border-width) transparent;
    }
    
    &:before,
    &:after {
      content: '';
      position: absolute;
      background: var(--color);
    }
    
    &:focus:before,
    &:hover:before {
      animation: beforeBorders var(--animation-speed) forwards ease-in-out;
    }
  
    &:focus:after,
    &:hover:after {
      animation: afterBorders var(--animation-speed) forwards ease-in-out;
    }
    
    &:focus,
    &:hover {
      animation: borderColors var(--animation-speed) steps(1) forwards;
      outline: none;
  
      .border-animation__inner {
        animation: background calc(var(--animation-speed) / 5 * 3) forwards ease-in-out;
        animation-delay: calc(var(--animation-speed) / 5 * 2);
      }
    }
}
  
  @keyframes beforeBorders {
    0% {
      top: calc(var(--border-width) * -1);
      left: 50%;
      bottom: auto;
      right: auto;
      width: 0;
      height: var(--border-width);
    }
    33% {    
      top: calc(var(--border-width) * -1);
      left: calc(var(--border-width) * -1);
      bottom: auto;
      right: auto;
      width: calc(var(--border-width) + 50%);
      height: var(--border-width);
    }
    66% {
      top: calc(var(--border-width) * -1);
      left: calc(var(--border-width) * -1);
      bottom: auto;
      right: auto;
      width: var(--border-width);
      height: calc((var(--border-width) * 2) + 100%);
    }
    100% {
      top: auto;
      left: calc(var(--border-width) * -1);
      bottom: calc(var(--border-width) * -1);
      right: auto;
      width: calc(var(--border-width) + 50%);
      height: calc((var(--border-width) * 2) + 100%);
    }
  }
  
  @keyframes afterBorders {
    0% {
      top: calc(var(--border-width) * -1);
      left: auto;
      bottom: auto;
      right: 50%;
      width: 0;
      height: var(--border-width);
    }
    33% {    
      top: calc(var(--border-width) * -1);
      left: auto;
      bottom: auto;
      right: calc(var(--border-width) * -1);
      width: calc(var(--border-width) + 50%);
      height: var(--border-width);
    }
    66% {
      top: calc(var(--border-width) * -1);
      left: auto;
      bottom: auto;
      right: calc(var(--border-width) * -1);
      width: var(--border-width);
      height: calc((var(--border-width) * 2) + 100%);
    }
    100% {
      top: auto;
      left: auto;
      bottom: calc(var(--border-width) * -1);
      right: calc(var(--border-width) * -1);
      width: calc(var(--border-width) + 50%);
      height: calc((var(--border-width) * 2) + 100%);
    }
  }
  
  @keyframes borderColors {
    0% {
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
    }
    33% {
      border-top-color: var(--color);
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
  
    }
    66% {
      border-top-color: var(--color);
      border-right-color: var(--color);
      border-bottom-color: transparent;
      border-left-color: var(--color);
    }
    100% {
      border-top-color: var(--color);
      border-right-color: var(--color);
      border-bottom-color: var(--color);
      border-left-color: var(--color);
    }
  }
  
  @keyframes background {
    to {
      background: #555;
      text-shadow: 0 0.1em 0.1em #111;
    }
  }
  
  @media (min-width: 850px) {
    body {
      justify-content: center;
    }
  }
  
  @media (min-width: 1200px) {
    .border-animation {
      font-size: 6em;
      line-height: 1em;    
    }
  }

/* Hover Me Animation */

.hoverAni::before {  
  transform: scaleX(0);
  transform-origin: bottom right;
}

.hoverAni:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.hoverAni::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: hsl(200 100% 80%);
  z-index: -1;
  transition: transform .3s ease;
}

.hoverAni {
  position: relative;
  font-size: 5rem;
}


/* Neon Effct */

.box {
  display: grid;
  place-items: center;
  /* height: 100vh; */
  font-family: ;
  text-align: center;

}

.box p {
  font-size: 30px;
  text-transform: uppercase;
  color: #ffd9e2;
  text-shadow: 0 0 0 transparent,
              0 0 10px #ff003c,
              0 0 20px rgba(225, 0, 60, 0.5),
              0 0 40px #ff003c,
              0 0 100px #ff003c,
              0 0 200px #ff003c,
              0 0 300px #ff003c,
              0 0 500px #ff003c,
              0 0 1000px #ff003c;
  animation: animate 3s infinite alternate;
}
@keyframes animate{
  40%{
      opacity: 1;
  }
  42%{
      opacity: 0.8;
  }
  43%{
      opacity: 1;
  }
  45%{
      opacity: 0.3;
  }
  46%{
      opacity: 1;
  }
}