/* 1. Basic Reset */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* Ensures no scrollbars or default margins interfere */
}

/* 2. Full-Screen Background Image */
body {
    /* Set the background image */
    background-image: url('coming-soon.jpg'); 
    
    /* Center the image horizontally and vertically */
    background-position: center center;
    
    /* Do not repeat the image */
    background-repeat: no-repeat;
    
    /* This is the magic property: It scales the image to 
       be as large as possible without stretching it, 
       always keeping the image's aspect ratio. The excess
       parts of the image are clipped, but the screen is fully covered. */
    background-size: cover; 
    
    /* Fixes the background so it doesn't scroll with the content */
    background-attachment: fixed;
}

/* 3. Optional: Styling for text overlay */
.content-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* Choose a color that stands out against your image */
    text-align: center;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    border-radius: 10px;
    font-family: sans-serif;
}

.content-overlay h1 {
    font-size: 3em;
    margin-bottom: 0.5em;
}