/* Homepage */
:root {
  --mckl-background: #0a0f17;
  --mckl-background-light: rgba(10, 15, 23, 1);
  --mckl-background-mid: rgba(13, 19, 32, 0.9);
  --mckl-background-dark: #070a12;
}

html.homepage-wrapper body {
  background: linear-gradient(
    -50deg,
      var(--mckl-background-light),
      var(--mckl-background-mid),
      var(--mckl-background-dark),
      var(--mckl-background-mid),      
      var(--mckl-background-dark),
      var(--mckl-background-mid)
  );
  background-size: 4000% 4000%;
  animation: gradientShift 25s ease infinite;
  color: white;
  justify-content: center;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}