/* Ensure the image does not exceed 300x300 pixels and center it within the text margins */
/* Header styling */
/* Header styling */
.site-header {
    background-color: #000; /* Light background color */
    padding: 40px 0 50px; /* Increased space around the header and added padding at the bottom */
    text-align: center; /* Center the header content */
    /* Remove the border-bottom to get rid of the blue line */
    /* border-bottom: 2px solid #007BFF; */ /* Commented out */
}

.header-title {
    font-size: 3em; /* Larger than h1 font size */
    font-weight: bold;
    color: #fff; /* Dark text color */
}

.header-title a {
    text-decoration: none; /* Remove underline from the link */
    color: inherit; /* Inherit color from the header-title */
}


/* Add padding before the body content */
body img {
    margin-top: 30px; /* Space between the header and the image */
    max-width: 300px;
    max-height: 300px;
    width: auto;
    height: auto;
    display: block;
    margin: 30px auto 20px; /* Center the image and add spacing below */
}

img {
    margin-top: 30px; /* Add space between the header and the image */
    max-width: 300px;
    max-height: 300px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto 20px; /* Center the image and add spacing below */
}

/* Set a maximum width for the text and center it */
body {
    margin: 0 15px; /* Add left and right margins */
    padding: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

h1, div {
    max-width: 600px;
    margin: 0 auto; /* Center the text */
    padding: 0 15px; /* Add some padding for smaller screens */
}

a {
    display: inline-block; /* Ensure that the margin is applied */
}

.nav-links {
    max-width: 600px;
    margin: 40px auto 0; /* Center the links and add spacing above */
    text-align: center; /* Center the links horizontally */
}

.nav-links a {
    margin: 0 15px; /* Space between links */
    text-decoration: none;
    color: #007BFF; /* Link color */
    font-weight: bold;
}

.nav-links a:hover {
    text-decoration: underline; /* Underline on hover */
}

.dynamic-links a {
    display: inline-block;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    h1, p {
        max-width: 100%; /* Allow full width on small screens */
        padding: 0 10px; /* Reduce padding on very small screens */
    }

    img {
        max-width: 100%; /* Allow the image to scale to the screen size */
        height: auto;
    }

    .nav-links {
        max-width: 100%; /* Adjust width for small screens */
        padding: 0 10px; /* Reduce padding */
    }
}