/*
@source: https://www.youtube.com/watch?v=ezP4kbOvs_E
@demo: https://jsbin.com/rixenodiga/3/edit?html,css,output
*/

body {
  background: #000;
}


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

.card {
  
  /* nefunguje pro animaci, nahradi se  @property */
  /*
    --angle: 0deg
  */
  
  width: 300px;
  height: 300px;
  background: #000;
  border-radius: 10px;
  margin: 3rem;
  position: relative;
}

.card::after,
.card::before 
{
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  
  /* vice barev */
   background-image: conic-gradient(from var(--angle), red, blue, pink, orange, lime); 

  /* jedna a do ztracena */
  /*background-image: conic-gradient(from var(--angle), transparent 80%, red); */ /* velikost definuje rozsah*/
  
  padding: 3px;
  top: 50%;
  left: 50%;
  translate: -50% -50%;

  animation: 3s spin linear infinite;

}

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


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