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

.animated-background-dark, .animated-background-light {
    transition: background 5s ease; /* Adjust time as needed */
    animation: gradientBG 15s ease infinite;
    animation-delay: 0s;
}

.animated-background-light {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
}

.animated-background-dark {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(-45deg, #243B55, #141E30, #0A0F0D, #2F3C4F);
    background-size: 400% 400%;
}

/* General Toggle Switch Styles */
.theme-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}