/* Basic reset to remove default browser margins and paddings */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Style the body to contain the background image */
body {
    background-image: url('landing.jpg'); /* Replace with your image path */
    background-size: cover; /* This is crucial: it scales the image to cover the entire container */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-attachment: fixed; /* Keeps the image in place when scrolling */
    font-family: Arial, sans-serif;
    color: white;
    text-align: center;
}

/* Style and center the content container */
.content {
    display: flex; /* Use flexbox for easy centering */
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    height: 100vh; /* Make the div take up the full viewport height */
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.4); /* Adds a semi-transparent overlay to make text more readable */
}