@media only screen and (max-width: 600px) {
    /* reduce the font size for all text */
    body {
      width: 100%;
    }
  
    /* increase the size of buttons for easier tapping on mobile devices */
    button {
      padding: 10px 20px;
    }
  
    /* make sure images don't overflow their container */
    img {
      max-width: 100%;
    }
  
    /* stack navigation items vertically instead of horizontally */
    nav ul {
      flex-direction: column;
    }
  
    /* hide non-essential elements on small screens */
    .hide-on-small {
      display: none;
    }
  
  }


/* Set position of video to full screen */
    video {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Make the video fill the entire container */
        z-index: -1; /* Set z-index to -1 so video is behind other elements */
      }
      
   /* Position text and button elements over video */
   h1, p, button {
    position: absolute;
    top: 40%; /* Adjusted from 50% */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; /* Set z-index to 1 so elements are in front of video */
    color: #fff; /* Set text color to white */
    margin-bottom: 100px; /* Add margin to the bottom of each element */
  }
  
  h1 {
    top: 25%;
    text-shadow: 0 0 20px #000000;
  
}
  
  p {
    top: 50%;
    text-shadow: 0 0 10px #1aff00;
    font-size: 38px;
    bottom: 10%;
  }


  /* Style button */
  button {
    padding: 10px 20px;
    background-color: #00000073;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    top: 70%;
    text-shadow: 0 0 20px #ffffff;
  }

  button:hover{
    box-shadow: 0 0 15px rgb(255, 0, 0);
  }