/* Scroll out of Website */
body {
  margin: 0;
}

.loading-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color-1);
  z-index: 1;
  opacity: 1; /* Start with opacity 1 to ensure it is visible on page load */
  animation: swipeDown 10s forwards, enableScrolling 1s 1s forwards; /* Adjust the duration as needed */
}

@keyframes swipeDown {
  from {
    opacity: 1;
    transform: translateX(0%); /* Start right of the viewport */
  }
  to {
    opacity: ;
    transform: translateX(100%); /* Animate to the left of the viewport */
  }
}

@keyframes enableScrolling {
  to {
    overflow: auto; /* Enable scrolling after the animation is complete */
  }
}

/* Optional: Center the loading text in the loading panel */
.loading-panel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: red;
}