body {
  /* Force the body to fill the entire screen */
/* background: black; */
  height: 100%;
  width: 100%;
  /* Hide elements that flow outside the viewable space */
  overflow: hidden; 
}
h1 {   font-size: 5vh; /* Font size will scale with viewport height */
}
.star-wars-crawl {

/*start code */
  color: #feda4a;
  font-family: 'Pathway Gothic One', sans-serif;
  height: 200vh;
  position: relative;
  text-align: center;
 overflow: hidden; /* Important for the fade effect */
}

.crawl-text {
  animation: crawl 6s linear forwards; /* Adjust duration */
   font-size: 2em; /* Font size will scale with viewport height */
   left: 10%; /* Center the text */
   margin: 0 auto;
   position: absolute;
/*   top: 105vh; */ /* Start off-screen at the bottom */
   transform-origin: 0 100%;
   width: 80%; /* Adjust width for text wrapping */
}

@keyframes removefade {
0%  {opacity: 1; }
0%  {opacity: 1; }
100% {opacity: 0; }
}


@keyframes crawl {
  0% {
    top: 100vh; /* transform: rotateX(10deg) translateZ(-10px); */
     }
 100% {	
    top: 6vh;  /* Adjust to ensure it scrolls completely off */
    transform: rotateX(0deg) translateZ(1000px); /* Adjust for receding effect */
       }
 } 
@keyframes bggoaway {
0% {  opacity: 1; /* Initial state */
  }
 100% {opacity: 0; /* Fade out */
}}

/* Optional: Fade-in from bottom */

 .star-wars-crawl::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%; /* Adjust height of the fade */
  background: linear-gradient(to bottom, transparent, black);
  z-index: 1;
  pointer-events: none;
 opacity: 1;
transform-origin: 0 100%;
  animation: removefade 4s ease-out  9s forwards;
}
/*  transition: opacity 0.5s ease-out, visibility 0s ease-out 0.5s; /* Fade out opacity, then hide visibility */

/*rem9ve background*/
.container {
  position: relative; /* Needed for positioning pseudo-elements */
  width: 100%;
  height: 100%; /* Example height */
}
.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:  url('http://chaos.frolicbb.com/Hubble_ultra_deep_field_high_rez_edit1-2160-25.jpg');
  background-size: contain;
  animation: bggoaway 6s ease-in-out 4s forwards; /* Animation duration and timing */
  transform-origin: 0 100%;
  z-index: -1; /* Place it behind other content */

}