body { 
    /* Keeps your old color as a fallback in case the image fails to load */
    background-color: rgb(255, 222, 89); 

    /* Links the image file (replace background.jpg with your exact file name) */
    background-image: url('background.jpg'); 

    /* Prevents the image from tiling like wallpaper if it is smaller than the screen */
    background-repeat: no-repeat; 

    /* Forces the image to scale nicely and cover the entire screen area */
    background-size: cover; 

    /* Centers the image perfectly on the screen */
    background-position: center center; 

    /* Locks the background image in place so text scrolls smoothly over it */
    background-attachment: fixed; 

    /* Ensures the body takes up at least the full height of the browser screen */
    min-height: 100vh; 
}

footer {
    height: 1000px; /* Required to create vertical space */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

h1 {
    color: white;
    text-align: center;
    font-size: 76px; 
    font-family: Papyrus, fantasy;

    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white */
    color: #333333;                             /* Dark charcoal text for high contrast */
    
    /* Spacing properties (makes it look like a clean box) */
    padding: 15px;                              /* Internal space around text */
    border-radius: 8px;                         /* Rounded corners */
    display: inline-block;
}
img {
    display: block;      /* Overrides inline default */
    margin-left: auto;   /* Splits remaining space evenly */
    margin-right: auto;
}
p {
    color: white;
    font-size: 47px;
    font-family: Lucida Console, monospace;

    background-color: rgba(255, 222, 89, 0.75); /* Semi-transparent white */
    color: #333333;                             /* Dark charcoal text for high contrast */
    
    /* Spacing properties (makes it look like a clean box) */
    padding: 15px;                              /* Internal space around text */
    border-radius: 8px;                         /* Rounded corners */
    display: inline-block;
}
.btn-1 {
    /* Box styling */
    background-color: black;   /* Blue background */
    color: white;                /* White text */
    padding: 10px 20px;          /* Vertical & horizontal spacing */
    border-radius: 5px;          /* Rounded corners */

    /* Behavior styling */
    display: inline-block;       /* Makes padding work properly */
    text-decoration: none;       /* Removes the link underline */
    font-weight: bold;           /* Makes text thicker */
    font-size: 56px;
    font-family: Papyrus, fantasy;
    border: 3px solid #FFE300;
}

/* Optional: Changes color when user hovers over it */
.btn-1:hover {
    background-color: black;   /* Darker blue */
}
.btn-2 {
    /* Box styling */
    background-color: black;   /* Blue background */
    color: white;                /* White text */
    padding: 10px 20px;          /* Vertical & horizontal spacing */
    border-radius: 5px;          /* Rounded corners */

    /* Behavior styling */
    display: inline-block;       /* Makes padding work properly */
    text-decoration: none;       /* Removes the link underline */
    font-weight: bold;           /* Makes text thicker */
    font-size: 56px;
    font-family: Papyrus, fantasy;
    border: 3px solid #FFE300;
}

/* Optional: Changes color when user hovers over it */
.btn-2:hover {
    background-color: black;   /* Darker blue */
}
.btn-3 {
    /* Box styling */
    background-color: black;   /* Blue background */
    color: white;                /* White text */
    padding: 10px 20px;          /* Vertical & horizontal spacing */
    border-radius: 5px;          /* Rounded corners */

    /* Behavior styling */
    display: inline-block;       /* Makes padding work properly */
    text-decoration: none;       /* Removes the link underline */
    font-weight: bold;           /* Makes text thicker */
    font-size: 56px;
    font-family: Papyrus, fantasy;
    border: 3px solid #FFE300;
}

/* Optional: Changes color when user hovers over it */
.btn-3:hover {
    background-color: black;   /* Darker blue */
}


/* Adds 15 pixels of space under each list item */
li {
    margin-bottom: 15px;
}