body {
  animation: color-cycle-bg 30s infinite;
}

.vh-center {
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.animate-fade-1 {
  z-index: -10;
  animation: fade-1 60s infinite;
}

.animate-fade-2 {
  z-index: -9;
  animation: fade-2 60s infinite;
}

.animate-fade-3 {
  z-index: -8;
  animation: fade-3 60s infinite;
}

.animate-fade-4 {
  z-index: -7;
  animation: fade-4 60s infinite;
}

.animate-fade-5 {
  z-index: -6;
  animation: fade-5 60s infinite;
}

@keyframes color-cycle-bg {
  0% { background-color: #45004E; }
  20% { background-color: #00034E; }
  40% { background-color: #004E3F; }
  60% { background-color: #304E00; }
  80% { background-color: #4E2D00; }
  100% { background-color: #4E002A; }
}
@keyframes fade-1 {
  0% { opacity: 1; }
  20% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade-2 {
  0% { opacity: 0; }
  20% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fade-3 {
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 1; }
  60% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fade-4 {
  0% { opacity: 0; }
  40% { opacity: 0; }
  60% { opacity: 1; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fade-5 {
  0% { opacity: 0; }
  60% { opacity: 0; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}