@property --rotate {
           syntax: "<angle>";
           initial-value: 132deg;
           inherits: false;
       }

       :root {
           --card-height: 55vh;
           --card-width: calc(var(--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: var(--card-width);
           height: var(--card-height);
           padding: 3px;
           position: relative;
           border-radius: 6px;
           justify-content: center;
           align-items: center;
           text-align: center;
           display: flex;
           font-size: 0.9m;
           color: white;

           font-family: sans-serif;
       }

       @media only screen and (max-width: 600px) {
           .card {
               width: 70%;

           }
       }



       .card::before {
           margin-top: -5px;
           content: "";
           width: 104%;
           height: 104%;
           border-radius: 8px;
           background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
           position: absolute;
           z-index: -1;
           top: -1%;
           left: -2%;
           animation: spin 2.5s linear infinite;
       }

       .card::after {
           position: absolute;
           content: "";
           top: calc(var(--card-height) / 6);
           left: 0;
           right: 0;
           z-index: -1;
           height: 100%;
           width: 100%;
           margin: 0 auto;
           transform: scale(0.8);
           filter: blur(calc(var(--card-height) / 6));
           background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
           opacity: 1;
           transition: opacity .5s;
           animation: spin 2.5s linear infinite;
       }

       @keyframes spin {
           0% {
               --rotate: 0deg;
           }

           100% {
               --rotate: 360deg;
           }
       }

       .rewardspluscolour {
           background: #FF76E9;
           background: linear-gradient(to right, #FF76E9 0%, #7759ff 10%, #00feff 30%, #00feff 100%);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;

       }



       .btn-grad {
           background-image: linear-gradient(to right, #a85de5 0%, #5FC3E4 51%, #5f299c 100%);
           margin: 10px;
           padding: 15px 45px;
           text-align: center;
           text-transform: uppercase;
           transition: 0.5s;
           background-size: 200% auto;
           color: white;
           box-shadow: 0 0 20px #0d4370;
           border-radius: 10px;
           display: block;
       }

       .btn-grad:hover {
           background-position: right center;
           /* change the direction of the change here */
           color: #fff;
           text-decoration: none;
       }