#background-div {
    position: relative;  /* Set relative positioning for child element */
    height: 100vh;  /* Set full viewport height */
    width: 100vw;  /* Set full viewport width */
    overflow: hidden;
  }
  
  #login-form {
    position: absolute;  /* Make child element position absolute */
    top: 50%;  /* Position vertically in the center */
    left: 50%;  /* Position horizontally in the center */
    transform: translate(-50%, -50%);  /* Center based on its own dimensions */
    background-color: white;
    justify-content: center;
    padding: 5%;
    border-radius: 10%;
    width: fit-content;
    /* Adjust padding and margins as needed */
  }

  .to_space {
    padding: 2%;
  }

  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0;  /* Initially hide all images */
    animation: slideShow 10s infinite alternate ease-in-out;
  }
  
  @keyframes slideShow {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
  }
  
  /* Optional: Add different animation styles for each image */
  .background-image:nth-child(2) {
    animation-delay: 5s;  /* Start image 2 after 5 seconds */
  }
  

 



#login-form {
    position: relative;
    z-index: 1;
    /* Add your login form styles here */
}