body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1em 0;
}

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

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

/* Responsive design for smaller screens */
@media screen and (max-width: 600px) {
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }
}

.about-content {
    max-width: 800px; /* Limit the width for better readability */
    margin: auto; /* Center the content */
    text-align: left; /* Align text to the left for readability */
    font-size: 1.1em; /* Slightly larger font for ease of reading */
}

.about-content p {
    margin-bottom: 1em; /* Spacing between paragraphs */
}

.about-content a {
    color: brown; /* Change the color to brown */
    text-decoration: none; /* No underline for a cleaner look */
}

.about-content a:hover {
    text-decoration: underline; /* Underline on hover for better UX */
    color: brown; /* Keep the brown color on hover */
}

/* Responsive design adjustments can also be made if necessary */

/* Style for all hyperlinks */
a {
    color: brown; /* Change the color to brown */
    text-decoration: none; /* Optional: removes underline from links */
}

/* Style for hyperlinks on hover */
a:hover {
    text-decoration: underline; /* Adds underline on hover for better UX */
    color: brown; /* Optional: darker brown color on hover */
}


.padded-section {
    padding: 20px;
    margin: 20px;
    border: 1px solid #ddd; /* Optional: adds a subtle border */
}

/* You might want to style other elements as well, like the header, nav, etc. */

/* Existing styles for the padded-section and other elements */

/* Style for the footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #f5f5f5; /* Example background color, change as needed */
    border-top: 1px solid #ddd; /* Optional border for a neat look */
}

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

footer ul li {
    display: inline;
    margin-right: 10px;
}

footer a {
    text-decoration: none;
    color: #333; /* Change as per your color scheme */
}

/* Responsive design adjustments can also be made if necessary */