/*
  This CSS will make your 'D.D.R. (Dooms Day Research)' image
  the background of your entire web page.
*/

body {
    /* --- Core Background Image Properties --- */

    /* 1. Set the image source */
    /* IMPORTANT: Replace 'DDR_background_research.jpg' with the actual
       path and filename of your saved D.D.R. image.
       If it's in a subfolder like 'images', use 'images/DDR_background_research.jpg' */
    background-image: url('DDR_background_research.jpg');

    /* 2. Control image repetition */
    /* 'no-repeat' means the image appears only once */
    background-repeat: no-repeat;

    /* 3. Position the image */
    /* 'center center' will center the image horizontally and vertically */
    background-position: center center;

    /* 4. Size the image */
    /* 'cover' will scale the image to cover the entire background area.
       Be aware that if your image has low resolution, it might appear blurry
       when stretched to cover large screens. */
    background-size: cover;

    /* 5. Determine scroll behavior */
    /* 'fixed' means the background image stays in place when the user scrolls */
    background-attachment: fixed;


    /* --- Additional Essential Properties for a Full-Page Background --- */

    /* Fallback color: If the image fails to load, this color will be visible.
       Choose a color that complements your image's dominant tones (e.g., black) */
    background-color: #000;

    /* Ensure the body (and thus the background) covers the entire height of the viewport */
    min-height: 100vh;

    /* Remove default margins and padding browsers apply to the body,
       ensuring the background fills the entire screen edge-to-edge. */
    margin: 0;
    padding: 0;

    /* Optional: Hide overflow to prevent scrollbars if content is minimal
       and background-size: cover causes slight over-stretching on some setups. */
    overflow: hidden;
}