/* Universal box-sizing for better layout control */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Basic reset for body and html to ensure no default margins/paddings */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Prevents horizontal scrollbar if content overflows */
}

.background {
    /* Position it to cover the entire viewport */
    position: fixed; /* This is key: it fixes the background relative to the viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Take 100% of the viewport width */
    height: 100vh; /* Take 100% of the viewport height */
    z-index: -1; /* Place it behind all other content */

    /* Background image styles */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* Ensures the image covers the entire background area */
    opacity: 1; /* Fully opaque */
    
    /* New Text Styles */
    font-family: 'Lato', sans-serif; /* Friendly and legible body font */
    color: #F8F4E3; /* Very light gold/cream */
    /*text-shadow: 1px 1px 3px rgba(30, 80, 70, 0.7); /* Deeper, slightly more saturated shadow */
}

/* This is your main content container */
.page-content {
    position: relative; /* Essential to create a new stacking context for content */
    z-index: 1; /* Ensure content appears above the background */
    padding: 20px; /* Add some padding around your content */
    min-height: 101vh; /* Ensure there's always a little extra height to trigger scrolling */
    color: white; /* Example: set text color for readability against the background */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Example: add text shadow for contrast */
}

/* Styles for demonstration purposes to make content scrollable */
.page-content p {
    margin-bottom: 1em;
    line-height: 1.6;
}

/* Style for visited links (if you want them to look different) */
.page-content a:visited {
    color: #DDA0DD; /* Example: Plum - for links that have been clicked */
}

/* Style for links when the mouse hovers over them */
.page-content a:hover {
    color: #FFF; /* Example: Pure White on hover */
    text-decoration: none; /* Remove underline on hover for a cleaner look */
}

/* Style for active links (while being clicked) */
.page-content a:active {
    color: #FF4500; /* Example: OrangeRed - brief flash when clicking */
}

/* If you want text that *looks* like a link but isn't clickable, use a span and style it */
.non-clickable-link-style {
    color: #FFD700; /* Gold color */
    text-decoration: none; /* No underline */
    cursor: default; /* Change cursor to default to indicate it's not clickable */
    font-style: italic; /* Maybe italicize to differentiate */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}