@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

:root {
    --bg: #f5f0e8;
    --bg-footer: #e8e0d0;
    /* slightly darker than page bg */
    --text-primary: #2c2416;
    --text-secondary: #6b5c44;
    --text-footer: #a89070;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a2233;
        --bg-footer: #111827;
        /* slightly darker than page bg */
        --text-primary: #eef6ff;
        --text-secondary: #dae8ff;
        --text-footer: #7d97bd;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Merriweather', Georgia, serif;
    background-color: var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.main {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    /* centers the content block horizontally */
    padding: 48px 40px;
    flex: 1;
    /* this makes .main grow to fill all available space, pushing footer down */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* vertically centers content within .main */
}


h1 {
    color: var(--text-primary);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
}

p {
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
}

footer {
    width: 100%;
    background-color: var(--bg-footer);
    /* add this to your :root variables */
    color: var(--text-footer);
    font-size: 12px;
    padding: 20px 40px;
}