/* ===================================
SHORTHAND 
==================================== */
@keyframes example {
  0%   {background-color: red;}
  100% {background-color: green;}
}
.shorty {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: ease; /* linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) */
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* extra properties */
  animation-fill-mode: none; /* forwards | backwards | both */
  animation-play-state: running; /* paused */
}
.shorty {
  animation: example 5s linear 2s infinite alternate;
}
/* ===================================
SHORTHAND 
==================================== */
@keyframes w3c {
  0%   {background-color: #385C90; color: white;}
  20%  {background-color: #7679A8; color: white;}
  40%  {background-color: #F090C0; color: black;}
  60%  {background-color: #EBBBDD; color: black;}
  80%  {background-color: #E6E6FA; color: black;}
  100% {background-color: #385C90; color: white;}
}

.w3c {
  animation-name: w3c;
  animation-duration: 6s;
  animation-delay: -2s;
  animation-iteration-count: infinite; 
  animation-direction: reverse; /* alternate | alternate-reverse*/
  /* specifies the speed curve of the animation */
  animation-timing-function: ease; /* linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) */
  animation-fill-mode: none; /* forwards | backwards | both */
}
.w3c:hover {
  animation-play-state: paused; 
}

@keyframes w3c-1 {
  0%   {background-color: #E6E6FA; color: black;}
  20%  {background-color: #EBBBDD; color: black;}
  40%  {background-color: #385C90; color: white;}
  60%  {background-color: #7679A8; color: white;}
  80%  {background-color: #F090C0; color: black;}
  100% {background-color: #E6E6FA; color: black;}
}

.w3c-1 {
  animation-name: w3c-1;
  animation-duration: 6s;
  animation-delay: -2s;
  animation-iteration-count: infinite; /* infinite */ 
  /* The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate" to make the animation run forwards first, then backwards */
  animation-direction: reverse; /* alternate | alternate-reverse*/
}

.w3c, .w3c-1 {
  text-shadow: 0px 1px 2px rgba(255,255,255,0.1); /* Un velo di luce */
  font-weight: 600; /* Per sostenere la leggibilità durante il fade */
}