'SASS linear-gradient rotation

I found an animated box from Codepen, I converted the code to SASS, but somehow it does not work properly.

The problem with the rotation is that the background (the card) rotates completely. I have already tried a few things but nothing worked

I hope someone can help me with my problem

enter image description here

Codepen Magic Card

CSS to SASS Converter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style/style.css">
    <title>Document</title>
</head>
<body>
        <div class="card">
            <h1>&Uuml;ber mich</h1>
            <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
                labore et dolore magna aliquyam erat, sed diam voluptua. At vero
            </p>

        </div>
</body>
</html>

```sass
@import url("https://fonts.googleapis.com/css?family=Fira+Mono:400")

@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap")

* 
  margin: 0
  padding: 0
  scroll-behavior: smooth

$rotate: 132deg

$card-height: 65vh
$card-width: $card-height / 1.5

body
  min-height: 100vh
  background: #212534
  display: flex
  align-items: center
  flex-direction: column
  padding-top: 2rem
  padding-bottom: 2rem
  box-sizing: border-box

.card
  background: #191c29
  width: $card-width
  height: $card-height
  padding: 3px
  position: relative
  border-radius: 6px
  justify-content: center
  align-items: center
  text-align: center
  display: flex
  font-size: 1.5em
  color: rgba(88, 199, 250, 0%)
  cursor: pointer
  font-family: cursive

  &:hover
    color: rgba(88, 199, 250, 100%)
    transition: color 1s

    &:before, &:after
      animation: none
      opacity: 0

  &::before
    content: ""
    width: 104%
    height: 102%
    syntax: "<angle>"
    initial-value: 132deg
    border-radius: 8px
    background-image: linear-gradient($rotate, #5ddcff, #3c67e3 43%, #4e00c2)
    position: absolute
    z-index: -1
    inherits: false
    top: -1%
    left: -2%
    animation: spin 2s linear infinite

  &::after
    position: absolute
    content: ""
    syntax: "<angle>"
    top: calc($card-height / 6)
    left: 0
    right: 0
    z-index: -1
    height: 100%
    width: 100%
    inherits: false
    initial-value: 132deg
    margin: 0 auto
    transform: scale(0.8)
    filter: blur($card-height / 6)
    background-image: linear-gradient($rotate, #5ddcff, #3c67e3 43%, #4e00c2)
    opacity: 1
    transition: opacity .5s
    animation: spin 2s linear infinite
    

@keyframes spin


  0%
    transform: rotate(0deg)

  100%
    transform: rotate(360deg)

a
  color: #212534
  text-decoration: none
  font-family: sans-serif
  font-weight: bold
  margin-top: 2rem
htmlcssanimationsass


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions