
  .bgContainer
  {
    position: fixed;
    width: 100dvw;
    height: 100dvh;
    z-index: 0;
    
  }
  .lines
  {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    gap: 70px;
    /* height: 70%; */
    height: 100%;
    width: 100vw;

    &.horizontal 
    {
      gap: 50px;

      .line
      {
        width: 100%;
        height: 1px;

        &::after
        {
            content: '';
            display: block;
            position: absolute;
            width: 15vh;
            height: 100%;
            left: -50%;
            top: 0;
            background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #437FD0 75%, #437FD0 100%);
            /* animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); */
        }

      }
    }

    & .line.green::after
    {
      background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #0cc306 75%, #3bd545 100%);
    }

  

  } 
  .line
  {
      position: relative;
      width: 1px;
      height: 100%;
      
      background: rgba(255, 255, 255, 0.1);
      overflow: hidden;

      &::after
      {
          content: '';
          display: block;
          position: absolute;
          height: 15vh;
          width: 100%;
          top: -50%;
          left: 0;
          background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #437FD0 75%, #437FD0 100%);

          text-shadow: 0 0 0px #0f0, 0 0 10px #0f0, 0 0 15px #0f0;
          
          /* animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); */
      }

      &.pulseDown::after
      {
        animation: dropDown var(--purseTime) 0s;
      }
      &.pulseUp::after
      {
        animation: dropUp var(--purseTime) 0s;
        transform: rotate(180deg);
      }

      &.pulseLeft::after
      {
        animation: dropLeft var(--purseTime) 0s;
      }
      &.pulseRight::after
      {
        animation: dropRight var(--purseTime) 0s;
        transform: rotate(180deg);
      }

    
  }
      
  @keyframes dropDown
  {
    0%
    {
      top: -50%;
    }
    100%
    {
      top: 110%;
    }
  }
  @keyframes dropUp
  {
    0%
    {
      top: 110%;
    }
    100%
    {
      top: -50%;
    }
  }

  @keyframes dropRight
  {
    0%
    {
      left: -50%;
    }
    100%
    {
      left: 110%;
    }
  }
  @keyframes dropLeft
  {
    0%
    {
      left: 110%;
    }
    100%
    {
      left: -50%;
    }
  }