/* style.css */

/* Basic Reset & Body Styling */
body {
    margin: 0;
    padding: 0;
    /* Using Raleway font for body text */
    font-family: 'Raleway', sans-serif;
    background-color: #ffffff; /* White background */
    color: #000000; /* Black text */
    line-height: 1.7; /* Slightly increased line height for readability */
    font-weight: 400; /* Regular weight for Raleway */
}

/* Container for centering content */
.container {
    max-width: 800px; /* Limit content width */
    margin: 40px auto; /* Center the container with top/bottom margin */
    padding: 0 30px; /* Add padding on the sides */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Header Styling */
header {
    text-align: center; /* Center header content */
    margin-bottom: 50px; /* Space below header */
    padding-bottom: 25px; /* Padding below header content */
    border-bottom: 2px solid #dddddd; /* Slightly thicker gray bottom border */
}

header h1 {
    /* Using Playfair Display font for the heading */
    font-family: 'Playfair Display', serif;
    font-size: 3.5em; /* Adjusted font size for the new font */
    margin-bottom: 30px; /* More space below the title */
    font-weight: 700; /* Bold weight for Playfair Display */
    letter-spacing: 1px; /* Add subtle letter spacing */
}

/* Navigation Menu Styling */
nav ul {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
}

nav li {
    display: inline-block; /* Display menu items horizontally */
    margin: 0 15px; /* Adjusted horizontal spacing */
}

nav a {
    /* Using Raleway for navigation consistency, slightly bolder */
    font-family: 'Raleway', sans-serif;
    text-decoration: none; /* Remove underline from links */
    color: #000000; /* Black link color */
    font-weight: 500; /* Medium weight for nav links */
    font-size: 1.1em;
    padding: 5px 10px; /* Add padding for better click area */
    transition:
        color 0.3s ease,
        background-color 0.3s ease; /* Smooth transition for hover effect */
    border-radius: 4px; /* Slightly rounded corners for hover effect */
}

nav a:hover {
    color: #ffffff; /* White text on hover */
    background-color: #000000; /* Black background on hover */
}

/* Main Content Styling */
main article {
    /* Text alignment is default (left) */
}

main article p {
    margin-bottom: 1.8em; /* Add slightly more space between paragraphs */
    font-size: 1.05em; /* Slightly larger paragraph font size */
}

/* Footer Styling */
footer {
    text-align: center; /* Center footer content */
    margin-top: 50px; /* Space above footer */
    padding-top: 25px; /* Padding above footer content */
    border-top: 2px solid #dddddd; /* Slightly thicker gray top border */
    font-size: 0.9em; /* Keep footer font size slightly smaller */
    color: #333333; /* Slightly lighter black for footer text */
}

/* --- Responsive Design --- */

/* Medium screens (Tablets) */
@media (max-width: 768px) {
    .container {
        max-width: 90%; /* Use more screen width */
        margin: 30px auto;
        padding: 0 20px;
    }

    header h1 {
        font-size: 2.8em; /* Reduce title size */
        margin-bottom: 25px;
    }

    nav li {
        margin: 0 10px; /* Reduce nav spacing */
    }

    nav a {
        font-size: 1em; /* Reduce nav font size */
        padding: 4px 8px;
    }

    main article p {
        font-size: 1em; /* Reduce paragraph font size */
    }
}

/* Small screens (Mobiles) */
@media (max-width: 480px) {
    .container {
        margin: 20px auto;
        padding: 0 15px;
    }

    header h1 {
        font-size: 2.2em; /* Further reduce title size */
        margin-bottom: 20px;
        letter-spacing: 0.5px;
    }

    /* Stack navigation items vertically */
    nav li {
        display: block; /* Make list items block level */
        margin: 10px 0; /* Add vertical spacing */
    }

    nav a {
        display: block; /* Make links fill the list item */
        padding: 8px; /* Adjust padding for block display */
    }

    main article p {
        font-size: 0.95em; /* Adjust paragraph font size for small screens */
        line-height: 1.6;
    }

    footer {
        margin-top: 40px;
        padding-top: 20px;
    }
}