/* This code is not mine. I learned it in an exercise of w3Schools.com  | https://www.w3schools.com/css/tryit.asp?filename=trycss3_property6 */

/*  The @property rule is used to define custom CSS properties directly in the stylesheet 
    without having to run any JavaScript. */

/*  @property rule is here used to animate a gradient. */

@property --startColor {
  syntax: "<color>";
  initial-value: #eadedb;
  inherits: false; /* Set the inherits value to false. This means that the custom property WILL NOT inherit values from its parent elements.*/
}

@property --endColor {
  syntax: "<color>";
  initial-value: #bc70a4;
  inherits: false;
}

.smoky-appearance {
  background: linear-gradient(var(--startColor), var(--endColor));
  animation: gradient 3s linear infinite;
}

@keyframes gradient {
  0%,
  100% {
    --startColor: #eadedb;
    --endColor: #bc70a4;
  }
  50% {
    --startColor: #bc70a4;
    --endColor: #bfd641;
  }
}