html, body {
    margin: 0;
    padding: 0;
    height: 100vh; /* Viewport Height: ensures full screen height */
    width: 100vw;  /* Viewport Width: ensures full screen width */
    color: white; 
    font-family: Helvetica, Arial, sans-serif;
}

body {
    overflow-x: hidden; /* Only hides horizontal overflow that 100vw can cause */
    position: relative;
    text-align: left;
    height: 100vh; /* Ensures the body uses the full height provided by the html rule */
    width: 100vw;  /* Ensures the body uses the full width provided by the html rule */
}

/* The container that holds the images - Using position: fixed for reliability */
.background-slider {
    position: fixed; /* Fixed to the browser viewport */
    top: 0;
    left: 0;
    width: 100vw;    /* Ensure it covers the full viewport width */
    height: 100vh;   /* Ensure it covers the full viewport height */
    z-index: -2;     /* Puts it behind everything else */
}

/* Individual images */
.bg-img {
    position: absolute; 
    width: 100%;
    height: 100%; 
    object-fit: cover; /* Ensures images cover the whole screen correctly */
    opacity: 0; /* Starts hidden */
}

/* The class toggled by JavaScript to show an image */
.bg-img.active {
    opacity: 1; /* Makes the image visible instantly */
    z-index: -1; /* This image is active, but still behind the content */
}

/* Ensure your content is layered above the background */
.content {
    position: relative; 
    padding-top: 100px; 
    z-index: 10; /* Keep this positive and high */
    background-color: transparent; /* Ensures the content background is clear */
    width: 100%; /* Ensures the content div takes up the full width */
    margin: 0 auto; /* Centers the content div horizontally */
}

h1 {
    font-weight: bold;
    text-align: center;
    letter-spacing: 5px;
    color: yellow;
} /* <-- Added missing closing brace here */

/* Styles for all paragraph text (inheriting yellow from inline styles in HTML) */
p {
    text-align: center;
}

/* Styles for the separator lines (using <hr> is better than long dashes) */
.separator-line {
    border: none;             /* Removes the default 3D border effect */
    height: 1px;              /* Sets the thickness of the line */
    background-color: yellow; /* Sets the color to yellow */
    width: 80%;               /* Centers the line and gives it a fixed width */
    margin: 20px auto;        /* Centers the element horizontally */
}

/* Styles for the main highlight text */
.highlight {
    text-align: center;
    letter-spacing: 5px;
    /* Color and font-size are set via inline styles in your current HTML */
}

/* Styles for all links (A tags) - making them yellow and removing underlines */
a {
    color: inherit;          /* Inherits the yellow color from the parent <p> or inline style */
    text-decoration: none;   /* Removes the default underline */
}

a:hover, a:focus {
    color: #FFD700;          /* A slightly different yellow/gold color on hover */
    text-decoration: underline; 
}