body {
    font-family: "Times New Roman", Times, serif; /* Default font for larger screens */
    margin: 0;
    padding: 0;
    line-height: 1.6;
    font-size: 20px;  /* Set base font size to 20px (larger text for better readability) */
}

@media screen and (max-width: 768px) {
    body {
        font-family: Arial, sans-serif; /* Switch to Arial for smaller screens */
        font-size: 18px;  /* Increase font size slightly for mobile */
    }
}

/* NEW: Paragraph text size */
p {
    font-size: 20px; /* Increased from default for better readability */
}

@media screen and (max-width: 768px) {
    p {
        font-size: 20px; /* Slightly larger on mobile devices */
    }
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    width: 100%; /* Ensures header spans the entire width of the screen */
}

header .content {
    max-width: 600px;  /* Constrain text to 600px */
    margin: 0 auto;    /* Center the text inside the header */
}

.container {
    max-width: 600px; /* Adjust as needed */
    margin: 0 auto;   /* Center the container */
    padding: 0 15px;  /* Add some padding on the sides */
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

.small-image {
    max-width: 600px; /* Image won't exceed 600px width */
    width: 100%;      /* Allows the image to shrink if the container is smaller */
    height: auto;     /* Maintains aspect ratio */
    display: block;   /* Optional: Makes it easier to center using margin */
    margin: 0 auto;   /* Centers the image horizontally */
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    /* Footer appears at the bottom of the content */
}