:root {
  --blue-200: #BFDBFE;
  --cyan-200: #A5F3FC;
  --blue-100: #DBEAFE;
  --cyan-100: #ECFEFF;
}

html, body {
  margin: 0;
  height: 100%;
}

/* Multi-stop animated gradient */
body {
  background: linear-gradient(
    115deg,
    var(--blue-200) 0%,
    var(--cyan-200) 30%,
    var(--cyan-100) 60%,
    var(--blue-100) 100%
  );

  background-size: 400% 400%;
  animation: smoothGradient 10s ease-in-out infinite;
}

@keyframes smoothGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
body.diagonal-gradient {
  background: linear-gradient(
    45deg,
    var(--blue-200),
    var(--cyan-200),
    var(--blue-200)
  );

  background-size: 300% 300%;
  animation: diagonalShift 10s ease infinite;
}

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