body {
    animation: backgroundCycle 10s infinite alternate;
    background: rgb(34, 35, 117);
    transition: background-color 1s ease;
}

@keyframes backgroundCycle {
    0%   { background-color: #0a281c; }
    25%  { background-color: #152b10; }
    50%  { background-color: #0e341e; }
    75%  { background-color: #15453a; }
    100% { background-color: #0d2710; }
  }

  .blurry-ellipse {
    position: absolute;
    border-radius: 50% / 40%;
    filter: blur(3.125rem);
    z-index: 1000;
  }
  
  .ellipse1 {
    width: 12.5rem;
    height: 9.5rem;
    background: rgba(146, 208, 255, 0.798);
    animation: moveEllipse1 16s ease-in-out infinite alternate;
  }
  
  .ellipse2 {
    width: 15.5rem;
    height: 4.75rem;
    background: rgba(30, 95, 58, 0.824);
    animation: moveEllipse2 15s ease-in-out infinite alternate;
  }
  
  .ellipse3 {
    width: 10.94rem;
    height: 6.25rem;
    background: rgba(162, 156, 172, 0.824);
    animation: moveEllipse3 17s ease-in-out infinite alternate;
  }
  
  .ellipse4 {
    width: 14rem;
    height: 9.5rem;
    background: rgba(156, 112, 35, 0.863);
    animation: moveEllipse4 16s ease-in-out infinite alternate;
  }
  
  .ellipse5 {
    width: 13rem;
    height: 7rem;
    background: rgba(110, 133, 188, 0.824);
    animation: moveEllipse5 15s ease-in-out infinite alternate;
  }
  
  .ellipse6 {
    width: 11rem;
    height: 6rem;
    background: rgba(230, 53, 62, 0.824);
    animation: moveEllipse6 17s ease-in-out infinite alternate;
  }
  
  .ellipse7 {
    width: 20rem;
    height: 5rem;
    background: rgba(228, 151, 64, 0.798);
    animation: moveEllipse7 16s ease-in-out infinite alternate;
  }
  
  .ellipse8 {
    width: 8rem;
    height: 15rem;
    background: rgba(166, 69, 208, 0.824);
    animation: moveEllipse8 15s ease-in-out infinite alternate;
  }
  
  .ellipse9 {
    width: 5rem;
    height: 14rem;
    background: rgba(177, 208, 56, 0.824);
    animation: moveEllipse9 17s ease-in-out infinite alternate;
  }
  .ellipse10 {
    width: 5rem;
    height: 14rem;
    background: rgba(255, 255, 255, 0.824);
    animation: moveEllipse10 13s ease-in-out infinite alternate;
  }
  
  @keyframes moveEllipse1 {
    0% {
      top: 15%;
      left: 10%;
      transform: scale(1);
    }
    50% {
      top: 50%;
      left: 60%;
      transform: scale(1.2);
    }
    100% {
      top: 25%;
      left: 90%;
      transform: scale(1);
    }
  }
  
  @keyframes moveEllipse2 {
    0% {
      top: 80%;
      left: 90%;
      transform: scale(1);
    }
    50% {
      top: 20%;
      left: 40%;
      transform: scale(1.3);
    }
    100% {
      top: 10%;
      left: 5%;
      transform: scale(1);
    }
  }
  
  @keyframes moveEllipse3 {
    0% {
      top: 5%;
      left: 20%;
      transform: scale(1);
    }
    20% {
      top: 60%;
      left: 10%;
      transform: scale(0.8);
    }
    100% {
      top: 70%;
      left: 85%;
      transform: scale(1);
    }
  }
  
  @keyframes moveEllipse4 {
    0% {
      top: 60%;
      left: 100%;
      transform: scale(0.7);
    }
    50% {
      top: 10%;
      left: 65%;
      transform: scale(1);
    }
    100% {
      top: 30%;
      left: 15%;
      transform: scale(1);
    }
  }
  
  @keyframes moveEllipse5 {
    0% {
      top: 25%;
      left: 15%;
      transform: scale(0.8);
    }
    50% {
      top: 65%;
      left: 50%;
      transform: scale(1.4);
    }
    100% {
      top: 55%;
      left: 100%;
      transform: scale(1);
    }
  }
  
  @keyframes moveEllipse6 {
    0% {
      top: 85%;
      left: 80%;
      transform: scale(1);
    }
    60% {
      top: 30%;
      left: 30%;
      transform: scale(1.3);
    }
    100% {
      top: 20%;
      left: 0%;
      transform: scale(1);
    }
  }
  
  @keyframes moveEllipse7 {
    0% {
      top: 10%;
      left: 40%;
      transform: scale(1);
    }
    20% {
      top: 70%;
      left: 20%;
      transform: scale(1.2);
    }
    100% {
      top: 90%;
      left: 75%;
      transform: scale(0.8);
    }
  }
  
  @keyframes moveEllipse8 {
    0% {
      top: 65%;
      left: 100%;
      transform: scale(1);
    }
    50% {
      top: 25%;
      left: 40%;
      transform: scale(1.4);
    }
    100% {
      top: 15%;
      left: 5%;
      transform: scale(1);
    }
  }
  
  @keyframes moveEllipse9 {
    0% {
      top: 75%;
      left: 85%;
      transform: scale(1);
    }
    50% {
      top: 35%;
      left: 55%;
      transform: scale(0.7);
    }
    100% {
      top: 5%;
      left: 15%;
      transform: scale(1);
    }
  }

  @keyframes moveEllipse10 {
    0% {
      top: 60%;
      left: 85%;
      transform: scale(1);
    }
    50% {
      top: 90%;
      left: 55%;
      transform: scale(0.7);
    }
    100% {
      top: 5%;
      left: 15%;
      transform: scale(1);
    }
  }