:root {
    color-scheme: light dark;
    --color-dark-bg: #181818;
    --color-dark-fg: #fff0db;
    --color-light-bg: #ffffff;
    --color-light-fg: #181818;
}

body {
    width: 100;
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--color-dark-bg);
        color: var(--color-dark-fg);
    }
}

@media (prefers-color-scheme: light) {
    body {
        background-color: var(--color-light-bg);
        color: var(--color-light-fg);
    }
}

.container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;         /* centers the container */
    padding: 20px;
    word-wrap: break-word;
}