
@mixin Shadow {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.07);

}


@mixin Flex {
 display: flex;
 justify-content: center;
 align-items: center;

}


@mixin Hover {

  &:hover{  
      color: var(--secondary);
  }
}

@mixin Hover_outline_characters {

  &:hover{  
text-shadow: 2px 2px  var(--secondary);

  }
}


@mixin underLineText($color1,$color2){
  background-image: linear-gradient(90deg, $color1 , $color2);
  background-size: 0% 3px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 500ms ease-in-out;
  &:hover{
      background-size: 100% 3px;

  }
}

.underLineText{
    background-image: linear-gradient(90deg, var(--primary) , var(--secondary));
  background-size: 0% 3px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 500ms ease-in-out;
  &:hover{
      background-size: 100% 3px;

  }
}