body {
    margin: 0;               /* Remove default margin */
    padding: 0;              /* Remove default padding */
    font-family: Arial, sans-serif; /* Set a default font */
    background-color: #f0f0f0; /* Optional: light background color for contrast */
}

h1 {
    color: white;            /* Set the text color to white */
    background-color: black; /* Set the background color to black */
    padding: 20px;          /* Add padding for better spacing */
    margin: 20px 0;         /* Add margin above and below the h2 element */
    font-size: 24px;        /* Set the font size */
    text-align: center;     /* Center the text */
    border-radius: 5px;     /* Optional: add rounded corners */
}

.container {
    max-width: 800px;        /* Set the maximum width to 800 pixels */
    width: 100%;             /* Allow the width to be responsive up to max-width */
    margin: 0 auto;          /* Center the container by setting left and right margins to auto */
    padding: 20px;           /* Add padding inside the container */
    background-color: white; /* Set a background color for the container */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow for depth */
    border-radius: 5px;      /* Optional: add rounded corners */
}

/* Responsive design: Adjust font size on smaller screens */
@media (max-width: 600px) {
    h1 {
        font-size: 20px;     /* Reduce font size for small screens */
        padding: 15px;       /* Adjust padding for smaller screens */
    }
}