@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap');


html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
/* 
.video-background {
    position: fixed;
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto;
    z-index: -100;

    
} */

.video-background {
    position: fixed;
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto;
    z-index: -100;
    background: url('assets/fallback-image.webp') no-repeat center center fixed; 
    background-size: cover;
}

video#bgvid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This ensures that the video covers the entire screen and maintains aspect ratio */
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
    color: #fff;
        font-family: 'Orbitron', sans-serif; /* Futuristic font */
        color: #fff;
        text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); /* Text shadow for contrast */
  
}

h1 {
    font-size: 4em;
    margin-bottom: 0.5em;
    text-transform: uppercase; /* Uppercase text for a stronger impact */
    animation: text-glow 2s infinite alternate;
}

p {
    font-size: 1.5em;
    letter-spacing: 3px; /* Increased letter-spacing for a modern feel */
}

/* Keyframes for text glow animation */
@keyframes text-glow {
    from {
        text-shadow: 0 0 10px #00b4d8, 0 0 20px #00b4d8, 0 0 30px #00b4d8, 0 0 40px #0096c7, 0 0 70px #0096c7, 0 0 80px #0096c7, 0 0 100px #0096c7, 0 0 150px #0096c7;
    }
    to {
        text-shadow: 0 0 5px #00b4d8, 0 0 10px #00b4d8, 0 0 15px #00b4d8, 0 0 20px #0096c7, 0 0 35px #0096c7, 0 0 40px #0096c7, 0 0 50px #0096c7, 0 0 75px #0096c7;
    }
}

@media (max-width: 480px) { /* Adjust the max-width as needed for your design */
    .content h1 {
      font-size: 48px; /* You might need to adjust the font size to fit on one line */
      white-space: nowrap; /* Prevents the text from wrapping */
      text-overflow: ellipsis; /* Adds an ellipsis if the text is too long */
    }
  }