* {
   margin: 5;
   padding: 5;
 }

 html {
   font-family: Poppins;
   color: #f0f0f0;
 }

 h1 {
   color: white;
 }

 h3 {
   color: rgb(190, 197, 219);
 }


 body {
   min-height: 100vh;
   background: #0b0d15;
   color: #a2a5b3;
   align-content: center;
 }

 .card {
   margin: 0 auto;
   padding: 2em;
   max-width: 300px;
   background: #1c1f2b;
   text-align: center;
   border-radius: 10px;
   position: relative;
 }

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

 .card::after,
 .card::before {
   content: '';
   position: absolute;
   height: 100%;
   width: 100%;
   background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
   top: 50%;
   left: 50%;
   translate: -50% -50%;
   z-index: -1;
   padding: 3px;
   border-radius: 10px;
   animation: 3s spin linear infinite;
 }

 .card::before {
   filter: blur(1.5rem);
   opacity: 0.5;
 }

 @keyframes spin {
   from {
     --angle: 0deg;
   }

   to {
     --angle: 360deg;
   }

 }