/* Import a mystical-looking Google Font (like Lora or Merriweather) */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');

/* --- General Reset & Background Setup --- */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Hides scrollbars caused by video positioning */
    font-family: 'Merriweather', serif;
}

/* --- Video Container Styling (Desktop Aspect Ratio Fix) --- */
.video-container {
    position: fixed; /* Fixed position ensures it covers the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Puts the video *behind* the header content */
    overflow: hidden;
}

#background-video {
    /* **KEY FIX FOR STRETCHING ON DESKTOP** */
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the video element */
    
    /* Ensure the video always covers the entire viewport, preventing stretch */
    min-width: 100%;
    min-height: 100%;
    
    /* Allow browser to calculate size proportionally, maintaining aspect ratio */
    width: auto;
    height: auto;
    
    object-fit: cover; /* Useful fallback, ensures coverage */
    filter: brightness(0.6); /* Slightly darken the video for better text readability */
}

/* --- Header Styling (Revised for Responsiveness) --- */
#site-header {
    position: relative;
    z-index: 1; 
    text-align: center;
    **padding: 20px 10px;** /* Reduced padding on top/bottom, added horizontal padding */
    color: white; 
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); 
    **box-sizing: border-box;** /* Crucial: ensures padding doesn't add to element width */
    **width: 100%;** /* Ensure header takes full width for padding/text alignment */
}

#site-header h1 {
    **font-size: 8vw;** /* Responsive font size: 8% of viewport width */
    **max-font-size: 4em;** /* Prevents it from getting too large on big screens */
    letter-spacing: 5px; /* Keep this for the mystical feel */
    margin: 0;
    color: #e0f2f1;
    **line-height: 1.2;** /* Adjust line height for better display on small screens */
    **word-break: break-word;** /* Allows long words to break to prevent overflow */
    **overflow-wrap: break-word;** /* Alternative/newer property for word breaking */
}

/* Optional: Add a subtle border or line under the title */
#site-header::after {
    content: '';
    display: block;
    width: 200px;
    height: 2px;
    background: #e0f2f1;
    margin: 15px auto 0;
    opacity: 0.7;
    **max-width: 80%;** /* Make the line responsive too */
}