.text 
  {
    font-family: "Lucida Console", "Courier New", monospace;
    position: relative;
    text-align: center;
   font-size: 4em;
   text-decoration: none;
   color: rgb(255, 255, 255);
   margin-top: 20px;
   text-transform: uppercase;
   letter-spacing: 2px;
       transition: 0.2s;
       font: bold;

  }
   


 .title 
   {
  position: relative;
  align-self: center;
  display: block;
  margin: auto;
max-width: 100%; 
    max-height: 100%;
    width: auto; 
    height: auto; 
    top: -5rem;
    }



.logo 
  {
  position: relative;
  top: -15rem; /* Moves the element 20px higher */
  align-self: center;
  display: block;
  margin: auto;
  max-width: 80%; 
  max-height: 80%;
  width: auto; 
  height: auto; 
  top: -30rem;
  }
  

  .scroll 
  {

  align-self: center;
  display: block;
  margin: auto;
  max-width: 80%; 
  max-height: 80%;
  width: auto; 
  height: auto; 
  z-index: -100;
  top: -8000rem;
  }


/* sends logo to back */
.logotoback 
  {
  position: relative;
  z-index: -8;
  }

/* sends title to front */
.titletofront {
  position: relative;
  z-index: -7;
  
}

/* scales down everything */
.scaledown 
  {
scale: 150%;

  }



 .overlay 
  {

  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height:275%;
  background: rgba(0, 0, 0, 0);
  z-index: -10;


  }







  .video-container {
    display: flex;
    gap: 0.1vw; /* Keeps a fixed distance relative to viewport width */
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Ensures responsiveness */
    padding: 2%;
}

.video-container video {
    width: 35vw; /* Adjust width based on viewport */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%;
}