body {
    color: #3a3632;
    background-color: #fdfcfa;
    font: 1.05rem/1.6 Georgia, serif;
    max-width: 42rem;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}
h1 {
    font-size: 2rem;
    color: #5c4a2a;
}
h2 {
    font-size: 1.4rem;
    color: #5c4a2a;
    border-bottom: 1px solid #d4c8b8;
    padding-bottom: 0.3rem;
    margin-top: 2.5rem;
}
a {
    color: #8b5a2b;
}
a:hover {
    color: #a0522d;
}
a:focus {
    outline: 2px solid #8b5a2b;
    outline-offset: 2px;
}
footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #d4c8b8;
    text-align: center;
}

@media (prefers-color-scheme: dark) {
    body {
        color: #d4cdc4;
        background: #1a1815;
    }
    h1, h2 {
        color: #c9a86c;
    }
    a {
        color: #d4a574;
    }
    a:hover {
        color: #e0b584;
    }
    a:focus {
        outline-color: #d4a574;
    }
    h2, footer {
        border-color: #3a332a;
    }
}