span {
    position: absolute;
    border-radius: 100vmax;
  }
  
  .top {
    top: 0;
    left: 0;
    width: 0;
    height: 5px;
    background: linear-gradient(
      90deg,
      transparent 50%,
      rgba(255, 49, 49, 0.5),
      rgb(255, 49, 49)
    );
  }
  
  .bottom {
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(
      90deg,
      rgb(57, 255, 20),
      rgba(57, 255, 20, 0.5),
      transparent 50%
    );
  }
  
  .right {
    top: 0;
    right: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(
      180deg,
      transparent 30%,
      rgba(0, 255, 255, 0.5),
      rgb(0, 255, 255)
    );
  }
  
  .left {
    left: 0;
    bottom: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(
      180deg,
      rgb(255, 255, 113),
      rgba(255, 255, 113, 0.5),
      transparent 70%
    );
  }
  
  .top {
    animation: animateTop 3s ease-in-out infinite;
  }
  
  .bottom {
    animation: animateBottom 3s ease-in-out infinite;
  }
  
  .right {
    animation: animateRight 3s ease-in-out infinite;
  }
  
  .left {
    animation: animateLeft 3s ease-in-out infinite;
  }
  
  @keyframes animateTop {
    25% {
      width: 100%;
      opacity: 1;
    }
  
    30%,
    100% {
      opacity: 0;
    }
  }
  
  @keyframes animateBottom {
    0%,
    50% {
      opacity: 0;
      width: 0;
    }
  
    75% {
      opacity: 1;
      width: 100%;
    }
  
    76%,
    100% {
      opacity: 0;
    }
  }
  
  @keyframes animateRight {
    0%,
    25% {
      opacity: 0;
      height: 0;
    }
  
    50% {
      opacity: 1;
      height: 100%;
    }
  
    55%,
    100% {
      height: 100%;
      opacity: 0;
    }
  }
  
  @keyframes animateLeft {
    0%,
    75% {
      opacity: 0;
      bottom: 0;
      height: 0;
    }
  
    100% {
      opacity: 1;
      height: 100%;
    }
  }
  


  
  :root {
    --gold: #ffb338;
    --light-shadow: #79540f;
    --dark-shadow: #2dffed;
  }


  .textmodel {
    display: grid;
    grid-template-areas: 'overlap';
    place-content: center;
    text-transform: uppercase;
    height: 50vh;
    width: 50%;
  }
  .textmodel > div {
    background-clip: text;  
    -webkit-background-clip: text;
    color: #88db0b;
    font-family: fantasy;
    animation-name:glow;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    font-weight: 200;
    font-size: clamp( 2em, 7vw, 15rem);
    grid-area: overlap;
    line-height: 80px;
    letter-spacing: 1px;
    -webkit-text-stroke: 4px transparent;
  }
  div.bg {
    background-image: repeating-linear-gradient( 105deg, 
      var(--gold) 0% , 
      var(--dark-shadow) 5%,
      var(--gold) 12%);
    color: transparent;
    filter: drop-shadow(5px 15px 15px rgb(77, 73, 73));
    transform: scaleY(1.05);
    transform-origin: top;
  }
  div.fg{
    background-image: repeating-linear-gradient( 5deg,  
      var(--gold) 0% , 
      var(--light-shadow) 23%, 
      var(--gold) 31%);
    color: #1e2127;
    transform: scale(1);
  }

  @keyframes glow{
    from{text-shadow:0px 0px 5px #f3d320,0px 0px 5px #f811f8;}
    to{text-shadow:0px 0px 20px #fff,0px 0px 20px #2f0cdf;}
  }

    @media (max-width: 760px) {
   div.bg {
    background-image: repeating-linear-gradient( 10deg, 
      var(--gold) 0% , 
      var(--dark-shadow) 5%,
      var(--gold) 1%);
    color: transparent;
    filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    transform: scaleY(1.05);
    transform-origin: top;
  }
  div.fg{
    background-image: repeating-linear-gradient( 5deg,  
      var(--gold) 0% , 
      var(--light-shadow) 23%, 
      var(--gold) 31%);
    color: #161616;
    transform: scale(1);
  }
  @keyframes glow{
    from{text-shadow:0px 0px 5px #bbbab6,0px 0px 5px #dfdadf;}
    to{text-shadow:0px 0px 30px #fff,0px 0px 30px #ffffff;}
  }
    }