/* Global reset: Ensures consistent rendering across browsers, reducing layout exploits */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styling: Set background color (change #f0f0f0 to any hex, e.g., #cccccc for darker gray) */
/* Body: Base font and background; flex for footer positioning; color for contrast/accessibility */
body {
    font-family: 'EB Garamond', serif; /* Default font to Garamond for readability; serif fallback */
    background-color: #fafafa; /* Light gray background; have used #f0f0f0 also; changeable for themes; change this value to adjust */
    display: flex;
    flex-direction: column; /* Stack container and footer vertically */
    min-height: 100vh; /* Ensure body takes full viewport height */
    color: #333; /* Dark text for readability */
}

/* Main container: Center content horizontally and vertically; max width for readability; flex-grow to push footer */
.container {
    max-width: 800px; /* Limit width for readability */
    margin: 0 auto; /* Center horizontally */
    padding: 20px;
    text-align: center; /* Center all text inside */
    flex: 1; /* Grow to push footer down */
}

/* Logo styling: Full width but with responsive scaling; margin for spacing */
.logo {
    max-width: 100%; /* Scale to container width */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 20px; /* Space below logo */
}

/* Headings: Sized hierarchically; margins for flow; example of changing font size (h1 is larger) */
h1 {
    font-size: 2.5em; /* 2.5 times base size; change to px/em/rem as needed */
    margin-bottom: 20px;
}

h2 {
    font-size: 1.8em; /* Smaller than h1 */
    margin: 20px 0;
}

/* Lists: Styling for numbered and bulleted; outside position for alignment; consistent padding; centered block */
ol, ul {
    list-style-position: outside; /* Markers outside, so text aligns consistently */
    padding-left: 2em; /* Consistent indent for text column; adjust value as needed (e.g., 40px for fixed) */
    text-align: left; /* Left-align the text for column-like appearance */
    width: fit-content; /* Auto-width based on content */
    margin: 0 auto 20px auto; /* Also tried 'margin: 0 auto' before; Center the entire list block horizontally */
}

li {
    margin: 10px 0;
    font-size: 1.2em; /* Example: Increase font size; change as needed */
}

/* Links: Basis styling; styled for visibility; hover for UX */
a {
    color: #007bff; /* Blue for links */
    text-decoration: none; /* No underline */
}

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

/* Separator: Thin gray line for visual break */
.separator {
    border: 0;
    height: 1px; /* Thin */
    background-color: #ccc; /* Gray line */
    margin: 30px 0; /* Space above/below */
}

/* Form: Flex column for stacking; simple centered form; inputs sized responsively */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

input {
    padding: 10px;
    margin-bottom: 10px;
    width: 300px; /* Fixed width, but responsive below */
    max-width: 100%; /* Scale on mobile */
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

/* Footer: Centered at bottom; full-width; padded; slightly darker for distinction */
footer {
    text-align: center;
    padding: 10px;
    background-color: #ddd; /* Slightly darker gray */
    width: 100%; /* Full width */
}

/* Media Query for Mobile: Adjust for screens < 600px wide; adjust for mobile; smaller fonts/widths for usability */
@media (max-width: 600px) {
    h1 {
        font-size: 2em; /* Smaller on mobile */
    }
    input {
        width: 100%; /* Full width on mobile */
    }
    .container {
        padding: 10px; /* Less padding */
    }
}