/* --- General Body & Background --- */
/* This sets up the full-screen background image */
html, body {
    height: 100%; /* Makes the body take up the full height of the browser window */
    margin: 0;
    font-family: 'Lato', sans-serif; /* Sets the default "normal" font */
}

body {
    /* !! IMPORTANT: Replace 'your-couple-photo.jpg' with the actual filename of your photo !! */
    background-image: url('/images/vt30.jpg');

    /* These properties make the image cover the entire screen without repeating or stretching */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Keeps the image stationary when scrolling */

    /* Aligns the content (nav and main text) vertically */
    display: flex;
    flex-direction: column;
}

/* --- Navigation Bar --- */
/* This styles the "floating" navigation buttons at the top */
nav {
    width: 100%;
    padding: 20px 0; /* Adds some space above and below the nav items */
    text-align: center; /* Centers the navigation links */
}

nav ul {
    list-style: none; /* Removes the default bullet points */
    padding: 0;
    margin: 0;
    display: inline-block; /* Helps with centering */
}

nav li {
    display: inline; /* Makes the list items appear next to each other */
    margin: 0 15px; /* Adds space between the links */
}

nav a {
    text-decoration: none; /* Removes the underline from links */
    color: white; /* Sets the link text color to white */
    font-size: 1.1em;
    font-weight: 300;
    padding: 8px 16px;
    border-radius: 5px; /* Slightly rounds the corners for a softer look */
    transition: background-color 0.3s ease; /* Smooth transition for the hover effect */
}

/* Adds a subtle, semi-transparent background when you hover over a link */
nav a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}


/* --- Main Content --- */
/* This styles and centers the main text on the page */
main {
    /* This group of properties centers the content vertically and horizontally */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: white; /* Sets the text color to white */
    text-align: center;
    padding: 20px; /* Ensures text doesn't touch the screen edges on small screens */
}


/* --- Typography & Text Styling --- */
/* This is where we style the H1 and P tags as you requested */
h1 {
    font-family: 'Great Vibes', cursive; /* The elegant, cursive wedding font */
    font-size: 5rem; /* Makes the main heading large and impactful. Adjust as needed. */
    font-weight: normal;
    margin: 0;
    /* Adds a subtle shadow to make the text readable against any background image */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

p {
    font-size: 1.2rem;
    font-weight: 300; /* A lighter font weight for an elegant feel */
    margin: 10px 0 0 0;
    /* Also adds a shadow for readability */
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7);
}